HugoPress reference site

Dvojjazyčný web bez bolesti

Česká a anglická verze párované přes translationKey, přepínač jazyků, který prostě funguje, a žádné duplicitní šablony.

Tomáš Skočdopole Tomáš Skočdopole 1 min čtení
Dvojjazyčný web bez bolesti

Vícejazyčnost bývá ve většině systémů zdroj utrpení — duplicitní šablony, rozjeté překlady, rozbité odkazy mezi jazyky. Hugo to řeší překvapivě elegantně a HugoPress jen dotahuje pár detailů.

Jeden layout, dva jazyky

Data sekce žijí ve front matteru stránky, layout je sdílený. Stejná šablona layouts/blog/list.html čte .Params.* a vykreslí cs i en variantu — žádná duplikace logiky.

Párování přes translationKey

Stačí dát oběma verzím stejný translationKey:

# content/cs/blog/_index.md
translationKey: blog
# content/en/blog/_index.md
translationKey: blog

Hugo z toho automaticky vyrobí dvojici a přepínač jazyků v hlavičce odkáže na správný protějšek. Když překlad chybí, přepínač elegantně degraduje na domovskou stránku druhého jazyka.

Texty přes i18n

Štítky v šabloně (datum, „číst dál“, „související články“) nikdy nepíšeme natvrdo — jdou přes {{ i18n "klíč" }} a doplní se do i18n/cs.toml i i18n/en.toml. Obsah článků je naopak autorovaný zvlášť pro každý jazyk, aby zněl přirozeně, ne strojově přeloženě.

Pravidlo palce: štítky přes i18n, obsah ručně per jazyk.

Výsledek? Přidání nového jazyka je otázka nové složky content/<lang>/ a jednoho sloupce do překladových souborů.

Všechny články
Tomáš Skočdopole

Autor

Tomáš Skočdopole

Senior engineer, INTEVIA

Staví headless publikační pipeline a píše o tom, jak proměnit obsah v rychlý a odolný statický web.

Související články

Architektura Hugo Headless

Jak postavit headless CMS nad Hugem

Klasické monolitické CMS spojuje psaní obsahu, jeho ukládání i samotné vykreslování do jednoho běžícího procesu. To je pohodlné, dokud nezačnete řešit výkon, bezpečnost a škálování. Headless přístup tahle tři odpovědnosti rozpojí — a přesně na tom stojí HugoPress. Tři vrstvy, tři odpovědnosti Editor — autoři píší v blokovém editoru (Editor.js). Výstupem je čisté strukturované JSON, ne změť HTML z WYSIWYGu. Doménová vrstva — CMS převede bloky na hotové HTML pomocí BlockRenderingPipeline. Theme samotný o Editor.js vůbec neví. Doručení — vyrenderovaný obsah se zapíše jako content/<lang>/... a commitne do Gitu. Hugo z něj postaví statický web. Theme nezná Editor.js. Všechny renderery sedí na straně CMS — díky tomu je šablona hloupá, přenositelná a snadno testovatelná.

Číst dál
Výkon CDN Hugo

Proč statický web vyhrává na hraně sítě

Když uživatel otevře dynamickou stránku, server typicky sáhne do databáze, sestaví HTML a teprve pak odpoví. U statického webu je tahle práce hotová už během buildu — k requestu zbývá jen poslat hotový soubor. Co se ušetří Round-trip do databáze — neexistuje, obsah je už v HTML. Čas běhového prostředí — žádný PHP/Node proces na kritické cestě. Vzdálenost — soubor leží v CDN POPu pár desítek kilometrů od čtenáře. Měřitelný dopad Metrika Dynamicky Staticky na CDN TTFB ~280 ms ~25 ms LCP (medián) 2,4 s 0,9 s Náklady na request nezanedbatelné ~nula Nejrychlejší dotaz do databáze je ten, který se nikdy nemusí provést.

Číst dál
Redakce Workflow Git

Redakční tok, který končí commitem

Skvělá architektura je k ničemu, pokud se v ní redakci špatně pracuje. Proto jsme redakční tok HugoPressu postavili kolem tří jednoduchých stavů. Tři stavy článku Koncept — autor píše v editoru, ukládá kdykoliv, nic se nepublikuje. Náhled — jedním kliknutím se obsah vyrenderuje a nasadí na náhledový web, identický s produkcí. Publikováno — schválený obsah se commitne do produkčního repozitáře a spustí se build. Náhled = produkce Náhled běží nad stejnou šablonou i stejným pipeline jako ostrý web. Co vidíte v náhledu, to dostanou čtenáři — žádná překvapení při nasazení.

Číst dál