Nová struktura blogů
Každý blog má vlastní podadresář ve složce blogy/,
pojmenovaný podle zkráceného jména blogu (slugu). Uvnitř je samotný soubor
blog-<slug>.html:
blogy/ martin-svihla/ blog-martin-svihla.html aikido/ blog-aikido.html …
../../. Odkaz na jiný blog jde do sousední složky přes ../.
| Z bloku v blogy/<slug>/ odkaz na… | Cesta |
|---|---|
| CSS, JS | ../../css/style.css, ../../js/main.js |
| sdílená fotka v hlavní složce | ../../fotky/nazev.jpg |
| stránky webu (index, blog, o-mně…) | ../../index.html, ../../blog.html |
| jiný blog (prev/next, sidebar) | ../<slug>/blog-<slug>.html |
z blog.html / index.html na blog | blogy/<slug>/blog-<slug>.html |
Kam s fotkami — tři možnosti
U každé fotky v blogu si vyber jednu ze tří cest podle toho, kde fotka je:
-
Vlastní fotky u blogu — dej je do
blogy/<slug>/fotky/a odkazuj relativněfotky/nazev.jpg. Nejčistší pro fotky, které patří jen tomuhle blogu. -
Sdílená fotka z hlavní složky (už existuje na webu / v galerii) —
odkazuj
../../fotky/nazev.jpg. -
Odkaz na Google Photos — vlož přímou URL snímku
(
https://lh3.googleusercontent.com/…=w1600). Funguje odkudkoli, nic se nenahrává.
=w1600 nebo =w2048.
Generátor — nejrychlejší cesta
Vyplníš formulář, generátor sestaví hotové HTML se správnými cestami
(../../ k assetům, prev/next na ../<slug>/…, canonical na
novou URL) a nabídne soubor blog-<slug>.html ke stažení.
Po stažení souboru:
- Vytvoř složku
blogy/<slug>/a nahraj do ní staženýblog-<slug>.html(slug = část názvu zablog-, bez.html). - Vlastní fotky blogu dej do
blogy/<slug>/fotky/(viz tři možnosti výše). - Nalinkuj blog na web — viz Nalinkovat na web.
blog-aikido.html) — generátor sám doplní cestu na
../aikido/blog-aikido.html.
Ručně ze šablony (pokročilé)
Pro nestandardní úpravy použij šablonu blog-VZOR.html (jedna fotka)
nebo blog-VZOR-jednaFotka.html. Šablony zůstávají v kořeni a jsou
root-relativní — proto je po přesunu do blogy/<slug>/
potřeba cesty přepsat.
- Zkopíruj šablonu (nikdy needituj originál).
- Vytvoř složku
blogy/<slug>/a kopii pojmenujblog-<slug>.html(malá písmena, bez diakritiky, pomlčky). - Přepiš cesty v souboru:
css/→../../css/,js/→../../js/,fotky/→../../fotky/(pokud sdílené), a stránkyindex.html/blog.html/o-mne.html/kontakt.html→../../…. - Vyplň
<title>,<meta description>,canonical(=https://plachyfotograf.cz/blogy/<slug>/blog-<slug>.html), titulní fotku (hero), datum, kategorii, nadpis. - Napiš text a vlož fotky (viz tabulka formátování).
- Prev/next a sidebar na jiné blogy:
../<slug>/blog-<slug>.html.
css//fotky/ na ../../… — blog pak nemá styl nebo fotky.
Pokud nechceš nic přepisovat, použij generátor.
Nalinkovat blog na web
Odkazy z hlavních stránek do blogu vedou do podsložky:
blogy/<slug>/blog-<slug>.html.
1. Karta na blog.html — nejnovější nahoře:
<article class="blog-card reveal"> <a href="blogy/slug/blog-slug.html" class="blog-card-img"> <img src="fotky/titulni.jpg" alt="Popis" loading="lazy" /> </a> <!-- titulek, perex a „Číst dál" odkazují na stejnou cestu blogy/slug/blog-slug.html --> </article>
blog.html (v kořeni), takže její src fotky je
root-relativní (fotky/titulni.jpg), ne ../../.
Pravidlo ../../ platí jen uvnitř souboru blogu.
2. Blog strip na index.html (sekce id="blog-strip") — odkaz a fotka stejně: href="blogy/<slug>/blog-<slug>.html", src="fotky/titulni.jpg".
3. Sidebar v ostatních blozích — protože jsou taky v blogy/<slug>/, odkazují přes ../<slug>/blog-<slug>.html.
Přehled formátování textu
Bloky dostupné v šabloně i ve výstupu generátoru reportáže:
| HTML třída / tag | Co dělá — kdy použít |
|---|---|
| <p class="post-lead"> | Velký kurzívní úvod. Vždy jako první blok, jen jednou. |
| <p> | Normální odstavec. Hlavní tělo textu. |
| <h2> | Mezititulek pro delší příspěvky. |
| <blockquote class="post-quote"> | Citát / vytažená myšlenka (zlatohnědý rámeček). |
| <div class="post-infobox"> | Informační box — technické detaily, poznámky. |
| <figure class="post-img-full lb-trigger"> | Jedna velká fotka přes šířku. Kliknutím lightbox. |
| <div class="post-img-pair / -trio / -grid6"> | 2 / 3 / 6 fotek vedle sebe (každá <figure class="lb-trigger">). |
| <nav class="post-nav"> | Prev/next. Odkazy na jiné blogy přes ../<slug>/…. |
<figure> s třídou lb-trigger se přidá do lightboxu
(klik = zvětšení, šipky ←→ listují). Bez ní lightbox nefunguje.
fotky/… (vlastní u blogu) · ../../fotky/… (sdílené) · absolutní URL z Google Photos.
Rychlý checklist
- Soubor je
blogy/<slug>/blog-<slug>.html(bez diakritiky a mezer). - Cesty k assetům jsou
../../(css, js, sdílené fotky, stránky webu) — nebo to udělal generátor. - Vyplněn
<title>,<meta description>acanonicalna novou URL. - Titulní fotka (hero), datum a kategorie nastaveny.
- Všechny fotky mají třídu
lb-trigger; velikost 1600–2048 px. - Prev/next a sidebar odkazují na
../<slug>/blog-<slug>.htmlexistujících blogů. - Karta přidána na
blog.html(nahoře) s odkazemblogy/<slug>/…. - Blog strip na
index.htmlukazuje nejnovější příspěvek. - Sousední blogy mají aktualizovaný prev/next a sidebar.