Infobox: 3 stĺpce — formát, pravidlá a príklady

Trojstĺpcový infobox prezentuje presne tri paralelné body pod jednou spoločnou myšlienkou. Je užitočný, keď čitateľ potrebuje vidieť skutočný trojčlenný model naraz: tri zodpovednosti, tri kritériá, tri výsledky alebo tri koordinované pracovné prúdy. Stĺpce sľubujú rovnaký redakčný status, preto každý bod musí vykonávať rovnaký druh práce v porovnateľnej hĺbke.

Tento vykreslený prvok má jeden spoločný nadpis a presne tri položky. Všetky tri nadpisy sú podstatné menné frázy, všetky tri telá opisujú druh dôvery a ikony dodávajú rytmus bez prenášania významu. Odstráňte ikony a model zostáva nezmenený.

Prečo na tomto prvku záleží

Čitatelia nevnímajú hustý odsek ako model len preto, že obsahuje tri vety. Prvú vetu si musia zapamätať, rozpoznať prechod k druhej a rozhodnúť sa, či je tretia rovnocenná, podradená alebo len doplnková. Trojstĺpcový infobox robí vzťah explicitným. Spoločný nadpis pomenúva, čo zostáva konštantné; tri ohraničené položky ukazujú úplné rozdelenie; vyvážená vizuálna váha hovorí čitateľom, aby preskúmali každú položku predtým, než model pochopia.

Toto pomáha prostredníctvom chunkovania, teda zoskupovania súvisiacich informácií do zvládnuteľných jednotiek. Tri stačia na odhalenie systému bez vytvárania katalógu. Čitateľ môže prejsť tri nadpisy, vstúpiť cez bod, ktorý je preňho najrelevantnejší, a potom porovnať úroveň podrobností. Prvok je obzvlášť účinný, keď by próza inak opakovala rovnaký subjekt trikrát alebo skryla rozdiel v dlhej vete.

Strojová extrahovateľnosť je schopnosť softvéru izolovať jednotku obsahu bez straty jej témy alebo vzťahov. Typovaný trojstĺpcový infobox odhaľuje jednu rodičovskú tému a tri usporiadané deti. Vyhľadávacie systémy, obsahové API a nástroje na AI vyhľadávanie dokážu zachovať spoločný nadpis, nadpis každej položky, každé telo a poradie v zdroji namiesto toho, aby museli hádať, či odsek obsahuje zoznam. Explicitné nadpisy tiež poskytujú každej položke užitočný vyhľadávací štítok.

Extrakcia funguje len vtedy, keď sú slová sebestačné. „Technická dôvera znamená, že sa stránka vykreslí a odkazy fungujú“ môže prežiť mimo rozloženia. „Tretia časť sa o to stará“ nie. Štruktúra tiež nedokáže vyrobiť tretiu myšlienku. Postupujte podľa pravidiel písania prvkov : stanovte obsahový model pred výberom renderera. Požiadavka špecifická pre prvok na presne tri položky má prednosť pred akýmkoľvek všeobecným povolením na opakovateľné položky.

Kedy ho použiť

Použite trojstĺpcový infobox len vtedy, keď prejdú všetky testy:

1. Jeden spoločný nadpis môže presne riadiť celý prvok.
2. Téma sa prirodzene delí na presne tri body.
3. Všetky tri body odpovedajú na rovnakú implicitnú otázku.
4. Každý bod si zaslúži podobnú hĺbku, dôkazy a vizuálnu váhu.
5. Každý bod možno vysvetliť v jednom alebo dvoch krátkych odsekoch bez vnorenej štruktúry.

Silné použitia zahŕňajú tri komponenty rámca, tri zodpovednosti vlastníka, tri dimenzie kvality, tri výsledky z jednej schopnosti alebo tri kontroly vykonávané v rovnakej fáze. Vzťah môže byť doplnkový, sekvenčný alebo kategorický, ale musí byť uvedený. Ak autor nedokáže dokončiť vetu „Tieto tri patria k sebe, pretože…,“ ide pravdepodobne o vizuálnu výplň.

Najčastejšia takmer chyba je skutočný pár plus slabá tretia položka. „Ľudia, proces a viac“ sa nestáva trojčlenným modelom len preto, že rozloženie má tri miesta. Rovnako ani „Rýchlosť, presnosť a hodnota,“ keď článok definuje len rýchlosť a presnosť a hodnotu považuje za ich výsledok. Ponechajte pár, vysvetlite výsledok v próze alebo vyberte iný prvok.

