Создание простого блога на Node.js
Nuances of programmingПеревод Tony Spiro статьи: «How to Build a Simple Blog Using Node.js»
![](/file/e2358d87d19deb947b590.png)
В этой статье мы покажем вам, как создать простой блог с помощью 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('==> 🌎 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.