{{> body}}
        </div>
    </div>
</div>

Шаг 5. Настройка задач Grunt
В качестве следующего шага создайте Gruntfile.js, чтобы настроить каталоги и файлы для компиляции Assemble. Откройте Gruntfile.js и добавьте следующие коды в раздел Grunt.initConfig:

grunt.initConfig ({
pkg: grunt.file.readJSON (‘package.json’),
смотреть: {
собрать: {
файлы: [
‘app/content/blog/.hbs’,
‘app/content/pages/.hbs’,
‘app/layouts/.hbs’,
‘app/partials/.hbs’
],
задания: [‘assemble’]
},
livereload: {
опции: {
livereload: ‘<%= connect.options.livereload %>‘
},
файлы: [
‘./dist/.html’
]
},
},
собрать: {
опции:{
layoutdir: ‘app / layouts’,
сгладить: правда,
макет: default.hbs,
partials: ‘app / partials / *. hbs’
},
страница: {
файлы: {
‘Расстояние /’: [‘app/content/page/.hbs’]
}
},
блог: {
файлы: {
‘Расстояние /’: [‘app/content/blog/*.hbs’]
}
}
},
подключиться: {
опции: {
порт: 8800,
// изменим значение на 0.0.0.0 для доступа к серверу извне
имя хоста: ‘localhost’,
livereload: 35728
},
livereload: {
опции: {
открыть: правда,
база: “./dist”
}
}
}
});

Шаг 6. Создание страницы и первого сообщения
Теперь мы можем построить страницу. Давайте откроем файл index.hbs в папке MyBlog / app / content / page / и добавим содержимое.

Домашняя страница

Это наша домашняя страница.

Через командную строку или терминал запустите команду grunt. Эта команда сгенерирует файл index.hbs в html-файл и сразу же запустит его в браузере. Давайте посмотрим на результат в браузере.

Мы также создадим первый пост нашего блога. Откройте файл first-post.hbs в папке MyBlog / app / content / blog / и выложите содержимое следующим образом.

Первый пост

Я первый пост. Lorem Ipsum Dolor Sit Amet, Заклинатель, жировой элит. Odio, esse, perferendis, earum in sunt vulptate officiis vulptates quam pariatur veritatis quis deleniti fugit expedita aliquam est repllendus autem dolor non?

Еще раз запустите команду thegrunt, и вы увидите файл first-post.html, созданный во вновь созданной папке с именем dist. Перейдите на localhost: 8800 / first-post.html в браузере, вы должны найти первый пост, который будет таким же, как на картинке ниже.

Вы можете создавать больше постов, создавая файлы more.hbs и размещая их внутри в папке MyBlog / app / content / blog /.
Шаг 7. Создайте список сообщений блога
Теперь мы создадим список постов и поместим его в боковую панель блога. Для этого мы будем использовать функцию Partial в Assemble. «Частичное» – это повторно используемый фрагмент кодов, который может быть включен на другие страницы.

Предполагается, что боковая панель содержит список наших сообщений в блоге, а также ссылку на соответствующее сообщение. Давайте создадим новый файл с именем sidebar.hbs. Добавьте следующий код и сохраните его в папке MyBlog / app / partials /.

Боковая панель

{{#each pages}}

{{data.title}}

{{/}} Каждая

Затем вызовите частичную боковую панель в default.hbs следующим образом:

#Each – это цикл, который будет перечислять все наши сообщения в блоге в папке MyBlog / app / content / blog /. Результат показан ниже:

Шаг 8. Использование переменных
С Assemble мы можем использовать переменную с использованием YAML. YFM (основной материал YAML) – это необязательный раздел, который размещается в верхней части страницы и используется для поддержки метаданных для страницы и ее содержимого. Мы будем использовать его для указания заголовка поста; откройте first-post.hbs и измените код следующим образом:

---

title: Post One

{{ заглавие }}

blahblah …

Тег {{title}} будет заполнен «Post One», который мы определили сверху.
Шаг 9. Заказ списка постов
Assemble позволяет нам упорядочивать и сортировать список сообщений на основе указанного «термина». Например, здесь мы будем размещать наши посты в блоге на боковой панели по дате. Давайте изменим наш пост, добавив дату в YML, как показано ниже:

---

title: Post One

дата: 2014-07-10

Также измените другие файлы сообщений в MyBlog / app / content / blog /. Затем на sidebar.hbs мы будем отображать дату под заголовком сообщения. Измените код следующим образом:

{{#withSort pages “data.title”}}

• {{data.title}}

  Опубликовано: {{formatDate data.date “% B% d,% Y”}}

{{/ WithSort}}

Результатом является список сообщений на боковой панели, упорядоченный по дате.

Вывод

Теперь у нас есть простой блог, созданный с помощью Assemble. Assemble может использоваться в качестве альтернативного инструмента для создания веб-сайтов, как мы уже показали вам. И если вы хотите, вы можете использовать бесплатный веб-хостинг, такой как Github Pages или серверы, которые поддерживают Node.js, такие как Heroku поставить свой сайт в Интернете.