Nepoužívajte tento infobox na tri sekvenčné inštrukcie. Stĺpce oslabujú postupnosť, najmä keď sa pri úzkych šírkach ukladajú pod seba; použite zoznam krokov, keď záleží na poradí dokončenia. Nepoužívajte ho na tri produkty hodnotené podľa viacerých kritérií; použite porovnávaciu tabuľku. Nepoužívajte ho na zoznam, ktorý dnes náhodou obsahuje tri fakty, ale pri ďalšej aktualizácii môže získať štvrtý. Fixný trojstĺpcový kontrakt je vhodný len vtedy, keď je tri inherentnou súčasťou myšlienky.

Iné takmer chyby zahŕňajú nadpis plus dve skutočné položky, jednu položku obsahujúcu všetky výhrady, tri propagačné tvrdenia bez mechanizmu alebo dôkazov a jeden segment publika rozdelený na tri ľubovoľné demografické kategórie. V každom prípade rozloženie nadhodnocuje vzťah, ktorý si obsah nezaslúži.

Kam ho umiestniť

Umiestnite infobox hneď za odsek, ktorý uvádza rodičovskú myšlienku. Tento odsek by mal vysvetliť, prečo trojčlenný pohľad pomáha; spoločný nadpis potom pomenúva model a položky definujú jeho časti. Za prvkom nasledujte interpretáciou, dôkazmi alebo prechodom, ktorý sa vzťahuje na skupinu ako celok.

Môže sa objaviť priamo pod H2, keď tento nadpis poskytuje spoločný nadpis a žiaden odsek ani komponent nie je medzi nimi. Môže tiež nasledovať po definícii, keď tri položky rozbaľujú dimenzie daného termínu. Nesmie prerušiť tvrdenie a jeho citáciu, varovanie a podmienku, ktorá ho spúšťa, krok a jeho očakávaný výsledok ani vetu, ktorá uvádza bežný zoznam. Tieto vzťahy musia zostať súvislé.

Neumiestňujte ho hneď vedľa inej trojstĺpcovej mriežky, cenovej tabuľky, ovládacieho prvku kariet, balíčka kariet ani trojmožnostnej výzvy na akciu. Opakovaná geometria spôsobuje, že redakčné vysvetlenie vyzerá interaktívne alebo komerčne a núti čitateľov odvodzovať, ktoré zoskupenie je dôležité. Vložte vysvetľujúcu prózu alebo vyberte jednu štruktúru, ktorá nesie celý vzťah. Vyhnite sa umiestneniu druhého infoboxu v rovnakej krátkej sekcii; opakovanie mení zámerný model na dekoratívny nábytok.

Na dlhej stránke je viacero trojstĺpcových infoboxov prijateľných len pod rôznymi nadpismi a pre skutočne odlišné modely. Nemali by sa používať ako predvolené spracovanie pre každé trio v kópii.

Anatómia

Anatómia obsahuje jednu rodičovskú oblasť a tri opakované oblasti položiek. Označená snímka obrazovky by mala identifikovať sémantické časti, nie farbu, polomer alebo medzery, aby špecifikácia prežila redesign.

1. Vonkajšie ohraničenie: Zoskupuje nadpis a všetky tri položky ako jednu redakčnú jednotku.
2. Spoločný nadpis: Pomenúva myšlienku rozdelenú tromi položkami. Nie je to štvrtá položka.
3. Voliteľné miesto pre ikonu: Obsahuje jednu schválenú dekoratívnu ikonu na položku; všetky tri miesta sa používajú spolu alebo sa vynechávajú spolu.
4. Nadpis položky: Pomenúva jedného člena množiny jazykom paralelným s ostatnými dvoma nadpismi.
5. Telo položky: Vysvetľuje tohto člena v zosúladenom rozsahu a zostáva zmysluplný pri extrakcii.
6. Vzťah rozloženia: Používa tri rovnaké stĺpce tam, kde to priestor umožňuje, a na úzkych obrazovkách ukladá položku jedna, položka dva, potom položka tri vertikálne.

Autori riadia nadpisy, telá, tokeny ikon a poradie v zdroji. Renderer riadi šírku stĺpcov, medzery, zlomové body, okraje, pozadia a typografiu.

Príklady dizajnu

Existuje jeden sémantický prvok so štyrmi podporovanými variantmi a jedným responzívnym stavom. Žiadny nemení záväzný kontrakt presne troch položiek.

Predvolený variant s nadpismi: Preferovaný pre vysvetľujúci obsah. Spoločný nadpis a tri nadpisy položiek robia hierarchiu explicitnou; nie sú prítomné žiadne ikony.

