Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Представляем Stacey: легкая альтернатива CMS

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

В мире систем управления контентом больше, чем Wordpress, Squarespace и Joomla. Я собираюсь показать вам облегченную и бесплатную базу данных, идеально подходящую для простого ведения блога. Ее зовут Stacey..


Что такое Stacey?

 Stacey - это легкий PHP-CMS, разработанный Энтони Колбером. В отличие от большинства CMS нет никакой базы данных, нет интерфейса администратора, просто небольшая коллекция php-файлов. Бросьте папку приложения на php-сервер, и у вас все будет хорошо получаться.

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

 Вам также не нужно быть знакомым с php для создания темы. Stacey использует язык шаблонов, который позволяет выводить данные и выполнять некоторые основные трюки, но в этом нет ничего сложного. Если вам нравится HTML и CSS, вы в хороших руках.


 Почему даже двигаться с идеей быстрее?

 Иногда пакеты CMS, которые мы все привыкли видеть (думаю, WordPress, Drupal), слишком мощные. Они стали чрезвычайно способными и универсальными платформами, но часто слишком сложными, если все, что вам нужно, это писать случайные сообщения в блоге.

Stacey, однако, очень сфокусирована. Существует также дополнительный элемент безопасности, поскольку у нее нет базы данных для взлома (безопасность - это фактор, который привел к нескольким подходам CMS без базы данных, таким как Jekyll, который выполняется локально и создает статический HTML для развертывания на вашем веб-сервере).

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

 И вот наконец, всегда весело играть с разными вещами.

 Хватит говорить, давайте подумаем, что вы можете сделать.


Первое

 Чтобы продемонстрировать особенности и внутреннюю работу Stacey, нам сначала нужно создать простой блог. Я не буду вдаваться в сборку HTML/CSS, но давайте просто сломаем файлы, с которыми я буду работать.

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

Итак, для начала, мне нужно подумать о страницах (и, следовательно, шаблонах), которые мне понадобятся.  Стандартный материал для блога; index.html, где я могу перечислить последние сообщения в блогах, отдельную запись, а также страницу для отображения таких вещей, как «О себе», «Контакт» и т. д. О том, как вы можете узнать общие сведения!

 Начнем с HTML-страницы blanco:

 Пока все ясно. Нам понадобится style.css (вместе с normalize.css в этом случае), и я включил пару значков.

 Вы заметите, что помимо HTML5 shiv нет ссылки на jQuery или любые другие JavaScripts. Нам это действительно не нужно, так зачем беспокоиться, включая активы? Держите вещи опорными и средними. На данный момент наша файловая структура выглядит примерно так:



 Второе основание

Давайте быстро завершим эту статическую HTML-страницу, тогда мы сможем сосредоточиться на привлечении Stacey. Я выбрал, с логотипом  и некоторыми основными ссылками навигации:

 Под этим, на главной странице, по крайней мере, есть раздел героя, чтобы привлечь посетителей:

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

Вот еще один раздел, наша основная область содержимого, начиная с aside, где мы разместим нашу вторичную навигацию:

 Помимо всего прочего, наши статьи дегустатора приводят людей в сообщения в блоге. Есть несколько article из этих элементов:

 После всех наших статей мы закроем всех родителей и добавим простой нижний колонтитул, который содержит пару ссылок:

 Фух, мы закончили с разметкой! Теперь CSS ..


 Закрытие сделки

 Наш CSS прямолинейный. Нет изображений для встраивания, без градиентов, значений радиуса границы или неясных эффектов CSS3. Мы начнем с некоторых основ:

 Я всегда включаю их - clearfix очень полезен, и * {box-sizing: border-box} позволяет блестяще интуитивно понятный способ манипулирования элементами.

 Остальная часть CSS - это просто стиль. В нем есть удивительная помидорная цветовая ценность, которую я сейчас люблю.  Макет следует за мобильным первым подходом, причем только один медиа-запрос на 700px сдвигает вещи в столбцы и уменьшает базовый размер шрифта.

 Итак, конечный результат?


 На других страницах более или менее одинаковая структура, что дает нам достойную основу для работы. На самом деле учебник!


