Разработка простого блога на Node.js и Cosmic JS

Создадим несложный блог с использованием платформ Node.js и Cosmic JS в сочетании с открытой системой шаблонов Mustache.

28057

В этой статье мы разберём создание простого блога с помощью Node.js и Cosmic JS.

  1. Начало
  2. Разработка блога
  3. Добавление переменных шаблона домашней страницы
  4. Заключение

Также вы можете посмотреть наш материал по созданию мессенджера с использованием Node.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 и вывод постов в блоге.

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

Заключение

Эта сокращенная версия блога доступна для загрузки на странице Cosmic JS Apps. Полная версия блога включает в себя страницу со всеми постами, а также страницу с постами каждого автора. Просмотрите полную версию кода на GitHub и разверните блог с помощью нескольких кликов на панели инструментов Cosmic JS, установив блог в Cosmic JS Bucket.

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

28057