Начало работы с Wintersmith: генератор статических сайтов на основе Node.js

Включает

Мы хотим разделить шаблоны, чтобы сделать их более удобными для обслуживания и повторного использования. Мы можем сделать это, используя включает . Этот код из npm installtemplates/index.jadetemplates/partials/header.jade

 include ./partials/header

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

Conditionals

В некоторых случаях вам может потребоваться отобразить различные аспекты шаблона в зависимости от определенных условий. Это можно сделать с помощью условных выражений в Jade . Jade поддерживает ifelse ifelseunlessif

В этом примере из templates/partials/header.jadeindex.html

 if !page
    section(id="banner")
        header
            h2 Explore the Land of Ooo...
            p ...and its many kingdoms!

Это условие также может быть записано как unless page

Jade также поддерживает блоки операторов case Если вы хотите узнать больше, пожалуйста, обратитесь к официальной документации .

перекручивание

Зацикливание — это то, что мы часто используем в наших шаблонах, независимо от того, переходим ли мы к постам или данным. Для таких нужд Jade поддерживает циклы eachwhile .

Следующий пример из templates/partials/homepagemiddle.jadeeach В середине домашней страницы мы показываем каждого персонажа с его изображением, именем и описанием. eachcharacter

 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

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

 - var i=0
 - var articles = env.helpers.getArticles(contents);
 each article in articles
     - i++
     if i<3
         div(class="6u")
             section(class="box")
                 a(href= article.url, class="image featured")
                     img(src= article.metadata.banner)
                 header
                     h3= article.title
                     p= "Posted " + moment.utc(article.date).format('MMM DD, YYYY')
                 | !{ typogr(article.intro).typogrify() }
                 footer
                     ul(class="actions")
                         li
                             a(href= article.url, class="button icon fa-file-text") Continue Reading

Вы заметите, что мы используем env.helpers.getArticles(contents); чтобы получить массив статей в папке содержимого / статей. Это не очень хорошо документировано из того, что я мог бы сказать, но этот метод происходит из плагина paginator , который можно настроить в config.json

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

 - 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

Вывод

В этой статье я познакомил вас с Wintersmith, который является хорошим вариантом, если вы ищете генератор статического сайта на основе Node.js. Я рассказал о том, как установить Wintersmith и начать работу с ним, а также обсудил некоторые функции Jade, системы шаблонов по умолчанию. Во второй части я научу вас, как создавать посты в формате Markdown, как настраивать метаданные, а также как создавать и развертывать статический веб-сайт.

Как вы видели, одним из интересных аспектов Wintersmith является его способность использовать модули npm. Это дает разработчикам возможность выбора при настройке своего сайта или добавления дополнительных функций, которые могут им понадобиться.