Управление контентом для сайта с помощью Netlify CMS

JAMstack - это современная архитектура веб-разработки, основанная на JavaScript на стороне клиента, API многократного использования и готовая разметка. Предыдущее сообщение в блоге описано, как создать сайт JAMstack с функциями Hugo и Azure . Эта статья будет посвящена тому, как добавить безглавую CMS для управления контентом для сайта.

Безглавая CMS

A Headless CMS предоставляет нетехническим пользователям простой способ добавления и редактирования содержимого сайта JAMstack. Будучи безголовым, он отделяет контент от презентации.

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

Прочтите все об этом по адресу: https://headlesscms.org

Безглавая CMS может быть:

Git на основе
API приводом

В этом блоге основное внимание уделяется Netlify CMS , открытому исходному коду на основе Git для всех генераторов статических сайтов.

С помощью CMS на основе git вы подталкиваете изменения к git, которые затем запускают новую сборку вашего сайта.

Netlify CMS

CMS с открытым исходным кодом для вашего рабочего процесса Git

Узнайте больше:

Почему Netlify CMS?

Интегрируется с любым инструментом построения
Вставляет любой генератор статического узла

Настроить

Вы можете следить за быстрым запуском, чтобы установить и настроить Netlify CMS.

В основном делают пять вещей:

Подпишитесь на Netlify:
- https://app.netlify.com/signup
Новый сайт от Git
Зарегистрировать новое приложение OAuth в GitHub
Установка поставщика проверки подлинности
Обновить код

Новый сайт от Git

Иди сюда:

https://app.netlify.com/start

Затем:

Выберите поставщика git
Выберите репозиторий
Настройте свою сборку

Netlify создать совый сайт

Конфигурация сборки для этого сайта:

Netlify непрерывное развертывание

Команда сборки: hugo -s src/site
Опубликовать каталог: src/site/public
Построить переменные среды: HUGO_VERSION = 0.21

См. Общие директивы конфигурации при настройке других генераторов статических узлов.

Зарегистрировать новое приложение OAuth в GitHub

Иди сюда:

https://github.com/settings/developers

Затем:

Зарегистрировать новое приложение OAuth

Регистрация нового oAuth приложения

URL-адрес отзыва авторизации: https://api.netlify.com/auth/done

Взять на заметку:

Client ID
Client Secret

Установка поставщика проверки подлинности

Иди сюда:

https://app.netlify.com

Затем:

<Site> / Поставщики доступа / Аутентификации / Поставщик установки

Устновка идентификации с провайдером

Копировать из GitHub:

Ключ: Client ID
Секрет: Client Secret

Код

Код для сайта:

https://github.com/hlaueriksson/jamstack-cms/tree/master/src/site

Исходный код в этом примере является клоном репозитория Git из предыдущего сообщения в блоге.

Изменен код:

код Давайте поговорим о выделенных файлах …

Чтобы добавить Netlify CMS на сайт Hugo, в папку /static/admin/ должны быть добавлены два файла:

index.html
config.yml

index.html :

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@~0.4/dist/cms.css" />

</head>
<body>
  <script src="https://unpkg.com/netlify-cms@~0.4/dist/cms.js"></script>
</body>
</html>

Точка входа для интерфейса администратора Netlify CMS
Скрипты и стили из CDN
Это приложение React
Это версия 4

config.yml :

backend:
  name: github
  repo: hlaueriksson/jamstack-cms # Path to your Github repository
  branch: master # Branch to update

media_folder: "src/site/static/images/uploads" # Media files will be stored here
public_folder: "/images/uploads" # The src attribute for uploaded media

