Předchozí [Indexování Googlem]

Možná už si tu nějaké pozorné oko všimlo úprav a odchylek od původní šablony (Minima v mém případě). Dneska zde shrnu, co a jak jsem kde změnila v původní šabloně.

Připomínám, že soubory šablony najdete pomocí následujícího příkazu:

bundle info --path minima

Kdo si neví rady, kde a jak příkaz provést, mrkne prosím zde (nebo na Google).

Home

Soubor home.html jsem našla ve složce _layouts. Aby bylo možné soubor upravit a Jekyllu následně vnutit ten vlastní upravený soubor, je třeba ho mít pod stejným názvem a ve stejné složce i u sebe v projektu. home.html jsem si tedy zkopírovala k sobě do docs/_layouts/.

Píšu v češtině a proto jsem i na hlavní stránce chtěla mít seznam příspěvků, ne postů. Takže jsem přesně tohle udělala v souboru pro domovskou stránku - místo default: “Posts” tam teď mám default: “Příspěvky”. Soubor není příliš obsáhlý, určitě najdete příslušnou pasáž.

Také jsem chtěla, aby se vedle data a kategorie zobrazoval i čas čtení a také, aby kategorie byla ve formě odkazu na příslušnou část v obsahu, který jsem vytvořila (viz Jak vytvořit obsah podle kategorií). Čas čtení jsem přidala jednoduchým zkopírováním span-elementů, které už tam byly, akorát jako text se mělo zobrazovat to, co se skrývá za proměnnou read_time, kterou jsem poctivě používala u každého příspěvku. Odkaz se v html (a to, co se nachází v home.html pod front matter (obsah mezi pomlčkami) je právě html) udává pomocí elementu a a jeho atributu href. Vyřešila jsem odkaz následovně:

<a href="obsah.html#{{ post.category | replace: ' ', '_' }}">{{ post.category }}</a>

Skoro na konci home je pak část odkazující na site.show_excerpts a post.excerpt. Pokud chcete, aby se vám na domovské stránce zobrazoval nejen seznam příspěvků, ale i krátký popisek/výcuc každého příspěvku, pak je třeba v _config.yml přidat show_excerpts: true a pak u každého příspěvku ve front matter přidat popis za tag excerpt (podobně jako je to s description, title, date, nebo třeba kategorií).

Post

I v rozvržení příspěvků jsem provedla nějaké úpravy. Za prvé jsem chtěla mít nahoře obsah a pak jsem také chtěla mít u každého nadpisu možnost dostat se jedním kliknutím zpátky nahoru. A u časových údajů (vytvořeno a naposledy upraveno) jsem přidala popisek údajů, tedy “Publikováno:” a “Naposledy upraveno:”.

Následuje popis toho, jak vytvořit menu a tlačítko “Nahoru”. Upozorňuji, že se jedná o popis JavaScriptového řešení! Pokud je to na tebe příliš španělská vesnice, nelam si tím hlavu. Můžeš si samozřejmě kód prohlédnout a zkusit ho metodou copy/paste dostat k sobě. Tady je odkaz.

Tlačítka jsem vytvořila pomocí JavaScriptu (vše mezi ).

Tlačítko “nahoru” vzniklo tak, že jsem si za pomocí JS našla všechny podnadpisy v textu (ve funkci upButton() hned na začátku querySelectorAll). A také hlavní nadpis, ke kterému se chci vracet. No a pak jsem pro každý z těch podnadpisů vytvořila tlačítko, resp. odkaz, který vede k hlavnímu nadpisu. Odkaz jsem do stávající stránky vložila pomocí insertBefore.

Obsah netvořím, pokud je jediným podnadpisem část “Kam dál”. Pokud příspěvek obsahuje více částí, pak obsah tvořím tak, jak je vidět v kódu. Pokud se v JS vyznáš, určitě si poradíš. Pokud ne, nevadí, ale rozepisovat to tu teď nebudu, to by bylo na dlouho.

Vzhled obsahu u příspěvku je dán v souboru main.scss (ve složce assets). Odkaz k mé verzi zde. Využila jsem pro zarovnání flexbox, zrušila puntíky u seznamu. Přístup k jednotlivým elementům jsem si zajistila přes tzv. css selektory. To tak pár slovíček, kdyby se někdo chtěl podívat podrobněji (Google).

#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#menu > ul {
  margin: 20px 0px;
}

#menu ul:not(:first-child) {
  margin: 0px;
}

#menu > ul {
  padding: 10px 30px;
  border-radius: 10px;
  border: solid 1px #e3e3e3;
  background-color: rgba(227, 227, 227, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#menu ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  list-style-type: none;
}

#menu ul:not(:first-child) > li > a {
  font-weight: lighter;
}

#menu ul > li > a {
  color: #454242;
}

Obrázky

Chtěla jsem mít u každého obrázku možnost popisku. Radu a pomoc jsem našla přes Google na stackoverflow.

Do složky _includes jsem tedy vložila soubor image.html s následujícím obsahem:

<figure class="image">
    <img src="{{ include.url }}" alt="{{ include.description }}">
    <figcaption>{{ include.description }}</figcaption>
</figure>

A vzhled obrázku určuje CSS. U mně vypadá takto:

img {
  max-width: 80%;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
}

figcaption {
  font-size: 14px;
  text-align: center;
  color: rgb(169, 167, 167);
}s

Vkládání obrázku u příspěvku pak vypadá třeba takto:

{% include image.html url="/assets/images/albanie/saranda/saranda-bistrica-beach.jpg" description="Saranda, Bistrica beach" %}

A výsledný obrázek:

Saranda, Bistrica beach
Saranda, Bistrica beach

V záhlaví jsem úplně zrušila nadpis (podle Minimy by to byl site.title) a tagline. Ani jedno jsem nepociťovala jako důležité tam dole a tagline jsem stejně nepoužívala a jeho přítomnost (i když byl prázdný) mi akorát rozhodila zarovnání site.description. Kdyžtak mrk na soubor zde.

Také jsem měla nějak rozhozené social media ikony. Po kontrole přes devtools (když na stránku klikneš pravým tlačítkem a dáš Inspect, tak se tam dostaneš) jsem zjistila, že social media má padding shora 5px.

CSS jsem upravila následovně:

.social-media-list > li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5%;
}

.contact-list li + li {
  padding-top: 5px;
}

Kam dál?

Nejdůležitější info pro to, abys mohl začít blogovat s Jekyll generátorem a GitHub Pages, máš k dispozici. Budu ráda, když se podělíš o výsledky na IG nebo Discordu 👍.

Do budoucna se tu možná rozepíšu i o liquid templating language (to je to v těch složených závorkách u Jekyllu), případně HTML nebo CSS.

Ale mezitím, jestli jsi zvědavý/á, mrkni třeba na Céčko!