
Automatické generování obsahu stránky
Automatické generování obsahu HTML stránky v JavaScriptu i PHP.
Obsah stránky (anglicky: table of contents, zkráceně TOC) může zpřehlednit čtení delšího článku na obsahovém webu.
Takový obsah například běžně používá Wikipedie, kdy se na začátku stránky zobrazuje seznam obsahující odkazy na jednotlivé části dané stránky.
Jak na to
Prvním předpokladem pro automatickou tvorbu Obsahu je důsledné používání kotev/záložek u nadpisů. Tj. u každého nadpisu mít identifikátor.
<h1 id="nadpis">
Text nadpisu
</h1>
Chybí-li identifikátory, není nic ztraceno. I identifikátor je možné automaticky vygenerovat. Stačí projít nadpisy a v jejich textu převést mezery na spojovníky a odstranit diakritiku (více v článku Vytvoření přátelského URL).
TOC (table of contents) umí generovat i nástroje typu Texy!.
Generování obsahu stránky
Z nadpisů (nebo obecně z elementů, které mají atirbut id
) je potom celkem jednoduché sestavit výsledný seznam.
Sestavování obsahu
V zásadě existují dvě možnosti, jak výsledný obsah sestavit.
- Použít HTML seznam (
<ul>
/<ol>
) a různé úrovně nadpisů do sebe zanořovat. - Zanoření znázornit jen CSS styly.
Druhů způsob vypsání obsahů značně zjednodušuje. Stačí v podsatě ke každé položce s id
přiřadit CSS třídu odpovídajícího názvu. A zbytek zařídit kaskádovými styly.
<ul>
<li class="uroven-h1"></li>
<li class="uroven-h2"></li>
</ul>
JavaScript
Na straně klienta v JS je to asi nejsnazší. Zvlášť za pomoci querySelector
u (od IE 8) je vybrání potřebných elementů hodně elegantní.
var polozky = document.querySelectorAll("[id]");
Tyto položky projedeme cyklem:
var obsah = "<h2>Obsah</h2><ul>";
for (var i = 0; i < polozky.length; i++) {
var uroven = polozky[i].tagName.toLowerCase();
obsah += "<li class='level-" +
uroven +
"'><a href='#" +
polozky[i].id + "'>" +
polozky[i].innerHTML + "</a>";
}
obsah += "</ul>";
Nyní stačí obsah proměnné vypsat do nějakého <div>
u.
<div class="obsah"></div>
<script>
document.querySelector(".obsah").innerHTML = obsah;
</script>
V případě, že se na stránce používají identifikátory i pro stylování, je vhodné některé značky buď přeskočit (<div>
a <span>
), nebo napak vytvářet odkazy jen pro nadpisy (<h1>
, <h2>
, …). Stačí k tomu kontrolovat vlastnost tagName
(v ukázce hodnotu proměnné uroven
).
if (uroven == "div" || uroven == "span") continue;
PHP
Podobný seznam může vyzobat z HTML i PHP.
function tableOfContents($html) {
$pattern = '/<h([2-5]) id=["\'](.*?)["\'].*?>(.*?)<\/h\1>/';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
$output = "";
foreach ($matches as $item) {
$output .= '
<li class="level-' . $item[1] . '">
<a href="#' . $item[2] . '">' . $item[3] . '</a>
</li>';
}
return (!empty($output)) ?
"<ul class='summary'>" . $output . "</ul>" :
"";
}
Funkční ukázka na GitHubu.
Zvýraznění aktuální části
Zajímavé vylepšení může být zvýraznění aktivní části, pokud je na ní odrolováno. Pochopitelně v případě, že je prostor pro fixní umístění seznamu nadpisů.
Související články

JavaScript Battery API
Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

Výpis náhodného textu
Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

Instalace Apache, PHP a MySQL za 30 vteřin
Jak si ve Windows spustit vlastní Apache, PHP a MySQL na svém PC za půl minuty.

MySQL přes PDO
PDO je PHP rozhraní pro pohodlnější práci s SQL databásí. Jaké přináší výhody a jak ho používat.