Как создать тему OctoberCMS

Страница сообщений категории

Раздел конфигурации нашей страницы в основном такой же.

 title = "Category" url = "/category/:slug" layout = "default" description = "Filter posts by category" 

 use RainLab\Blog\Models\Post; use RainLab\Blog\Models\Category; function onStart(){ $slug = $this->param('slug'); $this['category'] = Category::where('slug', '=', $slug)->first(); if( $this['category'] ){ $post = new Post; $query = $post->isPublished() ->orderBy('published_at', 'desc') ->with('categories'); $this['posts'] = $post->scopeFilterCategories($query, [ $this['category']->id ])->get(); } } 

В части раздела PHP мы проверяем, существует ли категория. Если это так, мы запрашиваем в базе данных соответствующие сообщения.

Я собирался использовать объединение в сводной таблице между posts и categories , но плагин блога rainlab предоставляет RainLab\Blog\Models@scopeFilterCategories для фильтрации сообщений с использованием массива идентификаторов категорий: он принимает Illuminate\Query\Builder в качестве первого параметра и массив идентификаторов категорий.

Часть HTML такая же, как домашняя страница, мы изменили только заголовок, чтобы добавить название категории.

Страница сообщений

На странице постов будут напечатаны пять последних постов, а в нижней части страницы есть кнопка « load more , которая будет использовать функциональность ajax-инфраструктуры OctoberCMS для загрузки большего количества.

Чтобы иметь возможность использовать фреймворк ajax, вам нужно включить тег {% framework %} . Это выведет ссылку на файл framework.js из каталога модулей.

Тег также поддерживает параметр {% framework extra %} . Это добавит некоторые стили, такие как индикатор загрузки при использовании ajax.

AJAX Framework

Октябрь имеет хороший способ обработки некоторых из наиболее распространенных способов загрузки контента с помощью запросов AJAX. Чтобы включить инфраструктуру ajax для элемента, вы просто добавляете атрибут data-request="onMethodName" в HTML5. Метод, который будет выполняться, должен начинаться с on за которым следует имя вашего метода.

Есть два способа определить ваш метод обработчика ajax:

• В разделе PHP:

   function onMethodName(){ //handle it here } 

• Внутри компонента:

  Вы можете определить свой обработчик внутри класса компонента. Не забудьте включить компонент в раздел конфигурации вашей страницы (см. Пример ниже). Если вы хотите узнать больше о том, как создавать компоненты, обязательно ознакомьтесь с моей предыдущей статьей .

   title = "My page" url = "/" [componentName] == 

Перед отправкой запроса мы можем показать подтверждающее сообщение или перенаправить после возврата ответа. Вы можете проверить список поддерживаемых атрибутов здесь .

 <div class="col-md-2 col-md-offset-5"> <a id="load_more" href="#" class="btn btn-primary" data-request="onLoadMorePosts" data-request-update="'ajax/posts': '@#posts'" data-request-data='"postsCount": 1' data-request-success="incrementPostsCounter($el);"> Load more </a> </div> 

• data-request : onLoadMorePosts наш обработчик onLoadMorePosts который мы определили в нашем разделе PHP.
• data-request-update : здесь мы указываем частичное, которое будет загружено на сервер, а также идентификатор или класс целевого элемента. Если вы заметили символ @ перед идентификатором, это просто означает, что мы хотим добавить элемент, а не заменять его содержимое.
• data-request-data : мы можем добавить больше параметров к запросу, в этом случае мы отправляем переменную количества сообщений.
• data-request-success : код JS, который будет выполняться после каждого успешного запроса, в этом случае функция incrementPostsCounter обновит наш атрибут data-request-data .

 function onLoadMorePosts(){ $postsCount = (int) post('postsCount'); $this['posts'] = Post::isPublished() ->orderBy('published_at', 'desc') ->skip( $postsCount * 5 ) ->take(5) ->with('categories') ->get(); } 

Метод post извлекает postsCount со страницы, затем мы пропускаем указанное количество и выбираем следующие пять постов.

Страница partials/ajax/posts.htm автоматически, и список сообщений остается доступным для просмотра.

 // partials/ajax/posts.htm {% for post in posts %} <div class="post-preview"> <a href="{{ 'post'|page({slug: post.slug}) }}"> <h2 class="post-title"> {{ post.title }} </h2> <h3 class="post-subtitle"> {{ post.excerpt }} </h3> </a> <span class="post-meta">Published on {{ post.published_at|date("F jS, Y") }}</span> <br/> {% for category in post.categories %} <a href="{{ 'category'|page({slug: category.slug }) }}"> <span class="label label-primary">{{ category.name }}</span> </a> {% endfor %} </div> <hr> {% endfor %} 

На самом деле это все, что нужно для загрузки большего количества постов — анимация и вставка автоматически обрабатываются фреймворком.

Если у вас возникают проблемы с кэшированием при загрузке AJAX, попробуйте php artisan cache:clear из командной строки, чтобы очистить кеш и убедиться, что JS обновляется.

Вывод

В этой статье мы увидели, как создать базовую тему для CMS за октябрь. Мы не охватывали все функции, но это должно помочь вам рассмотреть возможность взглянуть или даже помочь вам изучить некоторые новые возможности. Вы можете посмотреть окончательный результат на Github , и если у вас есть какие-либо вопросы или мнения, дайте мне знать в комментариях!