Вы когда-нибудь чувствовали, что вам не нужны все существующие на данный момент фреймворки, чтобы создать что-то простое, но в котором есть все необходимые функции? Объявление о мероприятии? Статический блог? В этой статье мы будем создавать статический блог с помощью MetalSmith. Для этого урока требуется знание HTML, CSS и JavaScript. Знание нефрита также приносит дополнительную пользу, но не обязательно.

Что такое MetalSmith?

Metalsmith - это чрезвычайно легкий и легко подключаемый генератор статических сайтов. Что такое статический сайт? Это сайт, доставленный пользователю в том виде, в котором он был сохранен. Работа с Metalsmith полностью основана на ванильном JavaScript - никаких фреймворков. Когда мы говорим, что MetalSmith чрезвычайно расширяемый, это просто означает, что его различные разнообразные функции могут быть реализованы с помощью плагинов. Благодаря активному сообществу MetalSmith существует множество плагинов с различными удивительными функциями, и вы можете найти их здесь.

При создании статического сайта с помощью MetalSmith контент создается в исходной папке, и metalmith управляет этим контентом, используя указанные плагины. Управляемое содержимое содержится в папке вывода или сборки. Эта папка обслуживается в браузере.

Установка

Во-первых, у вас должен быть установлен node, а также соответствующий менеджер пакетов npm. Создайте папку проекта с:

mkdir metalsmith-blog && cd metalsmith-blog

Теперь мы устанавливаем metalsmith через диспетчер пакетов узлов (npm) с помощью:

npm init
npm install metalsmith

Запуск npm init инициализирует новый проект и создает package.json файл.

Установить плагины

Для этого простого блога мы будем использовать несколько важных плагинов:

  • Metalsmith-markdown: преобразует файлы уценки в нашем исходном коде в HTML.
  • Metalmith-templates: Мы будем использовать Jade - шаблонизатор. Это будет использоваться для записи наших исходных файлов HTML.
  • Metalsmith-assets: этот плагин помогает нам использовать статические ресурсы, такие как файлы JavaScript на стороне клиента, а также файлы CSS.
  • Металлы-коллекции: это помогает нам создавать сгруппированные списки контента, такие как списки статей, на нашей странице.
  • metalmith-permalinks: настраивает постоянные ссылки файлов.

Эти плагины устанавливаются через npm с помощью:

npm install --save metalsmith-collections metalsmith-assets metalsmith-templates metalsmith-markdown metalsmith-permalinks

Флаг - save гарантирует, что эти плагины созданы как зависимости в нашем файле package.json.

Наконец, нам нужно будет установить Jade. Jade - это серверный шаблонизатор Node.js. Jade также устанавливается через npm с помощью:

npm install --save jade

Вуаля, теперь мы установили все требования. Файл package.json должен выглядеть так:

Примечание. Свойство "scripts``" включено, чтобы мы могли настраивать серверные команды для нашего сайта. Когда мы запускаем команду build, файлы сборки создаются на сервере. Выполнение команды serve обслуживает локальную версию нашего веб-сайта. build.js файл еще не создан.

Кроме того, чтобы использовать serve, он должен быть установлен на вашем компьютере. Если нет, установите его глобально с помощью:

npm install serve -g

Создание файлов сборки

В нашем корневом каталоге созданы три папки с именами build, src и templates. В папке build хранятся файлы, обработанные мастером по металлу для обслуживания. Папка src содержит исходные файлы, включая HTML, CSS и JavaScript. Папка шаблонов содержит все используемые jade шаблоны.

Build.js

Здесь собран и настроен двигатель metalsmith. В корневом каталоге проекта создается файл build.js, затем он настраивается следующим образом. Сначала все плагины загружаются с:

Затем эти загруженные плагины привязываются к функции мастера по металлу с помощью метода use(). Обязательные параметры также передаются в методах.

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

Файл build.js редактируется:

