23.09.2024
Webnode: Jak nastavit navigaci pomocí kotev ⚓
02.03.2023
Instrukce pro nastavení navigace pomocí kotev na webu, abyste mohli vytvořit obsah dlouhého článku na základě podnadpisů. Nebo přeskočit celou sekci na jednostránkovém webu.
Kotva je záložka na webu, která vás nepřenese na jinou stránku, ale v rámci stránky na její jinou část. Je to chytrý způsob navigace, pokud jste se právě dopracovali k mega dlouhému článku na blogu nebo pokud vytváříte jednostránkový web.
Budeme pracovat s dlouhým článkem, který je rozčleněn na části s podnadpisy.
Jak na anchor odkazy na Webnode?
1. Vložte na Webnode svůj dlouhý článek a vyznačte v něm všechny podnadpisy tak, že je označíte jako podnadpis.
Vytvořte seznam záložek resp. podnadpisů, které chcete nastavit. Pokud začnete seznam měnit uprostřed procesu, zbytečně se zamotáte. Seznam si napište na začátek článku pod nadpis.
Například já si nastavím 3 titulky, a toto jsou jejich skutečné názvy, které chci mít i v klikatelném obsahu/indexu. Jde o to, že když kliknu na titulek v tomto seznamu, dostanu se na danou část článku.
- Část 1: Sebevražedné ctnosti
- Část 2: Mořský chaos naděje
- Část 3: Podvody
2. Každé části přiřadím vlastní ID, které je v kódu označeno hashtagem nebo křížkem #.
- Část 1: Sebevražedné ctnosti bude odkazovat na titul označený jako cast1, tedy #cast1
- Část 2: Mořský chaos naděje - #cast2
- Část 3: Podvody - část 3 - #cast3
Hashtag = ID. Nebo jinak: #cast1 je cíl odkazu, kam nás odkaz zavede. ID nastavte bez diakritiky, mezer a velkých písmen. Čím jednodušeji, tím lépe.
Ovšem kvůli SEO by bylo dobré použít skutečná slova, např.:
- #sebevrazedne-ctnosti
- #morsky-chaos-nadeje
- #podvody
3. Pro každou část článku připravím dva kódy. Jeden kód bude odkaz (v HTML označený jako a) a druhý kód bude podnadpis (v HTML označený jako h3 neboli headline 3) s přiřazeným ID.
Například:
Odkaz, který bude v obsahu/rozcestníku/indexu článku:
Kód podnadpisu, který bude v textu článku:
<a href="#cast1">Odkaz na část 1: Suicide virtues</a>
<a href="#cast2">Odkaz na část 2: Sea chaos hope</a>
<a href="#cast3">Odkaz na část 3: Deceptions</a>
<h3 id="cast1">Část 1: Suicide virtues</h3>
<h3 id="cast2" >Část 2 Sea chaos hope</h3>
<h3 id="cast3" >Část 3: Deceptions</h3>
Změňte část mezi značkami, tj. "Část 1: Sebevražedné ctnosti", na něco normálního - skutečný podtitul článku nebo skutečný název sekce.
3. Nyní přejdu k samotnému textu a nahradím všechny stávající podnadpisy připravenými kódy HTML.
To znamená, že postupně odstraním nadpisy a místo nich použiji element HTML, do kterého vložím připravený kód.
Začnu od první části, takže první kód bude tento:
<h3 id="cast1">Část 1: Suicide virtues</h3>
Takže u mě to vypadá takto:
místo: podnadpis - text - podnadpis - text - podnadpis - text
se střídá: HTML - text - HTML - text - HTML - text - HTML - text - HTML - text:
4. A nyní vytvoříme obsah (index) pomocí připravených odkazů, který můžete vložit hned pod hlavní nadpis článku:
<h2>Obsah článku</h2> <a href="#cast1">Odkaz na časť 1: Suicide virtues</a><br> <a href="#cast2">Odkaz na časť 2: Sea chaos hope</a><br> <a href="#cast3">Odkaz na časť 3: Deceptions</a><br>
5. Změny publikujeme a otestujeme, zda fungují, jak mají.
Hotovo 👻
Tímto návod končí a následuje ukázka.
Výsledek:
NIETZSCHE IPSUM
Burying sea faithful eternal-return endless ascetic pinnacle against endless. Ultimate will abstract passion truth derive snare truth justice. Society madness pinnacle horror good. Love madness joy sea will pious fearful christianity. Strong intentions fearful eternal-return of.
Obsah článku
Část 1: Suicide virtues
Suicide virtues reason law contradict abstract superiority abstract war victorious convictions ultimate hope reason. Enlightenment derive society grandeur law derive dead insofar disgust insofar hatred christian. Superiority snare abstract pinnacle joy moral.
God noble disgust moral noble law overcome justice. Free hatred self convictions prejudice snare strong chaos. Derive noble christian ultimate value intentions value holiest. Overcome revaluation burying contradict truth love salvation spirit reason chaos decieve eternal-return convictions.
Prejudice gains marvelous against ascetic overcome selfish philosophy. Evil eternal-return philosophy against endless. Contradict superiority will decieve insofar pious disgust self will decrepit inexpedient disgust.
Inexpedient selfish pious against inexpedient gains decrepit. Sexuality christianity merciful sexuality inexpedient revaluation. Horror joy evil mountains love selfish deceptions hatred.
Část 2 Sea chaos hope
Sea chaos hope ubermensch snare strong will pious philosophy endless battle. Oneself convictions salvation virtues chaos revaluation noble contradict hope enlightenment sexuality selfish. Horror strong reason overcome deceptions decieve pinnacle madness eternal-return. Justice decieve ideal marvelous madness. Faithful dead virtues depths moral overcome grandeur truth deceptions eternal-return insofar dead. Play against free revaluation christian faith disgust hatred hope salvation deceptions hatred dead. Good disgust will abstract hatred chaos victorious free chaos hatred.
Část 3 Deceptions
Justice revaluation eternal-return prejudice christian sexuality evil free virtues truth. Derive of transvaluation philosophy passion eternal-return contradict.
Horror intentions sexuality revaluation virtues zarathustra deceptions transvaluation enlightenment chaos faithful ascetic. Truth against fearful self grandeur god ubermensch contradict noble love philosophy war. Salvation christian ocean reason good society law. Endless decieve holiest law strong ultimate oneself salvation horror hope ubermensch pious. Hope hatred evil burying morality gains. Christianity christian noble against good moral sea spirit self will abstract play hope.
Deceptions inexpedient chaos evil against of chaos. Intentions transvaluation law good sea free christian ocean love depths oneself morality noble. Oneself snare joy value free good justice reason holiest contradict burying.
Depths reason society convictions ultimate hope derive chaos. Good decrepit depths contradict holiest. Self snare love zarathustra evil depths. Law ultimate superiority law overcome battle suicide sexuality justice free christian.
