Автоматическая генерация оглавления страницы

Сниппет для создания оглавления статьи

Создаем сниппет с именем AutoContent и следующим кодом:

<?php
// Если в тексте нет заголовков от h1 до h5 - выходим
if (!preg_match_all('#<h([1-5])>(.*?)</h[1-5]>#', $input, $headers)) {return;}
// Если заголовков меньше 2х - тоже выходим
if (count($headers[0]) < 2) {return;}

$base = $modx->makeUrl($modx->resource->id, '', '', 'full');
$from = $to = array();
$depth = 0;
$start = null;
// Генерация меню
$contents = '<ul id="page-contents">';
foreach ($headers[2] as $i => $header) {
	$header = preg_replace('#\s+#', ' ', trim(rtrim($header, ':!.?;')));
	$anchor = str_replace(' ', '-', $header);
	$header = "<a href=\"{$base}#{$anchor}\">{$header}</a>";
	
	if ($depth > 0) {
		if ($headers[1][$i] > $depth) {
			while ($headers[1][$i] > $depth) {
				$contents .= '<ul>';
				$depth ++;
			}
		}
		elseif ($headers[1][$i] < $depth) {
			while ($headers[1][$i] < $depth) {
				$contents .= '</ul>';
				$depth --;
			}
		}
	}
	$depth = $headers[1][$i];
	if ($start === null) {
		$start = $depth;
	}
	$contents .= '<li>' . $header . '</li>';
	
	$from[$i] = $headers[0][$i];
	$to[$i] = '<a name="' . $anchor . '" class="page-contents-link"></a>' . $headers[0][$i];
}
// Закрытие всех открытых списков
for ($i = 0; $i <= ($depth - $start); $i ++) {
	$contents .= "</ul>";
}
// Добавление якорей к заголовкам
$input = str_replace($from, $to, $input);

return $contents . $input;

Далее вызываем данный сниппет фильтром вывода, например вот так:

[[*content:AutoContent]]

Небольшой разбор сниппета

Алгоритм работы простой: сниппет выбирает все заголовки от h1 до h5 и генерирует из них вложенный список, а после этого добавляет якоря перед заголовками в тексте.

Информация для тех у кого фиксированное меню

В случае если у вас зафиксировано сверху меню, 90% что при переходе по оглавлению у вас заголовок будет улетать под меню, по этому вам необходимо добавить немного CSS, например:

a.page-contents-link {display:block;position:relative;top:-70px;visibility:hidden}

где -70px — это высота меню (70px).