Создаём простой блог на Node.js

Сложно ли создать простейший блог, используя Node.js и Cosmic JS? На самом деле, нет. Что же, давайте попробуем!

Подготовка

Для начала нужно убедиться, что платформа для разработки Node.js у вас установлена. Если это не так, следует перейти на официальный сайт Node.js, где можно скачать последнюю версию.

Следующий шаг — установка пакетного менеджера Yarn — он нужен для установки зависимостей нашего будущего блога:

npm install yarn –g

Далее давайте создадим папку для блога. Для этого нужно выполнить в терминале парочку команд:

mkdir simple-blog
cd simple-blog

Следующий этап — создание файла package.json — он нужен для импорта зависимости для блога. В файл нужно добавить следующие строки:

{
  "dependencies": {
    "cosmicjs": "^2.39.0",
    "express": "^4.15.2",
    "hogan-express": "^0.5.2",
    "nodemon": "^1.11.0"
  },
  "scripts": {
    "start": "node app.js",
    "development": "nodemon app.js"
  }
}

Мы объявили в файле зависимости, необходимые для разработки и запуска нашего блога, а именно: 1. Модуль Cosmic JS Node для получения данных с Cosmic JS Bucket. 2. Веб-фреймворк Express. 3. Пакет Hogan (нужен для обработки шаблонов). 4. Модуль Nodemon, обеспечивающий удобств разработки — автоматически перезагружает приложение, если в нём произошли изменения.

Чтобы установить зависимости, выполняем:

Yarn

Разработка

Теперь сформируем главную страницу блога. Для этого создадим app.js и добавим в него:

const express = require('express')
const app = express()
const hogan = require('hogan-express')
const http_module = require('http')
const http = http_module.Server(app)
app.engine('html', hogan)
app.set('port', (process.env.PORT || 3000))
app.use('/', express.static(__dirname + '/public/'))
const Cosmic = require('cosmicjs')
const helpers = require('./helpers')
const bucket_slug = process.env.COSMIC_BUCKET || 'simple-blog-website'
const read_key = process.env.COSMIC_READ_KEY
const partials = {
  header: 'partials/header',
  footer: 'partials/footer'
}
app.use('/', (req, res, next) => {
  res.locals.year = new Date().getFullYear()
  next()
})
// Home
app.get('/', (req, res) => {
  Cosmic.getObjects({ bucket: { slug: bucket_slug, read_key: read_key } }, (err, response) => {
    const cosmic = response
    if (cosmic.objects.type.posts) {
      cosmic.objects.type.posts.forEach(post => {
        const friendly_date = helpers.friendlyDate(new Date(post.created_at))
        post.friendly_date = friendly_date.month + ' ' + friendly_date.date
      })
    } else {
      cosmic.no_posts = true
    }
    res.locals.cosmic = cosmic
    res.render('index.html', { partials })
  })
})
http.listen(app.get('port'), () => {
  console.info('==> <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2.3/svg/1f30e.svg">  Go to http://localhost:%s', app.get('port'));
})

Что тут происходит: 1. Выполняется импорт модулей Express, Cosmic JS и прочих. 2. Присоединяются нижний и верхний колонтитулы. 3. При запросе («/») осуществляется вызов Cosmic JS Bucket для вывода постов, плюс возвращается шаблон index.html. 4. Происходит добавление данных на страницу в виде глобального хранилища — cosmic. Такая структура делает реализацию шаблона интуитивной.

Добавляем переменные шаблона домашней страницы

Следующая часть нашего процесса разработки блога является самой интересной, ведь именно здесь мы видим всю мощь Cosmic JS, которая очень эффектно сочетается с системой шаблонов Mustache.

Итак, создаём папку views:

mkdir views
cd views

Теперь в данной папке создадим файл index.html и добавим в файл следующее:

{{> header }}
  <main class="container">
    {{# cosmic.objects.type.posts }}
      <div class="card" data-href="/{{ slug }}">
        {{# metadata.hero.imgix_url }}
          <div class="blog-post-hero blog-post-hero--short" style="background-image: url({{ metadata.hero.imgix_url }})"></div>
        {{/ metadata.hero.imgix_url }}
        <div class="card-padding">
          <h2 class="blog__title blog__title--small">
            <a href="/{{ slug }}">{{ title }}</a>
          </h2>
          <div class="blog__author">
            <div class="blog__author-image" style="background-image: url({{ metadata.author.metadata.image.imgix_url }}?w=100)"></div>
            <div class="blog__author-title">by <a href="/author/{{ metadata.author.slug }}">{{ metadata.author.title }}</a> on {{ friendly_date }}</div>
            <div class="clearfix"></div>
          </div>
          <div class="blog__teaser droid">{{{ metadata.teaser }}}</div>
          <div class="blog__read-more">
            <a href="/{{ slug }}">Read more...</a>
          </div>
        </div>
      </div>  
    {{/ cosmic.objects.type.posts }}
  </main>
{{> footer }}

В результате у нас: 1. Формируется header (заголовок) с переменными Mustache. 2. Происходит извлечение данных Cosmic посредством переменной Mustache {{cosmic}}, имеющей всё нужное для компоновки динамических данных страницы. 3. Осуществляется проход по {{}}cosmic.objects.type.posts и вывод постов в нашем блоге.

Что хорошо в таком подходе? Хотя бы то, что у нас логика шаблона отделена от остального кода, кроме некоторых циклов и запросов. Таким образом, код шаблона изолируется от кода основного приложения.

Послесловие

Всё вышеперечисленное — сокращённая версия блога, которая доступна для загрузки здесь. Что касается полной версии блога, то она включает в себя и страницу со всеми постами, и страницу с постами каждого из авторов. Впрочем, вам никто не мешает изучить полную версию кода на GitHub, а потом развернуть блог путём нескольких кликов на панели Cosmic JS и установить блог в Cosmic JS Bucket.

Источник — «How to Build a Simple Blog Using Node.js».