Статьи

Запись поиска и разбиение на страницы в CMS Болт

Октябрь 30, 2018

Bolt — это легкая CMS, построенная на Silex с компонентами Symfony, с которой быстро, легко и весело разрабатывать. Моя недавняя привязанность к Болту превратила его в мою CMS, поскольку я прилагаю сознательные усилия, чтобы выбирать мудро и отойти от раздутых структур. Ранее я дал очень подробное представление о том, что такое разработка с помощью Bolt.

Bolt CMS

Сегодня мы собираемся разбить очень популярную задачу на этапы, чтобы выполнить ее с легкостью. Вот что мы будем делать:

  1. Мы создадим тип контента для новостных статей, включающий заголовок, отрывок, рекомендуемое изображение и текст.
  2. Мы будем извлекать новостные статьи и отображать их в стиле «блог», включая нумерацию страниц.
  3. Каждая новостная статья в ленте будет содержать ссылку на отдельную страницу, где будет отображаться полная статья.
  4. На полной странице статьи мы будем генерировать ссылки на предыдущие и следующие статьи.

Прежде чем мы углубимся, давайте наметим путь, по которому мы пойдем, чтобы все это произошло. Сначала мы получим свежую установку Bolt через Git и Composer. Мы будем использовать файловую базу данных SQLite, так как она готова к работе и не требует настройки. Для быстрого создания шаблонов мы добавим бесплатную тему Boostrap от Bootswatch . Bolt использует Twig , современный движок шаблонов для PHP, поэтому мы создадим быструю тему с нуля, используя разметку Twig. Как только мы все настроим, мы создадим наш тип контента, добавим несколько фиктивных данных и выведем их на страницу. Мы будем добавлять фиктивные данные до тех пор, пока у нас не будет достаточно для применения подкачки страниц, затем мы будем ссылаться на отдельные статьи и генерировать предыдущие и следующие ссылки. Без лишних слов давайте окунемся!

Установка

В качестве среды мы будем использовать нашу собственную Homestead Improved, но вы можете использовать свою локальную конфигурацию. Этот пост будет продолжен при условии, что вы установили Composer глобально и указали виртуальному хосту соответствующую папку, сгенерированную командами ниже.

Для установки мы выполняем: 

git clone git://github.com/bolt/bolt bolt cd bolt git checkout v2.0.6 composer install

На момент написания статьи версия 2.0.6 является стабильной веткой. Если вы видите какие-либо ошибки прав доступа, вам нужно сбросить несколько каталогов, выполнив следующую команду: 

 chmod -R 777 files/ app/database/ app/cache/ app/config/ theme/ extensions/

Если вы сейчас заходите в интерфейс CMS в браузере, вы должны увидеть экран «Создать пользователя». Это зарегистрирует первого пользователя в базе данных и предоставит вам доступ к административному порталу, где мы можем редактировать файлы конфигурации, настраивать типы контента, добавлять контент и переключать темы. Создайте этого пользователя и войдите в административный портал, перейдя в /bolt . Проверьте внешний интерфейс тоже — вы должны увидеть отображение темы по умолчанию Bolt. Давайте перейдем к настройке и созданию нашей собственной темы.

Быстрая настройка темы

Поскольку мы не собираемся уделять много внимания внешнему виду нашего тестового сайта, я не буду вдаваться в подробности внешнего интерфейса. Однако мы будем быстро создавать свою собственную тему, используя тему Cosmo Bootstrap из Bootswatch , и разбивать некоторые из наших файлов на многократно используемые части. Внутри каталога theme создайте новый каталог с именем my-theme и создайте новый файл с именем index.twig . Давайте пока оставим это поле пустым и перейдем к концу действий администратора.

Перейдите в « Configuration -> Main configuration и посмотрите вокруг. Многие параметры вашего сайта могут быть изменены здесь. Как упоминалось ранее, мы используем SQLite «из коробки», поэтому нет необходимости изменять настройки базы данных. Не стесняйтесь редактировать название сайта и выплаты, но смена названия темы сейчас важнее для нас. Прокрутите вниз до раздела темы и переключите его на my-theme . Это все, что нам нужно сделать в нашем главном файле конфигурации, поэтому сохраните его и вернемся к нашему файлу index.twig .