Шаг 1: Сбор Stacey

 Этот бит прост; перейдите в репозиторий Staty's GitHub и загрузите исходные файлы (3.0 на момент написания).

 Это более или менее то, что вы скачали

 Большая часть того, что вы загрузили, - это демо-материал, поэтому мы можем убрать много лишнего. Нам нужно сохранить:

  •  Папка 'app' и ее содержимое.
  •  Папка «Расширения» и ее содержимое.
  •  Файл 'htaccess'.
  •  Файл index.php.

 Нам также нужны следующие папки, но теперь они могут быть полностью опустошены:

  •  Папка 'content'.
  •  «Публичная» папка.
  •  Папка 'templates'.

 Шаг 2: Знакомство

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

Dangit

 Достаточно справедливо, мы вытащили весь демонстрационный контент, поэтому давайте теперь добавим некоторые необходимые файлы и интегрируем нашу тему блога, чтобы реально работать.

 Во-первых, поместите index.html, который мы встроили в папку шаблонов нашего проекта Stacey. Во-вторых, нам нужно установить некоторые глобальные переменные, поэтому поместите файл в папку «content», назовите его «_shared.yml» или «_shared.txt» и заполните его следующим образом:

 Все станет ясно через мгновение ..

 Наконец, чтобы использовать наш index.html и отобразить страницу, добавьте папку в «content», называемую «index». В этой папке добавьте файл с именем index.yml.


 Теперь, если вы обновите страницу, вы увидите, что указана наша index.html (хотя она по-прежнему полностью отсутствует в стилях).


 Шаг 3: Как работает Stacey

 Я просто объясняю, что там произошло. При открытии страницы Stacey ищет содержимое в папке. Она всегда будет сначала смотреть на «_shared.yml», вот где мы установили некоторые глобальные переменные, такие как имя сайта и т. д.  Если вы не знакомы с YAML, подумайте об этом как удобочитаемую разметку. Мы также могли бы использовать файл .txt здесь, на самом деле Stacey распознает и анализирует все виды форматов файлов.

 Затем она ищет папку для соответствия URL-адресу. Мы открыли root в браузере, поэтому она использовала папку «index» для определения содержимого. Как только папка содержимого будет найдена, она будет искать файл .txt или .yml в этой папке.  Имя этого файла очень важно, поскольку это соответствует имени шаблона, который она выберет из папки «шаблоны». Она сотрет все вместе и отобразит результат в браузере.


 Переименование нашего .yml-файла будет означать использование другого файла шаблона:


 С этим проясним, давайте теперь получим наш index.html, выглядящий более презентабельно.


Шаг 4: Объединение активов

 Мы уже подготовили наши файлы CSS и наши значки, но наш шаблон index.html не может найти их на данный момент. Давайте поместим их в «общедоступную» папку, затем убедитесь, что все пути указываются в нужном месте.

 «Публичная» папка предоставляется нам, благодаря некоторому .htaccess wizardry, прямо в корне проекта. Это означает, что мы можем указать '/css/styles.css' вместо '/public/css/styles.css'.  Для этого нам нужно сначала переименовать файл htaccess «.htaccess» и убедиться, что наш сервер разрешает ReWrites (в большинстве случаев ваш сервер будет использовать эту функцию по умолчанию).

Stacey делает несколько переменных, которые всегда доступны для нас. Например, мы можем вывести {{page.root_path}}, который даст нам корень нашего проекта. Давайте обновим наши пути, чтобы убедиться, что CSS и favicons подключены:

 Если вы сейчас перезагрузите страницу, вы увидите, что index.html отображается точно так же, как мы это сделали. Отлично.


Шаг 5: О чем она говорит?

 Итак, эти фигурные скобки, которые я использовал для вывода переменной? Они являются частью языка шаблонов Twig, который Stacey использует для общения.  Вам не нужно быть гениальным разработчиком, чтобы использовать Stacey, но есть несколько способов вывода того, что вам нужно знать.

 Существует два типа разделителей: {% ...%} и {{...}}. Первый используется для выполнения таких операторов, как for-loops, последний печатает результат выражения в шаблоне. - Twig Documentation для дизайнеров

 Давайте снова используем одно и то же значение, чтобы связать наш логотип с корневым URL:

 Теперь давайте посмотрим на некоторые другие переменные; мы устанавливаем несколько в нашем '_shared.yml', используя пары ключевых значений, помните? Давайте используем эти значения в наших метатегах.

 Эти значения будут взяты из файла '_shared.yml', если мы не перепишем переменные в наших файлах содержимого. Если мы определяем «title: Margarine» в «index.yml», это значение, которое будет выводиться.