Обратите внимание на указанный источник, шаблон, ресурсы и целевой каталог. После того, как плагины связаны, функция ошибки также объявляется в случае ошибки. Он расположен в нижней части скрипта, как показано выше. Теперь у нас есть metalsmith движок. Теперь приступим к созданию шаблонов для домашней страницы и страницы статей.

HTML шаблоны

Папка templates в корневом каталоге предназначена для хранения всех макетов статей, которые будут преобразованы в HTML во время сборки. В папке templates были созданы два шаблона Jade: index.jade и article.jade. index.jade - это шаблон для главного экрана в блоге, редактируемый следующим образом:

Примечание. Bootstrap используется для стилизации и импортируется из CDN в тег заголовка файла, как показано выше.

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

Классы Bootstrap также использовались для стилизации в этом шаблоне. Обратите внимание, как мы импортировали Vue из CDN в нижней части скрипта? Функция привязки данных Vue будет использоваться на стороне клиента для обработки комментариев. Также библиотека JavaScript moment.js будет использоваться для форматирования даты и времени в статьях. Мы также импортировали файл JavaScript и файл CSS. Они еще не созданы, и мы перейдем к этому позже.

Создание активов

Ресурсы, необходимые в этом блоге, - это файл CSS для обработки стилей и файл JavaScript для обработки комментариев. Vue был выбран для написания раздела комментариев, поскольку это проще, чем использовать базовый ванильный JavaScript. В папке src создаются две папки: папка Статьи и папка Активы. В папке ресурсов создаются две папки: CSS и JS. Эти папки содержат файлы CSS и JavaScript, импортированные в наши шаблоны Jade. Создается файл CSS с именем style.css и редактируется следующим образом:

Не стесняйтесь стилизовать его так, как вам нравится.

В папке JS создается файл JavaScript app.js, который настраивается следующим образом:

В основном это экземпляр Vue, включая его компонент и связанные методы. В приведенном выше скрипте экземпляр Vue создается и монтируется на элементе DOM с идентификатором app (так же, как div с классом container-fluid). Создается компонент comment, которому передается шаблон формы. Ввод формы отображается на экране при нажатии кнопки отправки, после чего поля формы очищаются для следующего ввода. Эти созданные ресурсы экспортируются в папку сборки, когда мы запускаем build

Index.html

В исходной папке src создается исходный index.html файл, который редактируется следующим образом:

В файле index.html нет HTML-содержимого; скорее, у нас есть передний план - он просто отображает информацию, которую можно использовать со страницы. В этом случае во вступительной части говорится, что мы используем шаблон index.jade для рендеринга HTML-файла. Мы все настроены на наш блог. Теперь перейдем к самому лучшему - созданию контента для блога.

Создание контента

Контент создается в виде файлов уценки, которые будут переведены в файлы HTML (вспомните плагин metalmith-markdown). В /src/articles создаются два файла уценки, которые будут нашими примерами статей.

Article01.md

Article02.md

Заголовок в файлах уценки будет использоваться для заполнения динамического содержимого в файлах HTML. Взгляните на файл article.jade, чтобы увидеть значения переданных title, author и date.

Мы полностью создали наш блог! Запустить:

npm run build

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

npm serve

Заключение

В этой статье мы создали статический блог с помощью MetalSmith. Используя только базовые плагины, мы реализовали функции, необходимые для статического блога, который включает список статей. Также Vue.js использовался для создания системы комментирования в блоге. Не стесняйтесь пробовать другие движки шаблонов вместо Jade, а также изменять стили в блоге.

О манифольде

Manifold - это первая независимая торговая площадка для услуг для разработчиков и самый простой способ управления и совместного использования всего, от JawsDB, простой базы данных postgres, до Mailgun, API, который упрощает отправку и получение электронной почты.

Для получения дополнительной информации посетите Manifold.co или подпишитесь на нас в twitter. Этот пост является частью программы Manifold Content. Хотите написать нам?