Используя некоторые классы Bootstrap, вот что я придумал, чтобы начать работу (пока не используйте этот код — нам нужно разбить его): 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My Site</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> </ul> </div> </div> </nav><!-- /nav --> </header><!-- /header --> <main> <div class="container"> <h1>Welcome to my site</h1> <p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p> </div> </main><!-- /main --> <hr> <footer> <div class="container"> &copy; 2015, My Site </div> </footer><!-- /footer --> </body> </html>

Конечно, это не очень многоразово. Мы хотим разбить это на частичные части, чтобы мы могли включить основные блоки в другие шаблоны. Поскольку наш сайт прост, нам нужно только два:

  • _header.twig
  • _footer.twig

Вы можете называть ваши частичные имена так, как хотите, но соглашение Bolt состоит в том, чтобы подчеркивать имена для представления частичных. Вот как будет выглядеть наш частичный _header.twig : 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My Site</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> </ul> </div> </div> </nav><!-- /nav --> </header><!-- /header --> <main> <div class="container">

А вот часть footer.twig : 

 </div> </main><!-- /main --> <hr> <footer> <div class="container"> &copy; 2015, My Site </div> </footer><!-- /footer --> </body> </html>

Теперь мы можем реструктурировать наш файл index.twig и любые будущие шаблоны, включив в него следующие компоненты: 

 {% include '_header.twig' %} <h1>Welcome to my site</h1> <p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p> {% include '_footer.twig' %}

Обновите свой браузер, и вы заметите, что все по-прежнему в порядке — только мы сейчас используем частичные. Прежде чем мы продолжим, вы должны принять к сведению, что существует два способа создания шаблонов с использованием Twig:

  1. Первый использует включает, как мы сделали выше. Это метод по умолчанию в документации Bolt.
  2. Второй — использование наследования шаблонов , которое позволяет вам создавать базовые скелеты и расширять его другими файлами шаблонов, внедряя контент в различные блоки.

В этом уроке мы будем придерживаться метода включений по умолчанию, но я рекомендую прочитать и узнать о наследовании шаблонов, поскольку он довольно мощный. Давайте перейдем к созданию типов контента.

Создание типов контента (contenttypes)

Типы контента лежат в основе любого веб-сайта или приложения Bolt. Они позволяют нам создавать структуру контента именно так, как мы этого хотим, добавлять столько записей, сколько мы хотим, сохранять их в нашей базе данных, извлекать их, сортировать их, искать их и так далее. В нашем приложении нам нужен только один тип контента: Новости. Это позволит нам добавить несколько новостных статей в определенном формате.

Под Configuartion -> Contenttypes вы заметите, что Bolt уже поставляется с тремя типами контента, чтобы вы могли начать работу. Давайте пока избавимся от всех трех, чтобы мы могли сосредоточиться на создании своих собственных. Пока просто отметьте, что мы хотим, чтобы с каждой новостной статьей было связано следующее:

  • Заголовок
  • Выдержка
  • Рекомендуемое изображение
  • Тело

Мы также хотим, чтобы при просмотре одной новостной статьи использовался определенный шаблон, а также другой шаблон для извлечения всех новостных статей. Эти настройки определяются следующими двумя параметрами соответственно:

  • record_template
  • listing_template

Вот как выглядит наша конфигурация Contenttypes: 

 # News news: name: News singular_name: News Item slug: news singular_slug: news listing_template: news.twig record_template: newsitem.twig default_status: published fields: title: type: text class: large slug: type: slug uses: title image: type: image excerpt: type: textarea height: 150px body: type: html height: 300px

На этом этапе нам нужно обновить базу данных, чтобы отразить изменения, поэтому перейдите в Configuration -> Check database и нажмите кнопку обновления. Теперь вы должны увидеть News на боковой панели. Прежде чем мы продолжим, давайте добавим несколько фиктивных статей. Я добавил 20 — процесс, я знаю, но это будет удобно для подкачки. Я просто использовал текст lorem ipsum и фиктивное изображение размером 120 на 120 пикселей.

Извлечение всех записей

Как мы определили выше, мы будем использовать news.twig шаблона news.twig для извлечения всех наших новостей. Создайте этот файл в вашей директории темы и включите в себя следующие компоненты: 

 {% include '_header.twig' %} <h1>News</h1> <p class="lead">View all the news articles here.</p> <hr> {% include '_footer.twig' %}