Таким образом, мы можем определять переменные и выводить их в HTML-шаблонах. Например, давайте поместим пару ключевых значений для 'page_title' в 'index.yml'. Мы можем получить этот результат в метатеге заголовка:

Если это значение недоступно, оно не будет выводиться, просто так. Теперь мы можем определить конкретный заголовок страницы для каждой страницы нашего проекта (но мы немного поразмыслим). Теперь все начинается вместе?


Шаг 6: Разделение

Уже?! Не паникуйте, я говорю о разделении наших файлов шаблонов. Если вы когда-либо создавали динамический веб-сайт, у вас будут сводные общие активы в свои собственные файлы.  Например, глава нашего index.html будет использоваться точно так же для всех наших файлов шаблонов, поэтому нет смысла иметь несколько его копий. Давайте разделим его на собственный файл:

 Все до закрытия /header>  будет общим для всех шаблонов. Вырежьте это, вставьте его в новый файл и сохраните этот файл как «head.html» в разделе «partials» новой папки в каталоге шаблонов.


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

 Обновите свою домашнюю страницу, и все должно выглядеть точно так, как было, полностью не изменилось. Вы можете сделать это для нескольких областей index.html, конечно; нижний колонтитул (включая /body>теги /html> и ) должен идти в частичном «footer.html», содержании в стороне, плюс дегустации статей цикла.

Как только вы закончите, у вас должно быть несколько фрагментов в папке «partials» и несколько более легкий шаблон index.html, который выглядит так:


Шаг 7: Получение важного

До сих пор то, что мы создали, сводится к слишком сложной версии статической html-страницы, о которой мало что можно написать. Теперь добавим фактический контент в наши каталоги, чтобы мы могли видеть его динамически.

Как я уже упоминал ранее, Stacey хватает контент из папки «контент». Она обращается к файлу '_shared.yml', затем она проверяет, какая папка соответствует текущему URL. У нас есть дружественные URL-адреса (при условии, что вы правильно переименовали ваш файл .htaccess), поэтому, если мы посетим «stacey-master/cheese-burger», она будет искать файл YAML в «контенте/сыр-бургер».

В противном случае она будет искать «контент/1.cheese-burger» или «content/2.cheese-burger», потому что мы также можем добавлять имена наших папок с цифрами. Это позволяет нам индексировать их, если нам когда-либо понадобится перебирать папки (что мы рассмотрим немного позже).

Дальнейшее разъяснение того, как Стейси тянет контент в браузер

Мы собираемся добавить несколько папок в нашу папку «content». У нас есть один для «контакта» и другой для «о». Вы заметите, что им предшествует число, что означает, что мы можем индексировать их и проходить по ним для целей навигации.

Затем у нас есть «статьи», которые не содержат собственного файла .yml (чтобы помочь нам предотвратить его перечисление вместе с двумя другими) и ряд пронумерованных папок внутри него. Это будут наши статьи, пути к которым будут:

  • {root}/articles/leather
  • {root}/articles/rolling-cheese
  • {root}/articles/taxi-driver
  • {root}/articles/snake-skin


Шаг 8: Содержание

У нас есть папки, чтобы дать нам некоторый контент, так что теперь давайте фактически поместим этот контент в папки. Как мы уже говорили ранее, нам нужен файл .yml или .txt в каждой папке, чтобы Стейси знала, какой шаблон использовать и какой контент в него накачать. Без такого файла Стейси выведет ошибку 404 (которая напоминает мне, что нам нужно собрать 404.html и в какой-то момент, не дайте мне забыть ..)

В каждой из наших подпапок "статьи" поместите пустой файл: "post.yml". Это будет указывать на шаблон «post.html», поэтому продублируйте шаблон «index.html» и переименуйте его соответствующим образом. Хорошее начало - посещение любого URL-адреса статьи теперь, по крайней мере, создаст страницу, хотя и дубликат нашей домашней страницы.