collections:
  - name: "recipe" # Used in routes, e.g. /admin/collections/recipe
    label: "Recipe" # Used in the UI
    folder: "src/site/content/recipe" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template i.e. title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Date", name: "date", widget: "datetime"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Layout", name: "layout", widget: "hidden", default: "recipe"}
      - {label: "Description", name: "description", widget: "text"}
      - label: "Image"
        name: "image"
        widget: "object"
        fields:
          - {label: "Text", name: "text", widget: "string"}
          - {label: "URL", name: "url", widget: "image"}
      - label: "Ingredients"
        name: "ingredients"
        widget: "list"
        fields:
          - label: "Ingredient"
            name: "ingredient"
            widget: "object"
            fields:
              - {label: "Amount", name: "amount", widget: "number"}
              - {label: "Unit", name: "unit", widget: "select", options: ["", "dl", "l", "kg"]}
              - {label: "Name", name: "name", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}

Бэкэнд - это репо GitHub
Медиа и общедоступные папки, подходящие для Hugo. Изображения можно загружать непосредственно из редактора.
Коллекции определяют структуру типов контента и как работает интерфейс администратора в Netlify CMS
В этом примере настроен один тип контента для рецептов
fields соответствуют yaml форматированному фронту в генерируемых файлах разметки
Последнее поле, body , является содержимым в сгенерированных файлах разметки
Вы можете включить редакторский рабочий процесс здесь

Содержание:

---
date: 2017-06-24T18:38:50.121Z
title: Apple Jam
layout: recipe
description: Jam made of apples tastes awesome.
image:
  text: Apples
  url: /images/uploads/apples.jpg
ingredients:
  - ingredient:
      amount: '1'
      name: apples
      unit: kg
  - ingredient:
      amount: '0.5'
      name: water
      unit: dl
  - ingredient:
      amount: '5'
      name: sugar
      unit: dl
---
## Method

1. Scale and kernel of the apples. Place the peeled apple slices in a bowl of cold water so that they do not darken.
2. Lift the apples to a saucepan and add water. Boil on low heat and stir regularly. Stir the sugar when the apples soften (feel a test piece). Let boil again.
3. Mix the mash to the desired consistency with a rod mixer.
4. In the fridge the mash stays for 1-2 weeks. In freezer it will last up to a year.

Тип контента из config.yml генерирует markdown файлы , подобные этому
yaml форматированное переднее вещество соответствуетfields
Поле body - это фактическое содержание

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

config.toml :

baseURL = "http://jamstack-cms.netlify.com/"
languageCode = "en-us"
title = "JAMstack Recipes"

The baseURL указывает на новый сайт, размещенный Netlify

summary.html :

<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
<p>{{ $.Param "description" }}</p>
<a href="{{ .Permalink }}">
  <img src="{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}">
</a>

Изображения могут быть загружены непосредственно из редактора в выделенную папку в репозитории Git
Полный URL-адрес изображения поступает из фронта

recipe.html :

{{ partial "header" . }}

<div id="data" data-slug="{{ .File.TranslationBaseName }}" data-api="{{ .Site.Data.api.recipe.get_ingredients }}"></div>

<div class="row marketing">
  <div class="col">
      <h1>{{ .Title }}</h1>
      <p>{{ $.Param "description" }}</p>
      <img src="{{ $.Param "image.url" }}" class="img-fluid" alt="{{ $.Param "image.text" }}" />

      <div id="measurements">
        <span>Display measurements in:</span>
        <select id="system">
          <option value="metric">Metric System</option>
          <option value="imperial">Imperial System</option>
        </select>
      </div>

      <h2>Ingredients</h2>
      <ul id="metric" class="ingredients">
        {{ range $.Param "ingredients" }}
          <li>{{ .ingredient.amount }} {{ .ingredient.unit }} {{ .ingredient.name }}</li>
        {{ end }}
      </ul>
      <ul id="imperial" class="ingredients"></ul>

      {{ .Content | markdownify }}
  </div>
</div>

{{ partial "footer" . }}

Здесь также был изменен URL-адрес изображения
Фронт-материал, отформатированный с помощью yaml и toml имеет немного другую структуру
Был изменен доступ к значениям ингредиентов