Этот шаблон теперь доступен через URL /news , поэтому мы можем жестко закодировать его в нашу навигацию (меню выходят за рамки этого руководства). В Bolt на страницах, которые используются для списков, всегда есть переменная {{ records }} . Однако, поскольку мы будем пейджинговым контентом, нам нужно немного больше контроля. Вместо этого мы будем использовать очень важный тег setcontent , который позволяет нам добавлять небольшие запросы и правила к содержимому, которое мы собираемся получить. Давайте переберем все наши новостные статьи и выведем их с некоторыми классами Bootstrap: 

 {% include '_header.twig' %} <h1>News</h1> <p class="lead">View all the news articles here.</p> <hr> {% setcontent news = 'news' %} {% for newsitem in news %} <article class="media"> <div class="media-left"> <a href="#"> <img src="{{ image(newsitem.image) }}" alt="{{ newsitem.title }}"> </a> </div> <div class="media-body"> <h2 class="media-heading">{{ newsitem.title }}</h2> <p class="media-excerpt">{{ newsitem.excerpt }}</p> <a href="#" class="btn btn-primary btn-sm">Read Full Article</a> </div> </article> {% endfor %} <hr> pagination {% include '_footer.twig' %}

Обратите внимание, как мы извлекали контент на основе имен полей, определенных в конфигурации contenttype. Это не становится намного легче, чем это. Мы пока не включили ссылки на отдельные новости. Давайте сделаем это сейчас. Bolt предлагает вспомогательную функцию для извлечения ссылки на отдельную запись содержимого. Мы можем использовать его и реализовать так: 

 <a href="{{ newsitem.link }}"> <img src="{{ image(newsitem.image) }}" alt="{{ newsitem.title }}"> </a>

Теперь мы можем обновить все наши атрибуты href в цикле, чтобы иметь рабочие ссылки на каждую отдельную запись. Вот скриншот того, как должен выглядеть листинг.

Listing of records

Прежде чем мы разработаем шаблон единственного элемента новостей, давайте разберем наши записи.

Пейджинг записей

Пейджинговая запись не становится легче, чем эта Нет больше запутанных функций, которые ломаются в зависимости от вашей структуры URL, ничего подобного. В нашем файле шаблона мы сначала хотим ограничить количество новостей на странице до 5. Затем мы хотим вывести ссылки на страницы. Для начала нам нужно обновить тег setcontent чтобы он отражал наши потребности: 

 {% setcontent news = 'news/latest/5' allowpaging %}

Ниже в нашем шаблоне мы можем использовать тег pager для вывода ссылок на страницы. После внесения изменений наш шаблон должен выглядеть примерно так: 

 {% setcontent news = 'news/latest/5' allowpaging %} {% for newsitem in news %} <!-- output loop here --> {% endfor %} {{ pager() }}

К счастью для нас, стили пагинации Bootstrap хорошо сочетаются с HTML, который выводится из функции pager Bolt, поэтому, если все прошло успешно, у вас должен быть простой, работающий вывод нумерации страниц. Вот скриншот пагинации в действии.

Pagination in action

Просто и красиво. Давайте двигаться дальше.

Извлечение и вывод одной записи

К настоящему времени вы должны освоить способ работы Болта. Тогда вы бы правильно предположили, что нам нужно создать файл newsitem.twig каталоге нашей темы. Если вы правильно помните, это файл, который мы указали в конфигурации contenttype. Давайте создадим это и добавим наши партиалы, как раньше: 

 {% include '_header.twig' %} {% include '_footer.twig' %}

Ранее я упоминал, что определенные переменные доступны по умолчанию в шаблонах записей или списков. Поскольку мы просматриваем одну запись здесь, у нас есть переменная {{ record }} доступная нам. Имея это в виду, нам не нужно использовать тег setcontent , потому что он уже доступен. Мы можем легко извлечь нужные данные и вывести их в наш шаблон. Используя некоторые классы Bootstrap и немного встроенного CSS для эффективности, вот что я придумал: 

 {% include '_header.twig' %} <article> <header class="article__header"> <h1>{{ record.title }}</h1> <p class="lead">{{ record.excerpt }}</p> <hr> </header> <div class="article__body"> <img src="{{ image(record.image) }}" alt="{{ record.title }}" class="pull-left" width="120" height="120" style="margin-right: 12px;"> {{ record.body }} </div> </article> {% include '_footer.twig' %}