Variant s ikonami: Pridáva jednu dekoratívnu ikonu ku každej položke. Ikony musia zdieľať rodinu, veľkosť a vizuálnu váhu. Zmes ikony, fotografie a prázdneho miesta nie je podporovaná.

Kontextový variant nadpisu: Bezprostredne predchádzajúci H2 poskytuje spoločný nadpis. Toto je povolené len vtedy, keď kontajner dokáže programovo odkazovať na tento viditeľný nadpis a nič neoddeľuje nadpis od prvku.

Kompaktný variant: Vhodný pre tri krátke definície alebo kontroly. Každé telo je stále úplná veta, nie slogan alebo fragment štítku.

Stav pre úzke zobrazenie: Položky sa ukladajú vertikálne v autorskom poradí. Žiadne znenie nesmie závisieť od ľavej, strednej alebo pravej pozície.

Parametre

Kontrakt oddeľuje autorský význam od prezentácie. Responzívne stĺpce a štýlovanie ikon patria rendererovi; obsahové polia a sémantické poradie patria zdroju.

Nadpis je povinný, pokiaľ bezprostredne predchádzajúci nadpis neposkytuje rovnakú rodičovskú tému a neoznačuje kontajner. Obsah položky môže obsahovať zvýraznenie, inline kód a jeden relevantný textový odkaz. Nesmie obsahovať vnorené nadpisy, tabuľky, zoznamy dlhšie ako tri krátke odrážky, médiá, formuláre, výzvy na akciu ani iný komponent.

Syntaxa a príklady kódu

Všetky tri zápisy zachovávajú rovnaký nadpis, tri usporiadané položky, voliteľné tokeny ikon a telá. Prenosný Markdown direktív je kanonický zdroj. Hugo a WordPress sú adaptérové kontrakty a musia odmietnuť akýkoľvek iný počet položiek ako tri.

Prenosný Markdown direktív

:::infobox-3-columns
## A publishable page needs three kinds of confidence

::item{icon="reader"}
### Reader confidence

The answer is clear, complete, and specific enough to guide a decision or action.
::

::item{icon="editorial"}
### Editorial confidence

Claims are supported, terminology is consistent, and every required qualification remains attached.
::

::item{icon="technical"}
### Technical confidence

The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
::
:::

Prvý rodičovský nadpis sa mapuje na title. Každý ::item mapuje svoj prvý nadpis na item.title, zvyšné telo na item.content a voliteľný atribút icon na schválený token ikony. Vyžadujú sa tri vnorené položky, aj keď sa rozloženie ukladá vertikálne.

Mapovanie Hugo shortcode

{{< infobox-3-columns title="A publishable page needs three kinds of confidence" variant="icons" >}}
  {{< infobox-item title="Reader confidence" icon="reader" >}}
  The answer is clear, complete, and specific enough to guide a decision or action.
  {{< /infobox-item >}}
  {{< infobox-item title="Editorial confidence" icon="editorial" >}}
  Claims are supported, terminology is consistent, and every required qualification remains attached.
  {{< /infobox-item >}}
  {{< infobox-item title="Technical confidence" icon="technical" >}}
  The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Toto je špecifikácia prenosného adaptéra, nie prísľub, že aktuálna stránka registruje tieto shortcody. Používa len pomenované parametre, zachováva poradie v zdroji, validuje tokeny ikon a zlyhá pri autorizačnej validácii namiesto tichého vypustenia alebo zabalenia extra položky.

WordPress blok

<!-- wp:amicited/infobox-3-columns {"title":"A publishable page needs three kinds of confidence","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Reader confidence","icon":"reader"} -->
  <p>The answer is clear, complete, and specific enough to guide a decision or action.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Editorial confidence","icon":"editorial"} -->
  <p>Claims are supported, terminology is consistent, and every required qualification remains attached.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technical confidence","icon":"technical"} -->
  <p>The page renders, links resolve, metadata maps correctly, and machines can recover its structure.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

Editor by mal zobraziť tri fixné sloty pre položky. Môže autorovi umožniť zmeniť poradie položiek, ale nesmie ponúkať neobmedzený vkladač, ktorý by umožnil štvrté dieťa alebo nesúvisiaci blok.

Príklady

Dobrý príklad: skutočný trojčlenný operačný model

Toto funguje, pretože spoločný nadpis definuje jeden model zodpovednosti, tri role sú odlišné a každé telo odpovedá na rovnakú otázku: čo musí tento vlastník overiť? Položky používajú paralelné podstatné menné nadpisy a porovnateľnú hĺbku. Žiadna neexistuje len na dokončenie riadku.

Zlý príklad: pár rozšírený na tri

Tri spôsoby, ako zlepšiť vstupnú stránku