В нашем post.yml мы можем указать ряд переменных, которые мы можем использовать для заполнения нашего шаблона post.html. Любые значения, которые вам нравятся, если они представляют собой пары ключевых значений, например:

Значения могут содержать синтаксис html или (что еще более полезно) уценку. Добавление «|» и разрыв строки после того, как ключ автоматически отобразит контент как уценку, оборачивая контент в теги p> после его анализа.  Например, «post.yml» для нашей папки «articles/1.leather» выглядит следующим образом:

Вы узнаете, что page_title - это переменная, которую мы ввели в мета-заголовок страницы ранее. Мы указали строку даты, автора, вступительный абзац и содержимое. И вступление, и содержание будут проанализированы как уценка из-за '|' и разрыв строки.


Шаг 9: Вывод

Давайте теперь на самом деле выведем эти переменные в наш шаблон post.html. Во-первых, мы удалим весь этот элемент section class="hero"> нам это не нужно нигде, кроме домашней страницы. Далее мы удалим оператор {% include 'partials/list_articles.html'%} в нашем элементе tasters.

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

 Теперь замените значения на переменные, которые мы указали:

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


Теперь повторите для всех файлов 'post.yml' в вашей папке статей!


Шаг 10: Условия

Итак, мы рассмотрели установку и вывод переменных. Теперь давайте посмотрим на условные (if) операторы Стейси.

Мы собираемся добавить несколько ссылок внизу каждого поста, чтобы перейти к следующей и предыдущей записи. Для начала нам нужно разобраться, есть ли какие-либо записи (папки-братья) для ссылки. К счастью, Стейси предоставляет широкий спектр переменных для нас в любой момент; мы уже видели и использовали несколько переменных на странице. scope. Хотя на странице мы также можем использовать page.siblings, чтобы выполнить эту конкретную проверку для нас:

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

 Теперь нам нужно сделать частичные, которые мы только что проинструктировали, чтобы Стейси включила (если их там нет, она вызовет истерику). link_prev.html будет содержать следующее:

and link_next.html this:

 Перезагрузите страницу, вы должны получить что-то вроде этого:


Чтобы они динамически генерировались, отображали правильные заголовки и ссылались на правильные сообщения, нам нужно снова погрузиться в область видимости Стейси. Мы будем использовать цикл for/endfor, отображающий каждое значение, присутствующее в переменных page.previous_sibling и page.next_sibling. Может быть только один из каждого, поэтому мы генерируем одну ссылку с правильными деталями:

и

Как видите, Стейси подготовила все нужные нам значения, предоставив нам все детали страницы для папок-братьев нашей текущей записи. Блестяще.



Шаг 11: Основная навигация

У нас это хорошо получается, верно? Как насчет того, чтобы пройтись по другим значениям и вывести несколько ссылок для наших страниц верхнего уровня? Мы разместим их в полосе заголовка вверху каждой страницы. Вот что мы имеем в partials/head.html:

Как мы перебираем папки в нашем корне? Что это за папки? Мы концентрируемся на 1.about и 2.contact - это те два, которые будут перечислены. Для того, чтобы пройти через них, они должны быть пронумерованы - мы также сделаем это необходимым для того, чтобы присутствовал файл .yml. Итак, мы смотрим на детей в корне, и именно так Стейси подготовила их и для нас. Замените элементы списка этим циклом:

Вы сможете понять, что происходит из того, что мы ранее делали с циклами for/endfor. Мы сказали, что для каждого дочернего элемента, присутствующего в корне (папка «content»), if для этого дочернего элемента имеется переменная page_title, выведите подробности. В этом случае наша папка «3.articles» игнорируется.

Что может вас удивить, так это то, что папки расположены в обратном порядке. Это логично, если учесть, что более свежие записи в блогах будут иметь более высокие номера, самые ранние, конечно, с 1,2,3 и т. д. Самые последние папки выводятся первыми. Я думаю, что я переключу числа в моих папках «о» и «контакт», чтобы они отображались более благоприятно.

Чтобы на самом деле что-то выводить, нам понадобятся необходимые файлы .yml в папках 1.about и 2.contact, поэтому убедитесь, что они у вас есть. Опять же, вам нужно назвать их 'page.yml' или что-то подобное, убедившись, что в папке шаблонов присутствует шаблон с таким именем. Теперь все это естественно!