Перейдите в браузер и перейдите к любой из ваших новостных статей. Теперь вы должны видеть, как они отображаются в соответствии с вашим шаблоном. Потрясающие! Насколько это было легко? Посмотрите на скриншот ниже, чтобы увидеть список отдельных записей.

Single record listing

У нас есть один последний кусочек головоломки, и вы уже догадались, это бриз.

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

 {% include '_header.twig' %} <article> <!-- article loop here --> </article> <hr> <nav class="row"> <div class="col-md-6"> <a href="#">Previous</a> </div> <div class="col-md-6 text-right"> <a href="#">Next</a> </div> </nav> {% include '_footer.twig' %}

Теперь нам нужно получить эти ссылки. Болт, как вы уже догадались, предлагает функции для извлечения предыдущих и следующих записей из коробки. Все, что нам нужно сделать, это: 

 {% set prev = record.previous() %} {% set next = record.next() %}

Теперь это дает нам полный доступ к содержанию предыдущей и следующей записи. В результате мы можем обновить нашу навигацию, чтобы выводить ссылки следующим образом: 

 <nav class="row"> <div class="col-md-6"> <a href="{{ prev.link }}">&laquo; {{ prev.title }}</a> </div> <div class="col-md-6 text-right"> <a href="{{ next.link }}">{{ next.title }} &raquo;</a> </div> </nav>

Мы так близки к завершению, но нам нужно рассмотреть одну важную вещь. На первой странице новостей не будет «следующей» записи. Аналогично, на последнем не будет предыдущей записи. Давайте просто запустим условие, чтобы проверить это: 

 <nav class="row"> <div class="col-md-6"> {% if (prev) %} <a href="{{ prev.link }}">&laquo; {{ prev.title }}</a> {% endif %} </div> <div class="col-md-6 text-right"> {% if (next) %} <a href="{{ next.link }}">{{ next.title }} &raquo;</a> {% endif %} </div> </nav>

Для завершения и демонстрации простоты, с которой мы можем разрабатывать шаблоны и выводить контент с помощью Bolt, вот последний шаблон newsitem.twig : 

 {% include '_header.twig' %} <article> <header class="article__header"> <h1>{{ record.title }}</h1> <p class="lead">{{ record.excerpt }}</p> <hr> </header> <div class="article__body"> <img src="{{ image(record.image) }}" alt="{{ record.title }}" class="pull-left" width="120" height="120" style="margin-right: 12px;"> {{ record.body }} </div> </article> <hr> {% set prev = record.previous() %} {% set next = record.next() %} <nav class="row"> <div class="col-md-6"> {% if (prev) %} <a href="{{ prev.link }}">&laquo; {{ prev.title }}</a> {% endif %} </div> <div class="col-md-6 text-right"> {% if (next) %} <a href="{{ next.link }}">{{ next.title }} &raquo;</a> {% endif %} </div> </nav> {% include '_footer.twig' %}

Ницца. Теперь мы должны иметь возможность просматривать все наши новостные статьи, используя предыдущие и следующие ссылки. Вот скриншот предыдущих и следующих ссылок в действии.

Prev next links

Завершение

По мере того как сеть продолжает развиваться в размерах, масштабах, сложности и посещаемости, эффективность и скорость играют все более важную роль. Мы должны приложить максимум усилий, чтобы избавиться от избыточного вздутия настолько, насколько это возможно, чтобы наши приложения были аккуратными и стройными. Помимо того, что это легковесная и надежная CMS, которая позволяет вам определять ход и работу вашего сайта, Bolt также предлагает фронт-энд и бэк-эндеру простой и удобный рабочий процесс при разработке тем, типов контента и многого другого. В этом уроке мы увидели, как быстро и легко мы можем настроить и получить доступ к контенту так, как мы хотим. Перед тем, как приступить к следующему проекту, серьезно спросите себя, действительно ли необходима мощная CMS с широкими возможностями или вы можете поддерживать ее с помощью Bolt. Лично я очень поддерживаю Bolt и использую его во всех текущих личных проектах, которые требуют CMS. Обратная связь? Комментарии? Дайте нам знать!

35
Share: