Вы когда-нибудь чувствовали, что вам не нужны все существующие на данный момент фреймворки, чтобы создать что-то простое, но в котором есть все необходимые функции? Объявление о мероприятии? Статический блог? В этой статье мы будем создавать статический блог с помощью 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. Хотите написать нам?