С головой! Создавайте лучшие веб-приложения с помощью Headless CMS

 node server

Теперь из окна терминала вы можете набрать localhost:3000

Вуаля! У нас есть супер базовый узел сайта. В вашем веб-браузере перейдите на server.js

Включая контент

Теперь давайте добавим контент от Elemeno на наш сайт. Мы начнем с создания ключа API, который позволит нам получить доступ к содержимому нашего веб-сайта портфолио. Перейдите на экран «Настройки» в Elemeno, найдите раздел «Ключи API» и нажмите кнопку «Создать ключ API». Мы дадим нашему ключу имя «Веб-сайт» и оставим другие настройки по умолчанию. Мы увидим наш новый ключ API в списке, щелкните по нему, чтобы просмотреть подробную информацию, и скопируйте значение «Токен доступа».

Вернувшись в наш файл var Elemeno = require('elemeno'),
express = require('express'),
pug = require('pug');

var app = express();
var elemeno = new Elemeno(‘PASTE-ACCESS-TOKEN-HERE’);

 app.get('/', function(req, res) {
    elemeno.getCollectionItems('portfolio', function(err, response) {
        res.render('index.pug', {projects: response.data});
    });
});

Вставьте токен доступа, который мы скопировали из Elemeno. Теперь внутри нашего индексного маршрута мы получим список проектов из нашей коллекции портфолио.

 portfolio

Мы передаем слаг для нашей коллекции getCollectionItemsindex.pugfor in Эта функция будет возвращать массив объектов, представляющих элементы в нашей коллекции. Затем мы визуализируем наш шаблон Pug и передаем данные, которые были возвращены.

Реализация данных в шаблоне

Наш следующий шаг — внедрить эти данные в наш шаблон Pug. Откройте шаблон for project in projects
h1= project.title
div!= project.content.description.html
img(src= project.content.screenshot.imageUrl)
p: a(href= project.content.link) Visit Site


 {
  "id": "123e4567-e89b-12d3-a456-426655440000",
  "slug": "google",
  "title": "Google",
  "dateCreated": "2017-07-11T14:28:49.772Z",
  "dateUpdated": "2017-07-11T14:28:49.772Z",
  "datePublished": "2017-07-11T14:28:49.772Z",
  "published": true,
  "content": {
    "description": {
      "markdown": "The best little search engine that ever existed",
      "html": "<p>The best little search engine that ever existed</p>"
    },
    "date": "2005-07-11T04:00:00+00:00",
    "link": "http://google.com",
    "screenshot": {
      "dateCreated": "2017-07-11T14:25:04.950Z",
      "dateUpdated": "2017-07-11T14:25:04.950Z",
      "title": "google.png",
      "fileSize": "65941",
      "mimeType": "image/png",
      "metaData": {
        "width": 580,
        "colors": {
          "palette": null,
          "dominant": {
            "rgb": {
              "b": 232,
              "g": 233,
              "r": 233
            },
            "hex": "E9E9E8",
            "isLight": true
          }
        },
        "height": 407,
        "alternativeText": null,
        "copyrightInformation": null
      },
      "tags": [],
      "imageUrl": "https://d1o9o9r2qlybfc.cloudfront.net/full/08c3f6dd-b6da-4241-bdd0-288799b1e1a4.png",
      "thumbnails": {}
    }
  }
}

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

 Control + C

Мы можем перезапустить наш сервер, вернувшись в окно терминала, где работает наш Node-сервер, и нажав node server Это остановит наш сервер узлов. Мы можем запустить сервер снова, набрав views

Затем мы создадим страницу сведений о проекте, чтобы не отображать весь наш контент непосредственно на главной странице. Создайте новый шаблон в каталоге представлений с именем details.pug В этом файле мы создаем что-то вроде:

 h1= project.title
div!= project.content.description.html
img(src= project.content.screenshot.imageUrl)
p: a(href= project.content.link) Visit Site

И мы обновим наш индексный шаблон, чтобы в нем отображалось только имя проекта со ссылкой на подробное представление:

 for project in projects
    ul
        li: a(href='/view/' + project.slug) #{project.title}

Обратите внимание, как мы project.slug Это позволит нам определить, какой элемент портфеля выбрать на странице сведений.

Теперь нам нужно определить новый маршрут для нашего подробного просмотра в нашем файле server.js

 app.get('/view/:slug', function(req, res) {
    var slug = req.params.slug;

    elemeno.getCollectionItem('portfolio', slug, function(err, response) {
        res.render('details.pug', {project: response.data});
    });
});

Здесь вы можете видеть, что мы определяем наш путь к маршруту с помощью динамического параметра :slug Это означает, что если мы сделаем GET/views/ANYTHING Мы извлекаем параметр slugsluggetCollectionItem Обратите внимание, что эта функция извлекает отдельный элемент из коллекции, поэтому нам нужно передать и элемент коллекции, и элемент. Эта функция возвращает один объект, представляющий элемент, который мы запросили. Мы визуализируем наш шаблон details.pug

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

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

 app.get('/view/:slug', function(req, res) {
    var slug = req.params.slug;

    elemeno.getCollectionItem('portfolio', slug, function(err, response) {
        if (err) {
            return res.render('404.pug');
        }

        res.render('details.pug', {project: response.data});
    });
});

Затем мы просто создаем простой шаблон 404.pugviews

 h1 Oops! that project does not exist

Мы можем перезапустить наш сервер снова, и если мы попытаемся получить доступ к несуществующему проекту, мы должны получить нашу новую страницу 404.

Завершение

Это оно! У нас есть простой сайт, извлекающий контент из Headless CMS. Наш сайт невероятно сырой и оставляет желать лучшего с точки зрения дизайна и пользовательского опыта. Тем не менее, вы можете увидеть, как легко получить доступ к контенту из Headless CMS, например, Elemeno, и использовать практически любой язык программирования, шаблонизатор или фреймворк. Мы могли бы легко использовать другой шаблонизатор, такой как EJS, Dust или Handlebars. Вместо Express мы могли бы использовать другую среду, такую ​​как Koa, Hapi или Sails. Вместо Node мы могли бы использовать другой язык программирования, такой как Ruby, PHP или Python. Вместо веб-сайта мы могли бы создать мобильное приложение, приложение для часов или какой-нибудь прототип Arduino.

Безголовая CMS позволяет вам легко управлять своим контентом, в то же время позволяя создавать проекты на нескольких устройствах с использованием ваших любимых инструментов и методов. Ваша CMS не должна определять, где и как вы строите свои проекты.

Я поделился полностью испеченной версией этого простого сайта с портфолио на GitHub: Elemeno Portfolio Demo . Не стесняйтесь раскошелиться и сделать его своим!