В первой части этого мини-сериала я познакомил вас с Wintersmith, одним из лучших, на мой взгляд, генераторов статических сайтов на основе Node.js. Я рассказал о том, как установить Wintersmith и начать работу с ним, а также обсудил некоторые функции Jade, системы шаблонов по умолчанию.
Во второй части я расскажу вам, как создавать сообщения в формате Markdown, как настраивать метаданные, а также как создавать и развертывать статический веб-сайт.
Создание сообщений
В первой части этой серии мы создали шаблоны с помощью Jade. Теперь пришло время создать контент для сайта. По умолчанию сообщения пишутся в Markdown, предоставленном Marked , хотя другие публикации доступны в виде плагинов .
Большинство разработчиков, похоже, знакомы с Markdown, но если нет, то это очень легко освоить. Многие редакторы кода поддерживают его по умолчанию или с помощью бесплатных расширений. Существует множество автономных редакторов Markdown, например, я использую Mou на OSX, а MarkdownPad на Windows. Этот пост не будет вдаваться в детали специфики Markdown, но если вам нужно место для начала, я предлагаю вам взглянуть на эту страницу .
Сообщения размещаются в папке contents/articles Каждому сообщению присваивается собственный каталог, который будет оптимизирован для SEO. Например, наш пост к 6 сезону эпизода «Время приключений»! с именем «Breezy» был помещен в каталог с именем articles/season-6-breezy Внутри этого каталога находится наш файл Markdown для поста с именем index.md
Опубликовать метаданные
Каждый пост Markdown может иметь метаданные сверху, используя формат YAML , аналогично Front Matter в Jekyll. Не требуется никаких метаданных, кроме templatetitledate templatetitledate Если template Если titledate
Мы можем добавлять любые другие метаданные, которые мы хотим. Мы обсудим это далее в разделе пользовательских метаданных ниже.
Wintersmith также позволяет нам указывать метаданные для сообщений в формате JSON через файл JSON в каталоге содержимого. Для получения более подробной информации об этом, проверьте документацию .
Настройка выдержки
Wintersmith позволяет нам указать, где он заканчивает выдержку из поста. Это гарантирует, что выдержка не превышает определенной длины или заканчивается в логическом месте. Чтобы указать конец выдержки, мы должны разместить следующий код в нашем посте Markdown:
<span class="more"></span>
Если мы не укажем этот span<h2><hr> Если ни один из них не присутствует, выдержка будет содержать полный HTML-код поста, который не соответствует вашему желанию. Выдержка доступна через свойство introtemplates/partials/homepagemiddle.jade
| !{ typogr(article.intro).typogrify() }
Если мы хотим проверить, указан ли отрывок, мы можем использовать свойство hasMore Вы можете узнать больше о том, как это работает, изучив код плагина страницы .
Пользовательские метаданные
Часто вам необходимо установить собственные метаданные, глобальные для сайта или локальные для поста / страницы. Давайте посмотрим, как это делается в Wintersmith.
Глобальные метаданные
Мы можем установить любые произвольные метаданные в файле config.jsonlocals Например, мы можем установить название сайта, описание и изображение баннера на нашем примере сайта.
Эти значения доступны в любом месте в шаблонах нашего сайта под объектом { Например, мы используем значения выше в
"locals": {
"url": "http://localhost:8080",
"name": "Adventure Time!",
"owner": "Brian Rinaldi",
"description": "Adventure Time is an American animated television series created by Pendleton Ward for Cartoon Network. The series follows the adventures of Finn, a human boy, and his best friend and adoptive brother Jake, a dog with magical powers to change shape and grow and shrink at will. Finn and Jake live in the post-apocalyptic Land of Ooo. Along the way, they interact with the other main characters of the show: Princess Bubblegum, The Ice King, and Marceline the Vampire Queen.",
"banner": "/assets/images/about.jpg"
},
...locals
templates/partials/footer.jade
Следует отметить, что на них также можно ссылаться как на div(class="4u")
section
header
h2 What's this all about?
a(href="#",class="image featured")
img(src= locals.banner)
p= locals.descriptionbannerdescription
Per Post Метаданные
Как мы обсуждали ранее, каждый пост должен иметь набор метаданных. Эти метаданные могут содержать любые произвольные значения, которые мы выбираем. Например, вот метаданные для одной из наших статей ( localscontents/articles/season-6-breezy/index.mdshortdesc
banner
Мы можем получить доступ к значению ---
title: "Breezy (Season 6)"
date: 2014-06-05 10:33:56
template: article.jade
shortdesc: Finn decides to get back into the dating game to help his wilting arm flower.
banner: /assets/images/breezy.jpg
---shortdesc Здесь мы используем его в цикле metadata
templates/partials/footer.jade
Конечно, мы также можем получить доступ к ним в нашей странице вывода, как мы делаем в - var i=0
- var articles = env.helpers.getArticles(contents);
each article in articles
-i++
if (i>2) && (i<8)
li
span(class="date")
!=moment.utc(article.date).format('MMM')
strong= moment.utc(article.date).format('DD')
h3
a(href=article.url)= article.title
p= article.metadata.shortdesc
contents/templates/article.jade
Пользовательские данные
Не все на нашем сайте будет постом или метаданными. Часто у нас будут другие типы сборов данных. Например, на нашем примере сайта у нас есть коллекция Adventure Time! персонажи с именами, описаниями и изображениями. Вместо того, чтобы жестко кодировать эти значения на странице, их создание в виде данных позволяет нам повторно использовать их по всему сайту и делать их отображение гибким. Посмотрим, как это работает.
Данные в Wintersmith работают аналогично коллекциям Jekyll в том смысле, что они основаны на файлах. Вместо того, чтобы помещать один файл JSON в заранее определенную папку, каждый объект имеет свой собственный файл в любой папке, выбранной вами в папке header
h2= page.title
p= page.metadata.shortdesc
Например, на нашем примере сайта contents Ниже приведено содержимое contents/characters
contents/characters/lsp.json
Эти данные автоматически считываются через объект { Каждое свойство в файле доступно под объектом
"description": "Lumpy Space Princess (LSP) acts like a bratty, apathetic, sassy, attention-seeking and willfully ignorant teenager, often texting on her phone.",
"image": "/assets/images/lsp.jpg",
"name": "Lumpy Space Princess"
}contents В нашем примере мы используем это для вывода списка символов на домашней странице:
metadata
Генерация и развертывание
Теперь, когда мы завершили наш проект, пришло время развернуть его. Но сначала нам нужно сгенерировать статические файлы, которые мы должны загрузить на наш сервер. Чтобы создать наш сайт, выполните следующую команду:
each character in contents.characters
div(class="4u")
section(class="box")
span(class="image featured")
img(src= character.metadata.image)
header
h3= character.metadata.name
p= character.metadata.description
По умолчанию эта команда генерирует файлы в каталог $ wintersmith build Однако мы можем указать другой путь, используя опцию build Мы также можем принудительно очистить каталог -obuild-X Для получения полного списка параметров сборки вы можете использовать команду wintersmith build --help
Вывод
Я думаю, совершенно очевидно, что Wintersmith предлагает полный набор функций для генератора статических сайтов, что позволяет нам создавать сложные статические сайты в экосистеме Node.js / npm. К сожалению, многие из обсуждаемых здесь тем не очень хорошо освещены в ограниченной проектной документации.
Хорошая новость заключается в том, что источником является все CoffeeScript, что довольно легко понять, если вы являетесь разработчиком JavaScript. Итак, многие детали того, как работает проект, можно узнать, посмотрев на исходный код. Кроме того, есть демонстрация сайтов, созданных с помощью Wintersmith, многие из которых включают исходный код, который может помочь вам увидеть, как другие решали общие задачи с помощью инструмента. Хотя они не заменят надежную документацию, она должна помочь вам добраться туда, куда вам нужно.
Дополнительные примеры популярных движков статических сайтов можно найти в моем проекте на GitHub, который включает в себя не только этот пример Wintersmith, но и тот же пример сайта, созданный с помощью Jekyll, Harp и Middleman.