Шаг 12: Вторичная навигация

Мы добились хорошего прогресса, теперь нам нужно вывести аналогичный набор ссылок для нашего subnav, поэтому мы выведем имеющиеся подпапки. Поместите это в часть "nav_articles.html":

Мы говорим, что для каждого индексируемого дочернего элемента («1.about, 2.contact, 3.articles»), если у этого дочернего элемента есть собственные дочерние элементы, производите элемент ul>. Для каждого из этих дочерних элементов выведите элемент списка с заголовком и URL-адресом.

У нас есть только одна папка с дочерними элементами, наша папка «статьи», но если бы у нас было больше, например, портфолио, то это тоже было бы выведено. В таких ситуациях может быть целесообразно четко разделить подменю, но в этом случае нам не о чем беспокоиться.


Теперь у вас должно быть динамически выводимое подменю, связывающее вас с каждой статьей. Что еще более важно, у вас почти полностью функционирующий сайт! Я просто собираюсь очистить шаблон "page.html", избавившись от предыдущих и следующих ссылок, а также от всех метаданных, которые нам не нужны. Тело шаблона теперь выглядит так:

Все довольно просто.


Шаг 13: Содержание домашней страницы

Сообщения на главной странице более или менее аналогичны вторичной навигации. Давайте выведем их тем же способом, добавив дополнительные переменные и биты разметки по мере необходимости. В partials / list_articles.html мы используем то же самое for/if/for аранжировки:

Теперь давайте добавим разметку вместе с правильными переменными в цикл:

Готово! Давайте теперь посмотрим на некоторые дополнения, чтобы немного оживить сайт.


Шаг 14: Без комментариев

Дискуссия и сообщество часто присутствуют в блогах, но поскольку у нас нет базы данных, нам трудно управлять собственной системой комментариев. Вместо этого мы собираемся опираться на сторонние сервисы и заставлять их выполнять за нас тяжелую работу. Здесь есть много вариантов, Facebook позволяет вам использовать их API комментарии, что позволяет вам использовать всю мощь крупнейшей в мире социальной сети. Тем не менее, одна из оговорок в выборе их сервиса заключается в том, что вы технически не владеете контентом, созданным с помощью этого метода. Ваши комментарии не ваши. Кто может сказать, что произойдет в будущем и какие права вы будете иметь или хотите иметь в отношении контента?

Вместо этого сегодня мы собираемся на Disqus, который вы заметите, мы также недавно внедрили на Tuts+.

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


После того, как вы заполнили все необходимые детали, вы найдете варианты реализации Disqus на своем сайте. Есть плагины для всех видов знакомых платформ, но нам понадобится универсальный фрагмент для встраивания:

Нам нужно вставить это на наших страницах, где нужны комментарии. Это полностью зависит от вас, как вы поступите с этим - вы можете просто скопировать и вставить это туда, куда будут идти комментарии (в "post.html"), или вы можете разделить их в отдельный файл js, который делает вещи немного чище.

Вам понадобится элемент, где вводятся комментарии, чтобы поместить его в шаблон «post.html»:

Я просто вставил его под следующей и предыдущей ссылками. Теперь отделите javascript и поместите в файл в новую папку js в общедоступном каталоге:

Я назвал этот файл disqus.js и вставлю его в часть нижнего колонтитула.

Примечание: На некоторых страницах сценарий выдает маленькое предупреждение (проверьте веб-инспектор), если он ищет div disqus_thread и не может его найти. Не большая проблема, но если вы гений JS, и вы хотите разобраться с этим, не стесняйтесь!


Здорово! Теперь у нас есть комментарии к каждому сообщению! Disqus присматривает за нами, записывая комментарии против URL каждого поста (поэтому, если вы по какой-то причине измените URL, ожидайте, что ваши комментарии исчезнут). Также приятно, что введенная разметка является полностью плавной (поэтому она хорошо вписывается в наш макет Fluis) и принимает некоторые из простых стилей, которые мы установили, такие как цвета ссылок и т. д.

Оставьте некоторые комментарии, они нам понадобятся для проверки следующего бита.


Шаг 15: Подсчет комментариев

Выделив место для подсчета комментариев каждого поста среди метаданных, давайте теперь заполним его реальными данными. Disqus позволяет нам делать это с другим фрагментом js (который вы найдете на своей панели монитора disqus.com). Опять же, вы можете вставить его как есть или просто взять то, что нам нужно, и добавить его в файл disqus.js:

Это перенаправляет в фай count.js. Теперь нам нужно добавить любые ссылки, где мы хотим, чтобы количество комментариев отображалось с помощью disqus_thread. Например, в нашем post.html:

и в partials/list_article.html:

«Комментарии» будут заменены, как только все будет загружено, с количеством комментариев, связанным с URL:



Шаг 16: 404

Благодаря файлу .htaccess мы все настроены на использование перенаправлений 404, если кто-то вводит неверный URL. Теперь все, что нам нужно сделать, это поместить файл 404.html в общую папку. Так как этот файл никак не анализируется Стейси, мы не можем использовать переменные или какой-либо контент, который у нас есть где-то еще (позор). По этой причине лучше иметь автономный файл, полностью автономный, со всеми его стилями и содержимым прямо в html.

Вот что я придумал (быстро), обратите внимание на встроенные стили в заголовке документа:

Идите дальше и создайте этот файл. Бросьте его в общую папку, затем зайдите на бессмысленный URL в вашем проекте.



Шаг 17: Друзья с преимуществами

Стейси предлагает гораздо больше, прямо из коробки, так что это хорошая идея, чтобы вернуться к оригинальным исходным файлам и посмотреть, что предлагается. Например, есть шаблон RSS, на который мы можем ссылаться и который генерирует канал из всего содержимого. Это выглядит так:

Мы добавим этот «feed.atom» в нашу папку шаблонов. Затем нам также понадобится несколько партиалов, которые вы найдете в исходном коде, поэтому добавьте всю эту папку «feed» в директорию partials:


Вы можете редактировать эти атомные файлы в любом текстовом редакторе или в редакторе кода, поэтому не стесняйтесь изменять способ создания вашего фида. Например, в «feed-entry.atom» вы можете изменить заголовок страницы:

Это при условии, что вы изменили переменную в начале урока. Теперь нам нужно дать ссылку на канал, чтобы люди могли его получить. Нам нужен файл .yml в папке «content», тогда мы можем указать на это. Создайте файл content/feed/feed.yml и поместите его в него:

и теперь нам нужно обновить ссылку в нашем partials/footer.html:

Готово! Опять же, вы можете изменить способ отображения ленты Atom, так что не стесняйтесь играть с переменными в этих файлах.

Примечание: Возможно, вы также захотите проверить канал json и файл sitemap.xml, которые работают примерно одинаково.


Шаг 18: Дополнительные носители

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


Они принадлежат шаблонам/частям/активам. Каждый из них обрабатывает разные типы файлов (вы можете точно изменить порядок разметки), так как же на самом деле их использует Стейси? Стейси снова просматривает содержимое почтовых папок, добавляя любые дополнительные файлы, которые она находит, в свой банк информации о страницах.

Например, давайте разместим несколько изображений в нашей папке постов content/3.articles/1.leather.


После этого Стейси найдет дополнительные активы и проиндексирует их. Включите частичку media.html в шаблон post.html, и все готово!


Что вы делаете с изображениями теперь зависит от вас; Вы можете легко включить сценарий слайд-шоу js (в общедоступной папке) и повернуть эти изображения. Или отображать их по-другому с помощью CSS. Вам решать.

А как насчет других типов медиа? Мы можем вставлять видео, но как насчет YouTube? Это было бы сделано с дополнительным фрагментом HTML. Возьмите код для вставки:

Вставьте его в новый html-файл в той папке, где вы хотите, а затем позвольте Стейси проанализировать содержимое и сгенерировать страницу!

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

мы получаем (почти) взрывобезопасную fluidity.



Кофе?

Что ж, мы вместе завершили прекрасный вечер, и я надеюсь, по крайней мере, открыть вам глаза на мир альтернатив CMS. С помощью такой системы вы можете достичь гораздо большего - мне любопытно посмотреть, что вы придумали.

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


Дополнительный материал

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.