Webnode: Ako nastaviť navigáciu pomocou kotiev

09.09.2022

Návod pre nastavenie tzv. anchor navigácie na webe, aby si si mohol*mohla vytvoriť obsah dlhého článku na základe podnadpisov.

Alebo preskočiť celú sekciu na jednostránkovom webe. ¡Vamos!

Kotva je záložka na tvojom webe, ktorá ťa nepresunie na inú stránku, ale v rámci stránky na inú jej časť. Je to chytrý spôsob navigácie, ak si práve zo seba dostala mega dlhý článok na blog, alebo nastavuješ jednostránkový web.

Skús si to. Klikni sem a dostaň sa rovno na koniec návodu.

1. V prvom rade je potrebné vytvoriť zoznam záložiek, ktoré chceš nastavovať. Ak začneš zoznam meniť uprostred procesu, zbytočne sa do toho zamotáš.

Teraz je ten správny čas otvoriť si v PC Poznámkový blok.

Pre príklad, ja budem nastavovať 3 podnapisy a toto sú ich reálne názvy, ktoré chcem mať aj v obsahu. Cieľom je, že keď kliknem na nadpis v tomto zozname, prenesie ma na danú časť článku.

Časť 1: Suicide virtues
Časť 2: Sea chaos hope
Časť 3: Deceptions

2. Každej časti priradím vlastné ID, ktoré sa v kóde označuje heštegom.

časť 1 - bude odkazovať na nadpis označený ako cast1, takže #cast1
časť 2 - #cast2
časť 3 - #casť3

Hešteg = ID. Alebo inak: #cast1 je cieľ odkazu, kam nás odkaz zavedie. Časť za heštegom nazvi bez diakritiky, medzier a veľkých písmem. Čím jednoduchšie ju nazveš, tým lepšie.

3. Pripravím si dva kódy pre každú časť článku. Jeden kód bude odkaz (označený v HTML ako a) a druhý kód bude podnadpis (označený v HTML ako h3) s priradeným ID. Napr.:

Odkaz, ktorý bude v obsahu:

<a href="#cast1">Odkaz na časť 1: Suicide virtues</a><br>

Kód pre podnadpis, ktorý bude v texte:

<h3 id="cast1">Časť 1: Suicide virtues</h3>

<a href="#cast2">Odkaz na časť 2: Sea chaos hope</a><br>

<h3 id="cast2" >Toto je časť 2 Sea chaos hope</h3>

<a href="#cast3">Odkaz na časť 3: Deceptions</a><br>

<h3 id="cast3" >Toto je časť 3: Deceptions</h3>

Časť medzi tagmi, t.j. "Odkaz na časť 1: Suicide virtues" zameň na niečo normálne - skutočný podnadpis článku alebo skutočný názov sekcie.

3. Teraz sa presuniem do textu samotného a všetky existujúce podnapisy zamením za pripravené HTML kódy.

To znamená, že postupne zmažem podnapisy a namiesto nich použijem prvok HTML, kam vložím pripravený kód.

Začnem od časti jedna, teda prvý kód bude tento:

<h3 id="cast1">Časť 1: Suicide virtues</h3>

U mňa to teda vyzerá takto:

namiesto podnadpis - text - podnadpis - text - podnadpis - text

sa strieda HTML - text - HTML - text - HTML - text:

4. A teraz vytvoríme obsah (index) pomocou pripravených odkazov:

 
<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>

A šupneme ho do tiež prvku HTML niekam na začiatok článku - pod hlavný nadpis alebo perex.

5. Zmeny publikujeme a vyskúšame, či to funguje tak, ako má.

Toto je koniec návodu.

Príklad:

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

Odkaz na časť 1
Odkaz na časť 2
Odkaz na časť 3

Toto je časť 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.

Toto je časť 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.

Toto je časť 3: Deceptions

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.
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.

Najnovšie kódy pre Webnode

Tipy, triky, kódy, návody pre lepší web

Webnode: Ako presmerovať odkazy v navigácii

10.09.2022

Tento návod sa hodí, ak chceš akúkoľvek záložku z menu presmerovať mimo svoj web. Napr. na inú tvoju stránku/e-shop, do inej služby, kde máš profil (Instagram, Facebook) a podobne.