Как создать статический блог, используя Assemble

Сегодня мы собираемся взглянуть на собиратьплагин Grunt, который позволяет нам с легкостью создавать и управлять статическими сайтами. Сборка может быть немного похожа на Jekyll, но она приносит больше гибкости и возможностей для стола, что делает его более мощным.

Постоянная ссылка, Bootstrap Boilerplates и LESS компилятор — это функции, которые делают Assemble сравнимым инструментом с полноценным CMS-приложением. Здесь мы покажем вам, как использовать Assemble для создания статического блога.

Шаг 1. Установка зависимости проекта
Для сборки требуется Grunt для работы (см. Наши предыдущие посты на Node.js и Grunt, если вам нужна дополнительная помощь). Затем, как только Node и Grunt настроены, создайте файл package.json в папке проекта, чтобы указать пакеты Node, которые мы будем использовать для создания нашего блога.

Добавьте следующий код в package.json:

{
«devDependencies»: {
«собрать»: «~ 0.4.40»,
«хрюканье»: «~ 0.4.5»,
«grunt-contrib-connect»: «~ 0.8.0»,
«grunt-contrib-watch»: «^ 0.6.1»
}
}

Эти строки кода в package.json говорят Node, что наш проект будет зависеть от хрюкать, Grunt Connect, Grunt Watch и собрать. Теперь мы установим эти пакеты, выполнив эту команду через Терминал.
установка npm
Шаг 2. Загрузите и зарегистрируйте задачи Grunt
После загрузки всех зависимостей создайте grunfile.js и вставьте следующие строки:

module.exports = function (grunt) {
grunt.initConfig ({
pkg: grunt.file.readJSON (‘package.json’)
});

grunt.loadNpmTasks ( 'сборки');

grunt.loadNpmTasks ( ‘хрюкать-вно-Коннект’);
grunt.loadNpmTasks ( ‘хрюкать-вно-часы’);

grunt.registerTask ( ‘по умолчанию’, [‘connect:livereload’,’assemble’,’watch’]);
};

Строки, которые мы поместили в gruntfile.js выше, просто загружают и регистрируют зависимости, которые мы только что загрузили с помощью команды npm install. Мы заставим эти задачи «работать» позже на следующих шагах.
Шаг 3. Структура папок и файлов
Теперь мы организуем структуру папок и файлов нашего блога следующим образом:

Мой блог/
package.json
gruntfile.js
приложение/
макет /
default.hbs
/ содержание
страница /
index.hbs
блог /
первоклассников posting.hbs
обертоны /

Assemble позволяет нам настраивать организацию файлов и каталогов через gruntfile.js. Но пока давайте не отставать от конфигурации по умолчанию, как показано выше.
Шаг 4. Макет блога
В Assemble Layouts устанавливают основу страницы. На шаге 3 мы создали файл макета с именем default.hbs в папке MyBlog / app / layout /. Расширение .hbs используется, потому что Assemble использует Рули язык шаблонов.

Файл default.hbs будет использоваться всеми страницами блога, которые ссылаются на этот файл. Здесь мы будем использовать начальная загрузка через BootstrapCDN установить основу для нашего блога. Затем мы добавляем следующие коды indefault.hbs:




Мой блог

МОЙ БЛОГ

        {{> 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: ‘‘
},
файлы: [
‘./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 поставить свой сайт в Интернете.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *