Специальные теги внутри HTML-шаблона

Прежде чем разбивать документ на отдельные файлы необходимо создать HTML-шаблоны, в которые будут подставлены обработанные данные. Шаблоны бывают двух типов:

  • для страниц. В такой шаблон вставляются обработанные страницы. Путь к HTML-шаблону для страниц указывается в поле Путь к файлу с шаблоном на вкладке 1. Основные;
  • для оглавления. В такой шаблон вставляется автоматически сгенерированное оглавление. Путь к HTML-шаблону для оглавления указывается в поле Путь к файлу с шаблоном для оглавления на вкладке 1. Основные. Поле не является обязательным. Если путь не задан, то используется HTML-шаблон для страниц.

Внутри HTML-шаблонов указываются следующие специальные теги:

  • ===title=== — отмечает место вставки названия страницы. Название генерируется автоматически на основе содержимого первого заголовка первого, второго, третьего или четвертого уровней. Если таких заголовков нет, то названием страницы будет пустая строка. Тег ===title=== нужно указывать внутри тега <title>:
<title>===title===</title>
  • ===description=== — отмечает место вставки описания страницы. Текст названия генерируется автоматически на основе первого абзаца на странице. Если такого абзаца нет, то описанием страницы будет пустая строка. Пример указания тега внутри HTML-шаблона:
<meta name="description" content="===description===">
  • ===keywords=== — отмечает место вставки ключевых слов. Ключевые слова берутся из содержимого поля Ключевые слова по умолчанию, расположенного на вкладке 1. Основные. К словам по умолчанию добавляются слова, найденные на странице, и из этого множества удаляются слова, указанные в поле Запрещенные ключевые слова, которое расположено на вкладке 2. Настройки. Пример указания тега внутри HTML-шаблона:
<meta name="keywords" content="===keywords===">
  • ===canonical=== — отмечает место вставки HTML-тега с уникальным адресом страницы для поисковых систем. Адрес страницы генерируется на основе значения поля Абсолютный URL для link rel="canonical", расположенного на вкладке 1. Основные. Если поле не заполнено, то тег ===canonical=== заменяется пустой строкой. Если поле заполнено, то к его значению добавляется название страницы с расширением и всё это оборачивается в HTML-тег:
<link rel="canonical" href="https://unicross-studio.ru/">
  • ===breadcrumb=== — отмечает место вставки названия страницы для "хлебных крошек". Название генерируется автоматически на основе содержимого первого заголовка первого, второго, третьего или четвертого уровней. Если таких заголовков нет, то названием страницы будет пустая строка;
  • ===content=== — отмечает место вставки содержимого страницы.

Пример HTML-шаблона для страниц приведен в листинге 1.4. Для подсветки кода листингов используется библиотека code-prettify.