Vyjasnite ponuku: Pomenujte publikum, problém, mechanizmus a očakávaný výsledok jazykom, ktorý čitateľ môže overiť.

Dokážte tvrdenie: Pridajte relevantné dôkazy, vysvetlite ich limity a udržujte citácie pripojené k tvrdeniam, ktoré podporujú.

Oživte to: Pridajte atraktívne farby a čokoľvek iné, čo pôsobí pútavo.

Prvé dve položky sú redakčné požiadavky s pozorovateľnými výstupmi. Tretia je vágna vizuálna rada, nemá zodpovedajúci štandard dôkazov a robí inú prácu. Bola pridaná, pretože dizajn požadoval tri stĺpce, nie preto, že model má tri časti. Odstráňte tretiu položku a použite dvojčlennú štruktúru alebo definujte skutočnú tretiu požiadavku, ako je zníženie interakčného trenia, a podporte ju v rovnakej hĺbke.

Schema markup a prístupnosť

Trojstĺpcový infobox nemá špeciálny typ Schema.org a nevytvára samostatné štruktúrované dáta. Jeho text zostáva súčasťou obklopujúceho Article, TechArticle alebo WebPage, keď daná stránka spĺňa podmienky. Neoznačujte deti ako ItemList len preto, že sú tri, a neodvodzujte HowTo z názvov znejúcich ako postupnosť. Poskytujte schema na úrovni stránky len vtedy, keď základný obsah nezávisle spĺňa požiadavky tejto schémy.

Použite jeden označený sémantický kontajner s tromi detskými sekciami. Použite <section>, keď je model súčasťou hlavného argumentu, a <aside>, keď je doplnkový. Prepojte viditeľný spoločný nadpis pomocou aria-labelledby a dajte každému dieťaťu skutočný nadpis na správnej úrovni dokumentu. Tučný text nie je náhradou nadpisu.

Poradie v zdroji je poradie čítania. Čítačky obrazovky, klávesová navigácia, skopírovaný text a mobilné rozloženia musia naraziť na položku jedna, položka dva, potom položka tri. CSS môže vytvárať stĺpce, ale nesmie používať pravidlá usporiadania na ich preskupenie. Nikdy nepíšte „vľavo“, „v strede“ ani „vpravo“; tieto pozície zmiznú, keď sa položky naskladajú vertikálne.

Ikony sú dekoratívne, pokiaľ nesprostredkúvajú informácie, ktoré nie sú prítomné v nadpise. Dekoratívne ikony používajú aria-hidden="true" v HTML alebo prázdny alternatívny text pri vykreslení ako obrázky. Ak je ikona informatívna, jej význam musí byť tiež viditeľný v texte; prístupný názov skrytý pred zrakom nepomáha čitateľom, ktorí stránku vidia, ale nedokážu interpretovať symbol. Farba a tvar ikony nesmú byť nikdy jediným rozlíšením medzi položkami.

Pri úzkych šírkach naskladajte položky skôr, než bude text stiesnený. Podporujte zväčšenie textu bez orezania, prekrývania alebo horizontálneho posúvania na úrovni stránky. Snímka obrazovky troch stĺpcov nie je náhradou za responzívny sémantický obsah.

Pravidlá písania

Začnite vetou: „Táto myšlienka má tri časti: X, Y a Z.“ Veta musí zostať presná po definovaní každej časti. Ak je jedna časť výsledkom ostatných dvoch, širokým súhrnom alebo malým príkladom, model nie je skutočne paralelný.

Použite presne tri položky. Každý nadpis udržujte na 2–7 slov a použite rovnaký gramatický vzor: tri podstatné menné frázy, tri otázky alebo tri časové označenia. Každé telo udržujte podľa možnosti na 25–80 slov a nikdy nepresahujte 110. Rozdiel jednej vety je prijateľný. 25-slovná položka vedľa dvoch 100-slovných položiek vyžaduje úpravu alebo inú štruktúru.

Zosúladená hĺbka znamená porovnateľnú vysvetľujúcu prácu, nie výplň. Každé telo by malo odpovedať na rovnakú implicitnú otázku, obsahovať podobnú úroveň konkrétnosti a uvádzať dôsledky na podobnej úrovni. Ak jedna položka skutočne potrebuje viac vysvetlenia, presuňte model do bežných sekcií, kde sa dĺžka môže čestne líšiť.

Používajte priamy, neutrálny jazyk. Nadpisy by mali identifikovať význam, nie pozíciu: „Objav / Produkcia / Recenzia“ je silnejšie ako „Prvý / Druhý / Tretí.“ Sekvenčné označenia sú prijateľné len vtedy, keď každá položka sumarizuje fázu, nie inštruuje čitateľa krokmi. Vyhnite sa superlatívom, nepodloženým tvrdeniam o výhodách a trom sloganom maskovaným ako vysvetlenie.

