{{> 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 / и выложите содержимое следующим образом.

Первый пост

Еще раз запустите команду 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}}

{{/}} Каждая

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

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

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

title: Post One

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

Тег {{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 поставить свой сайт в Интернете.