Управление контентом с помощью Netlify CMS
30 июня 2017 года
Содержание для современной архитектуры веб-разработки:
Headless CMS = система управления контентом для сайтов JAMstack
Это сообщение в блоге:
Netlify CMS для сайта JAMstack, созданного с помощью функций Hugo + jQuery + Azure
Этот пост в блоге является частью серии:
Пример, используемый в этом блоге, является сайтом для рецептов варенья.
Пример кода:
Пример сайта:
JAMstack
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:
- Новый сайт от Git
- Зарегистрировать новое приложение OAuth в GitHub
- Установка поставщика проверки подлинности
- Обновить код
Новый сайт от Git
Иди сюда:
Затем:
- Выберите поставщика git
- Выберите репозиторий
- Настройте свою сборку
Конфигурация сборки для этого сайта:
- Команда сборки: hugo -s src/site
- Опубликовать каталог: src/site/public
- Построить переменные среды: HUGO_VERSION = 0.21
См. Общие директивы конфигурации при настройке других генераторов статических узлов.
Зарегистрировать новое приложение OAuth в GitHub
Иди сюда:
Затем:
- Зарегистрировать новое приложение OAuth
- URL-адрес отзыва авторизации:
https://api.netlify.com/auth/done
Взять на заметку:
- Client ID
- Client Secret
Установка поставщика проверки подлинности
Иди сюда:
Затем:
- <Site> / Поставщики доступа / Аутентификации / Поставщик установки
Копировать из GitHub:
- Ключ: Client ID
- Секрет: Client Secret
Код
Код для сайта:
Исходный код в этом примере является клоном репозитория 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 имеет немного другую структуру
- Был изменен доступ к значениям ингредиентов
Контент менеджер
Доступ к интерфейсу администратора Netlify CMS осуществляется через /admin/ slug.
Если вы являетесь сотрудником репо GitHub, вы можете войти в систему:
После авторизации приложения:
Вы можете просмотреть содержимое из репо:
Добавление и редактирование контента из репо:
Вывод
Сайты JAMstack являются удивительными. Безголовый CMS добавляет еще большую радость.
Smashing Magazine получил 10 раз быстрее , используя Hugo и Netlify CMS для перехода от WordPress к сайту JAMstack.
(с)Перевод статьи http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/