Dynamický název stránky

Bývá zvykem v názvu stránky zahrnout i označení aktuální podstránky. Například z HTML a CSS 2 udělat Dynamický název stránky | HTML a CSS 2. Není však žádné pravidlo, jestli oddělovač má být právě |, - nebo dokonce •. Stejně tak nikde není stanoveno, jestli hlavní název webu vždy musí být přítomen nebo jestli nemůže být první takto HTML a CSS 2 - Dynamický název stránky.

Nadpis pro všechny stránky stejný

Nadpis s názvem podstránky

Využití

• Rozšířený nadpis může vylepšit uživatelu orientaci ve více záložkách, v oblíbených.

• Může mít také pozitivní dopad na výsledky vyhledávání (SEO), protože vyhledávače předpokládají, že v nadpisu je důležitý text aktuální stránky, který navíc vyhledávač často použije jako náhledový text ve výsledcích.

• Společně s dalšími metadaty je použit při sdílení na sociálních sítích.

Úprava šablony

Na webu s větším počtem stránek může zjednodušit údržbu úprava základního layoutu. Předpokládejme, že každá podstránka, u které chceme rozšířený nadpis má nastavenou proměnnou nadpis. Šablona by pak mohla vypadat takto:

layouty/zakladni.njk

<title>{% if nadpis %}{{ nadpis }} | {% endif %}HTML a CSS 2</title>

Pokud má stránka nadpis, použije se a přidá se za něj |.

podstranka.njk

---
layout: zakladni
nadpis: Dynamický název stránky
---

<h2>…</h2>
<p>…</p>

Nadpis můžeme předat přes data ve Front Matter podle ukázky výše nebo pomocí JSON souboru.

Výsledné HTML pak bude vypadat takto:

podstranka/index.html

<title>Dynamický název stránky | HTML a CSS 2</title>

Úkol na teď

• V projektu postaveném na Eleventy s více podstránkami doplň do <title> název jednotlivých podstránek. Můžeš například rozšířit domácí úkol s filmy nebo navázat na bonusovou část v galerii.

  (Pokud nemáš na co navázat, můžeš si zde stáhnout hotovou galerii, kde stačí detailovým stránkám doplnit <title> obsahujíci popisek. Galerie s bonusem)

  Ukázka detailu filmu

  <title>Duna | FILMY.cz</title>

  Ukázka detailové stránky s obrázkem galerie

  <title>Jezero | Galerie</title>

Bonus

• Pokud sis v předchozím úkolu zvolila projekt s filmy, doplň do základního layoutu meta tag pro popis (description) s textem Filmová databáze vybraných filmů. Web slouží jako cvičení práce s Eleventy.

• Pomocí podmínky pro stránky s detailem filmu použij text shrnující obsah filmu {{ film.obsah.text }}.

• Obsah je pro description většinou moc dlouhý. Pomocí filtru truncate ho ořízni jen na 100 znaků.

• (Filtr nešťastně pro výpustku používá tři samostatné znaky tečky ..., které většina fontů vykresluje příliš daleko od sebe. Nahraď je za speciální symbol tří teček …)

• Nezapomeň zkontrolovat výsledné HTML třeba přes vývojářské nástroje, ve složce dist nebo jiným zobrazením zdrojového kódu stránky.