Ikony sú voliteľné. Použite všetky tri alebo žiadnu, vyberte ich z jednej schválenej rodiny a udržujte ich vizuálne konzistentné. Nevyberajte ikony pred nadpismi, nepoužívajte emoji ako produkčné tokeny ikon a nenechajte ikonu nahradiť zmysluplný nadpis položky.

Nikdy nedávajte do prvku toto:

• Dve alebo štyri položky, prázdnu položku alebo „rôzny“ tretí slot.
• Detailný postup, porovnávaciu maticu, cenový plán, formulár, karusel s referenciami ani propagačný banner.
• Vnorené H2 sekcie, ďalší infobox, karty, akordeónové panely, video ani galériu obrázkov.
• Dlhé zoznamy s odrážkami, zoznamy zdrojov, právne vylúčenia zodpovednosti, bezpečnostné varovania ani kvalifikácie oddelené od tvrdenia, ktoré riadia.
• Tri nesúvisiace odkazy naštýlované ako rovnocenné výzvy na akciu.

Keď obsah presiahne tieto limity, povýšte tri položky na bežné sekcie stránky. Fixné rozloženie by nikdy nemalo byť dôvodom na kompresiu podstatných nuancií alebo skrytie kvalifikácie.

Typy príspevkov, ktoré ho používajú

Pole frontmatter postTypes je registrovaná množina použitia. Identifikuje formáty, ktoré často obsahujú zmysluplný trojčlenný model; nevyžaduje infobox, keď zdroj nemá skutočné trio.

Kontrolný zoznam QA

• Jedna rodičovská myšlienka: Presný spoločný nadpis vysvetľuje, prečo všetky tri položky patria k sebe.
• Presne tri položky: Zdroj a vykreslený výstup obsahujú tri kompletné deti — nikdy dve, štyri ani prázdne miesto.
• Skutočné trojčlenné rozdelenie: Odstránenie akejkoľvek položky robí model neúplným; žiadna nie je výplň, výsledok ani kategória „rôzne“.
• Paralelné nadpisy: Všetky nadpisy položiek používajú rovnaký gramatický tvar a identifikujú význam, nie pozíciu na obrazovke.
• Zosúladená hĺbka: Každé telo odpovedá na rovnakú implicitnú otázku s porovnateľným detailom a dôkazmi.
• Užitočné umiestnenie: Prvok nasleduje po svojom uvádzajúcom kontexte a neoddeľuje tvrdenie, varovanie, krok ani citáciu od závislého obsahu.
• Bezpeční susedia: Nie je susedom inej trojstĺpcovej mriežky, cenového bloku, ovládacieho prvku kariet ani trojmožnostnej CTA.
• Extrahovateľné znenie: Spoločný nadpis a nadpisy položiek pomenúvajú svoje témy; telá sa nespoliehajú na blízke zámená ani vizuálnu pozíciu.
• Konzistencia ikon: Všetky tri položky používajú schválené ikony z jednej rodiny, alebo žiadna položka nepoužíva ikonu; význam zostáva v texte.
• Responzívne poradie: Mobil ukladá položku jedna, položka dva, potom položka tri bez orezania, horizontálneho posúvania alebo CSS preskupenia.
• Prístupná sémantika: Kontajner má viditeľný programový štítok, nadpisy položiek sú nadpisy a dekoratívne ikony sú skryté pred asistenčnými technológiami.
• Obmedzenia obsahu: Telá zostávajú v rámci dvoch krátkych odsekov a neobsahujú žiadny vnorený komplexný komponent, postup ani propagačný ovládací prvok.
• Parita zápisu: Prenosný Markdown, Hugo a WordPress zachovávajú rovnaký nadpis, tri položky, tokeny ikon, telá a poradie.
• Schema zdržanlivosť: Renderer neodvodzuje zoznamový, porovnávací ani návodový markup z trojstĺpcovej prezentácie.

Recenzent by mal prvok zamietnuť, keď zlyhá počet položiek, skutočná trojčlenná logika alebo zosúladená hĺbka. Toto sú chyby obsahového modelu; vizuálne vyleštenie ich nedokáže opraviť.

FAQ

Položky FAQ v frontmatter pokrývajú fixný počet položiek, zosúladenú hĺbku, voliteľné ikony, mobilné poradie a zdržanlivosť voči schéme. Akadémia šablóna dokáže tieto schválené odpovede vykresliť bez ich duplikovania v tele.