Листинг 1.4. HTML-шаблон для страниц

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>===title===</title>
   <meta name="description" content="===description===">
   <meta name="keywords" content="===keywords===">
   <meta name="robots" content="index, follow">
   ===canonical===
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.u-listing {
  padding: 0.65rem 1rem;
  background-color: #f8f9fa;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
}
.u-listing pre {
  padding: 0;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  background-color: transparent;
  border: 0;
  font-family: "Courier New", SFMono-Regular, Menlo, Monaco, Consolas, 
  "Liberation Mono", monospace;
  font-size: 1rem;
}
.u-text code {
  font-size: 1rem;
}
.u-note-header {
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .u-indent {
    margin-left: 3rem;
  }
  .u-note-header, .u-note-alert {
    margin-left: 3rem;
    margin-right: 3rem;
  }
}
.u-listing-header {
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}
.u-picture-label {}
.u-picture-label-courier, .u-listing-header-courier {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-mark-list2 {
  margin-left: 1.5rem;
  list-style-type: circle;
}
.u-mark-list3 {
  margin-left: 3rem;
  list-style-type: square;
}
.u-areal {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-level1 {
  margin-top: 1.5rem;
}
.u-level2 {
  margin-left: 2rem;
}
.u-level3 {
  margin-left: 4rem;
}
.u-level4 {
  margin-left: 6rem;
}
.u-level5 {
  margin-left: 8rem;
}
.u-level6 {
  margin-left: 10rem;
}
.u-link {
  color: #0056b3;
}
.u-bold-italic {
  font-style: italic;
  font-weight: bold;
}
.u-underline {
  text-decoration: underline;
}
</style>
</head>
<body>

<div class="container-lg mt-3 maindiv">
<div class="row">
<div class="col-md-9 offset-md-1 col-lg-8 offset-lg-0 col-xl-9">

<nav aria-label="breadcrumb" class="breadcrumb-nav">
  <ul class="breadcrumb flex-column flex-md-row">
    <li class="breadcrumb-item">
       <a href="/">Главная</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
       ===breadcrumb===
    </li>
  </ul>
</nav>

===content===

</div>
<div class="col-lg-4 col-xl-3">&nbsp;</div>

</div>
</div>

</body>
</html>

Пример HTML-шаблона для страниц приведен в листинге 1.5. Для подсветки кода листингов используется библиотека highlightjs.

Листинг 1.5. HTML-шаблон для страниц

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>===title===</title>
   <meta name="description" content="===description===">
   <meta name="keywords" content="===keywords===">
   <meta name="robots" content="index, follow">
   ===canonical===
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.u-listing {
  padding: 0.65rem 1rem;
  background-color: #f8f9fa;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
}
.u-listing pre {
  padding: 0;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  background-color: transparent;
  border: 0;
  font-family: "Courier New", SFMono-Regular, Menlo, Monaco, Consolas, 
  "Liberation Mono", monospace;
  font-size: 1rem;
}
.u-text code {
  font-size: 1rem;
}
.u-note-header {
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .u-indent {
    margin-left: 3rem;
  }
  .u-note-header, .u-note-alert {
    margin-left: 3rem;
    margin-right: 3rem;
  }
}
.u-listing-header {
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}
.u-picture-label {}
.u-picture-label-courier, .u-listing-header-courier {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-mark-list2 {
  margin-left: 1.5rem;
  list-style-type: circle;
}
.u-mark-list3 {
  margin-left: 3rem;
  list-style-type: square;
}
.u-areal {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-level1 {
  margin-top: 1.5rem;
}
.u-level2 {
  margin-left: 2rem;
}
.u-level3 {
  margin-left: 4rem;
}
.u-level4 {
  margin-left: 6rem;
}
.u-level5 {
  margin-left: 8rem;
}
.u-level6 {
  margin-left: 10rem;
}
.u-link {
  color: #0056b3;
}
.u-bold-italic {
  font-style: italic;
  font-weight: bold;
}
.u-underline {
  text-decoration: underline;
}
.hljs-comment {
  color: #697070;
}
.hljs-punctuation,
.hljs-tag {
  color: #444a;
}
.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
  color: #444;
}
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
  font-weight: 700;
}
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
  color: #800;
}
.hljs-section,
.hljs-title {
  color: #800;
  font-weight: 700;
}
.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
  color: #ab5656;
}
.hljs-literal {
  color: #695;
}
.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
  color: #397300;
}
.hljs-meta {
  color: #1f7199;
}
.hljs-meta .hljs-string {
  color: #38a;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}
</style>
</head>
<body>

<div class="container-lg mt-3 maindiv">
<div class="row">
<div class="col-md-9 offset-md-1 col-lg-8 offset-lg-0 col-xl-9">

<nav aria-label="breadcrumb" class="breadcrumb-nav">
  <ul class="breadcrumb flex-column flex-md-row">
    <li class="breadcrumb-item">
       <a href="/">Главная</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
       ===breadcrumb===
    </li>
  </ul>
</nav>

===content===

</div>
<div class="col-lg-4 col-xl-3">&nbsp;</div>

</div>
</div>

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>

Пример HTML-шаблона для оглавления приведён в листинге 1.6.

Листинг 1.6. HTML-шаблон для оглавления

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Оглавление</title>
   <meta name="description" content="Оглавление">
   <meta name="keywords" content="===keywords===">
   <meta name="robots" content="index, follow">
   ===canonical===
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.u-level1 {
  margin-top: 1.5rem;
}
.u-level2 {
  margin-left: 2rem;
}
.u-level3 {
  margin-left: 4rem;
}
.u-level4 {
  margin-left: 6rem;
}
.u-level5 {
  margin-left: 8rem;
}
.u-level6 {
  margin-left: 10rem;
}
.u-link {
  color: #0056b3;
}
</style>
</head>
<body>

<div class="container-lg mt-3 maindiv">
<div class="row">
<div class="col-md-9 offset-md-1 col-lg-8 offset-lg-0 col-xl-9">

<nav aria-label="breadcrumb" class="breadcrumb-nav">
  <ul class="breadcrumb flex-column flex-md-row">
    <li class="breadcrumb-item">
       <a href="/">Главная</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
       Оглавление
    </li>
  </ul>
</nav>

<h1>Оглавление</h1>

===content===

</div>
<div class="col-lg-4 col-xl-3">&nbsp;</div>

</div>
</div>

</body>
</html>
Помощь студии

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

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