сегодня

Автоматическое создание блока Оглавлений на странице контенета

Автоматическое создание блока Оглавлений на странице контенета

В этой статье хочу рассказать, как я делал автоматическое создание Оглавления (Содержания) на страницах статей этого сайта, работающего на CMS DLE (DataLife Engine). Для реализации этого потребуется добавить в скрипты движка сайта небольшой модуль и провести небольшие изменения в шаблоне сайта. Уверяю, что сделать эти манипуляции совсем не сложно, и для этого не нужно быть программистом, хотя некоторые понятия в структуре сайта все же потребуется.

Зачем нужно Оглавление на странице контента?

Тексты с оформленным Оглавлением, включающим пункты и подпункты смысловых разделов, имеет несколько полезных моментов:

  1. Удобство для читателей сайта благодаря быстрому переходу к нужному разделу контента;
  2. Благодаря Оглавлению во многих случаях улучшается дизайн страницы;
  3. Поисковые системы лучше воспринимают страницы с Оглавлениями, так как на них присутствуют дополнительные внутренние ссылки и тэги подзаголовков.

Как работает модуль автоматического создания Оглавлений?

При создании контента страницы сайта, следует в текст включать подзаголовки H2-H6. На основании этих подзаголовков и будет впоследствии формироваться оглавление. Причем пункты Оглавления будут создаваться с учетом иерархии. Единственное, о чем следует помнить при создании контента, это то, что первый тэг подзаголовка в тексте должен быть H2. Если же, к примеру, первым будет тег H4, а далее будет подзаголовок H2, в этом случае, то что ниже тэга не будет выводиться в Оглавлении. Так же, если в тексте совсем не будет подзаголовков, то блок Оглавления формироваться не будет.

создание блока Оглавлений на странице контенета

Установка и настройка модуля Оглавлений

Копирование и размещение модуля на сервер

Далее предлагаю пошаговую инструкцию по установке и настройке модуля автоматического создания Оглавления (Содержания) на страницах статей в CMS DLE. Последовательность следующая:

  1. Скачиваем модуль к себе на компьютер;
  2. Распакуйте скачанный архив;
  3. Найдите в папке файл headers_menu.php и залейте его на сервер своего сайта в папку: engine/modules/
  4. Далее в этой же папке найдите файл show.full.php (его полный адрес engine/modules/show.full.php). Этот файл необходимо открыть либо прямо на сервере, либо предварительно скопировав себе на компьютер;
  5. В этой папке нужно найти следующую запись:
    $tpl->set( '{navigation}', " " );
  6. И после нее необходимо добавить следующие строки:

    ///////////////////////////////////////////////////////////////////////
    include_once ENGINE_DIR . '/modules/headers_menu.php';
    ///////////////////////////////////////////////////////////////////////

Оформление и стили Блока Оглавления

Файл полной новости - fullstory.tpl

создание блока Оглавлений на странице контенета

Далее зайдя в админку своего сайта, через раздел «Шаблон сайта», заходим в файл кода отображения контента полной новости - fullstory.tpl . В место вывода блока Оглавления необходимо вставить код:

[hmenu] <div class="contents"> <p class="zagl">Содержание:</p> <ul class="h-menu"> <li>{hmenu}</li> </ul> </div>[/hmenu]

Стили шаблона

В файл стилей вашего шаблона (обычно это style.css) в любом месте, например, в самом конце, нужно вставить стили блока объявлений

/* BLOK_MENU_TEXT ----------------------------------------------- */
.contents{background: #F8F9FA;border: 1px solid #A2A9B1;padding: 15px 20px 10px 5px;display: table;border-radius: 2px;margin-top: 15px;} .zagl{margin: 0;padding: 0 0 3px;font: bold 17px 'Trebuchet MS';text-align: center;} .contents ul{margin: 0;padding: 0 0 0 20px;list-style: none;} .contents ul li{margin: 0;padding: 1px 0;} .contents ul li span{color: #444;font-size: .9em;}

создание блока Оглавлений на странице контенета

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

Скачать модуль автоматического создания Блока Оглавления можно здесь

Добавлено новостей: 211
Об авторе: Основные направления деятельности: графика, дизайн; проектирование, конструирование, 3d моделирование; создание и продвижение сайтов, контент и ссылки. Имею солидный опыт и буду рад любому сотрудничеству.
Оставить комментарий