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

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

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

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

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

В этом файле объявлены зависимости, которые необходимо установить для разработки и запуска блога:

Модуль Cosmic JS Node, чтобы получать данные с Cosmic JS Bucket.
Веб-фреймворк Express.
ПакетHogan для обработки шаблонов.
Модуль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'));
})

Поясним, что происходит здесь:

Производится импорт модулей Express, Cosmic JS и т.д.
Присоединяются верхний и нижний колонтитулы.
При запросе («/») происходит вызов Cosmic JS Bucket для вывода постов и возвращается шаблон index.html.
Добавляются данные на страницу в виде глобального хранилища данных — 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.

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

28К открытий28К показов

Также рекомендуем

Почему Node.js такой популярный

Node.js занял 50,4% рынка, поэтому мы попросили мидл и сеньор-программистов рассказать, в чём причина популярности Node.js и какие у него перспективы. Вот, что они ответили.

Как читать перфокарты в 2023 году: собираем DIY-привод

Рассказали, что такое перфокарты и как читать их в XXI веке при помощи самодельного привода на фототранзисторах и светодиодах.

Три библиотеки для React по цене одной — конкурс пет-проектов

Написал три библиотеки для React, используя JavaScript: функции вместо JSX, управление приложением с использованием хуков и CSS в React.

Фронтенд-разработчик: что это за профессия и где ей обучиться

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