EJS

CMintS использует EJS в качестве шаблона двигатель для создания макетов, EJS также может использоваться для страница . EJS - простой шаблонный язык который позволяет генерировать HTML-разметку при написании простого JavaScript. Детальный EJS синтаксическая документация может быть найдена , также есть онлайн-площадка, до попробуйте Синтаксис .

Внешний вид

Как упоминалось в обзоре тем в чтобы решить, какой макет использовать для страницы, Front Matter " layout " необходимо использовать свойство, которое возвращается к макету по умолчанию. Kak

Принимая во внимание фрагмент ниже theme/layouts/default.ejs:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<main>
  <%- page.body %>
</main>
</body>
</html>

И фрагмент ниже pages/about.md

# about
This is the about page

Запрос на страницу /about будет генерировать HTML-код ниже:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<main>
  <h1>about</h1>
  <p>This is the about page</p>
</main>
</body>
</html>

Но если у вас есть другой макет, который находится в theme/layouts/home.ejs, вы можете задать его в Front Matter, чтобы использовать его напр .:

---
layout: home
---

# Homepage
This page is using home.ejs layout

body

Как вы могли заметить из предыдущего примера, заполнитель <%- page.body %> в макете ejs заменяется фактическим содержимым страницы, независимо от того, какая страница используется (markdown, html или ejs) фактическое содержание страницы отображается и заменяет <%- page.body %> заполнитель.

partials

Partials - это файлы макета EJS, которые можно загружать в макеты EJS:

<% include partialPath %>
<%- include('partialPath', {key: value}) %>

Это может пригодиться для разделения частей макета и повторное использование:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <% include partials/head %>
  <% include partials/meta %>
</head>
<body>
  <% include partials/header %>
<main>
  <%- page.body %>
</main>
  <% include partials/footer %>
</body>
</html>

Учитывая вышеприведенный пример, мы могли бы, например, создать частичное, которое будет повторно использовать различные макеты, например, считать partials/head.ejs с помощью ниже:

<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/js/main.js" defer></script>

этот фрагмент теперь можно использовать и загружать в макет, просто добавив <% include partials/head %> в макет.

Front Matter

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

Допустим Front Matter:

---
title: About page
showSidebar: true
---

Данные, определенные в Front Matter, доступны из файлов макета с использованием объекта страницы:

<title><%= page.title %></title>
<meta property="og:title" content="EJS">

...
</head>
<body>
...
<%if (page.showSidebar) { %>
  <% include partials/sidebar %>
<% } %>

Помощники

В CMintS также есть некоторые встроенные помощники:

Помощник	Тип	Описание
page.pathname	Переменная	Путь к текущей странице
page.locale	Переменная	Языковой стандарт текущей страницы
page.locales	Массив	Другие локали, в которых доступна текущая страница
page.urlLocale	Переменная	Локаль, как это указано в URL.
page.markdown.toc	Объект	Таблица содержимого страницы
i18n.getPageLocales	Функция	Получить доступные локали для определенной страницы
i18n.href	Функция	Сгенерировать href и hreflang для пути. Проверяет, переведён ли путь на язык странницы, если нет то используется язык по умолчанию.
site.queryPages	Функция	Запрос массива метаданных объектов страниц.

page.pathname

Путь к текущей странице:

<a <%-i18n.href(item.url)%> <% if (item.url == page.pathname) { %>class="active"<% } %>>

page.locale

Языковой стандарт текущей страницы:

<!DOCTYPE html>
<html lang="<%= page.locale %>">
<head>
  <title>...</title>
</head>
<body>
...

page.locales

Другие локали, в которых доступна текущая страница:

<!DOCTYPE html>
<html lang="<%= page.locale %>">
<head>
...
<!-- og:locale, og:locale:alternate, rel="canonical" rel="alternate"  -->
<% for (const locale of page.locales) { %>
  <% const localeRegion = site.localeMap[locale] ? site.localeMap[locale].region : locale; %>
  <% if (locale == page.locale) { %>
    <meta property="og:locale" content="<%= localeRegion %>" />
    <link rel="canonical" href="https://<%= site.domain %>/<%= page.pathname %>">
  <% } else { %>
    <meta property="og:locale:alternate" content="<%= localeRegion %>" />
    <link rel="alternate" href="https://<%= site.domain %>/<%= locale %>/<%= page.pathname %>" hreflang="<%= locale %>" />
  <% } %>
<% } %>
</head>
<body>
...

page.urlLocale

Локаль, как это указано в URL.

https://example.com/about
https://example.com/en/about
https://example.com/de/about
https://example.com/es/about

С учетом структуры URL выше, иногда вам может понадобится скрипт перенаправления на страницах которые не имеют локали в URL, что в этом случает является https://example.com/about, в таких случаях текущий помощник может пригодиться, на например:

<% if (!page.urlLocale) { %>
  <% include redirectionScript %>
<% } %>

page.markdown.toc

Объект page.markdown.toc может быть использован в ".ejs" для создания таблицы контента. Объект является деревом, в котором каждый узел соответствует заголовку markdown, каждый узел состоит из идентификатора и заголовка. Если узел содержит потомков, то все дочерние узлы могут быть доступны через свойство page.markdown.toc:

{
  "children": [
    {
      "id": "ejs",
      "title": "EJS",
      "children": [
        {
          "id": "layout",
          "title": "Layout"
        },
        {
          "id": "body",
          "title": "Body"
        }
        ...

Итак, чтобы построить таблицу содержимого из этой переменной, фрагмент EJS может использоваться как ниже:

<%/* partials/navigations/toc.ejs */%>

<% if (items) { %>
  <ul>
    <% items.forEach(function(item){ %>
    <li>
        <% if (item.id) { %>
          <a href="#<%= item.id %>"><%= item.text %></a>
        <% } %>
        <% if (item.children) { %>
          <%- include('toc', {items: item.children}) %>
        <% } %>
    </li>
    <% }) %>
  </ul>
<% } %>

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

<%if (page.
  <aside id="toc">
    <h2>Table of content</h2>
    <%- include('partials/navigations/toc', {items: page.markdown.toc.children}) %>
  </aside>
<% } %>

i18n.getPageLocales

Получить доступные локали для определенной страницы

<% const configPageLocales = i18n.getPageLocales("documentation/getting-started/configuration"); %>
<% const homepageLocales = i18n.getPageLocales("index"); %>
<% if (homepageLocales.includes("de")) { %>
  Homepage is available in German
<% } %>
<% if (configPageLocales.includes("es")) { %>
  Config page is available in Spanish
<% } %>

i18n.href

Сгенерировать href и hreflang для пути. Проверяет, переведён ли путь на язык странницы, если нет то используется язык по умолчанию.

<a <%-i18n.href("documentation")%> class="button">{get-started[Main button text] Get started}</a>

site.queryPages

Запрос массива метаданных объектов страниц.

Помимо метаданных Front Matter, страницы содержат pathname , который является фактическим именем страницы и originalPathname , который содержит имя пути игнорируя permalink.

<% let docPages = site.queryPages((data) => data.categories &&
                                          data.categories.includes("documentation")) %>

<% docPages.forEach(function(item) { %>
  <a <%- i18n.href(item.pathname) %>> <%= item.title %> </a>
<% }); %>