Titulek karty
Obsah karty.
Jak psát moudra
Jak tvořit obsah
Section titled “Jak tvořit obsah”K tvoření obsahu pro klobouk si ve většině případů vystačíte jen s textovým, nebo markdown editorem.
Pro tvorbu “klobouku” je použít framework Starlight, který nám umožnuje generovat stránky s návody z .md, nebo .mdx souborů.
Většinu formátování tak dokážeme zajistit snadno v textu pomocí značkovacího jazyka Markdown.
Pro případy kdy si Markdownem nevystačíme však umožňuje i použití vlastních komponent, nebo přímé použití HTML.
Formátování textu
Section titled “Formátování textu”Odstavec
Section titled “Odstavec”Odstavec v md není potřeba nijak zvlášť označovat. Jedná se o jeden či více souvislých řádku textu. Další odstavec oddělujeme jedním či více “prázdnými řádky” (“řádkem obsahujícím pouze mezery či taby).
Prvníodstavectextu
Druhý odstavec textuTučný text je možné docílit obalením daného textu dvojicí asterisků či podtržítek **tučný** bude vypadat stejně jako __text__
Kurzíva
Section titled “Kurzíva”Text Kurzívou je možné docílit obalením daného textu jedním asteriskem či podtržítkem *Text* bude vypadat stejně jako _kurzívou_
Proškrtnutí
Section titled “Proškrtnutí”Proškrtnutí textu je možné docílit obalením daného textu dvojicí znaku “tilda”. ~~Proškrtnutý text~~
Citace
Section titled “Citace”Blok citace v textu označujeme ostrou závorkou na začátku každého řádku, který má citace obsahovat.
Pro vnořenou citaci je možné znak opakovat.
> Blok citace v textu označujeme ostrou závorkou> na začátku každého řádku, který má citace obsahovat.>> Pro vnořenou citaci je možné znak opakovat.Zvýraznění “kódu”
Section titled “Zvýraznění “kódu””V textu můžeme zvýraznit znaky neproporciálním písmem obalením do zpětných uvozovek. znaky `neproporciálním` písmem
Pro označení bloku textu se využívá obalením do trojice zpětných uvozovek. Pozor oproti příkladu je potřeba aby každá trojice byla na samostatném řádku.
```Lorem ipsum dolor whatever```Nadpis
Section titled “Nadpis”Hlavičky H1 až H6 označíme znakem hash # před nadpisem. Kdy počet použitých znaků udává úroveň nadpisu.
# Nadpis H1## Nadpis H2### Nadpis H3#### Nadpis H4##### Nadpis H5###### Nadpis H6Pro nadpis první a druhé úrovně je možné ještě alternativně využít podtržením znaky = a -
Nadpis H1=========
Nadpis H2---------Seznamy
Section titled “Seznamy”Nečíslovaný seznam
Section titled “Nečíslovaný seznam”Odrážky nečíslovaného seznamu můžeme vytvářet pomlčkou nebo asteriskem na počátku řádku. Více úrovní je možné využít použitím tabulátoru.
* PříkladNějakého* Nečíslovaného - Seznamu- Příklad Nějakého
- Nečíslovaného
- Seznamu
Číslovaný seznam
Section titled “Číslovaný seznam”Číslovaný seznam vytváříme uvedením čísla tečky a mezery na počátku řádku. Samotné číslo se nezohledňuje.
1. První1. Druhý 1. Další úroveň * Další nečíslovaná úroveň- První
- Druhý
- Další úroveň
- Další nečíslovaná úroveň
- Další úroveň
Číslované a nečíslované seznamy můžeme pro různé úrovně kombinovat. Viz předchozí příklad.
Checklist
Section titled “Checklist”- A
- B
- A
- B
- C
- [ ] A- [ ] B- [x] A- [x] B- [x] COdkaz se do textu vkládá kombinací dvojice hranatých a kulatých závorek. První obsahuje text odkazu a druhý samotný link.
[Odkaz](http://www.zvb.cz)Relativní odkazy můžeme využívat na obsah v rámci klobouku.
[Relativní odkazy](../../guides/new-players/popis-herniho-okna/)Reference
Section titled “Reference”Příklad věty s referencí. 1
Příklad věty s referencí. [^1]
[^1]: Toto je reference z příkladu.Obrázek
Section titled “Obrázek”Obrázky mají podobnou notaci jako odkazy. Předchází je vykřičník a text v hranatých závorkách by měl být popisem obrázku.
Tabulka
Section titled “Tabulka”| Hlavička vlevo | Hlavička vpravo | Hlavička střed ||----------------|----------------:|:--------------:|| Obsah vlevo | Obsah vpravo | Obsah střed || Obsah vlevo | Obsah vpravo | Obsah střed || Obsah vlevo | Obsah vpravo | Obsah střed || Hlavička vlevo | Hlavička vpravo | Hlavička střed |
|---|---|---|
| Obsah vlevo | Obsah vpravo | Obsah střed |
| Obsah vlevo | Obsah vpravo | Obsah střed |
| Obsah vlevo | Obsah vpravo | Obsah střed |
Rozdělovač
Section titled “Rozdělovač”Rozdělovač textu vkládáme trojicí znaku pomlčky.
---
Rozdělovač textu vkládáme trojicí znaku pomlčky
---Barevným boxíkům, kterých už jste si mohli všimnout výše, budeme říkat aside.
Notace pro jejich použití nění součástí markdownu a proto se vám mimo klobouk hezky nezobrazí.
Starlight umožňuje čtyři typy Aside a to tip, note, caution a danger, které se liší barvou, ikonkou a defaultním textem.
Obsahem Aside může být libovolný markdown obsah, ale nejlépe se hodí na kratší poznámky a informace.
Aside je možné využít i s custom nadpisem. Ten je potřeba dát do hranatých závorek ihned za typ.
:::tip:::note:::caution:::danger:::tip[Tip s custom nadpisem]Příklad obsahu :::Komponenty
Section titled “Komponenty”Komponenty jsou přepoužitelné UI funkce, které je možné využívat v rámci mdx dokumentů. Některé z nich jsou již součástí Starlight. Další si možná vytvoříme.
Pro použití komponenty v rámci dokumentu je potřeba ji nějdříve importovat na začátku dokumentu (ovšem až po frontmatter sekci).
---title: Welcome to my docs---
import SomeComponent from '../../components/SomeComponent.astro';import AnotherComponent from '../../components/AnotherComponent.astro';
<SomeComponent prop="something" />
<AnotherComponent> Components can also contain **nested content**.</AnotherComponent> Polévka, Kaše, Maso
Džus, Víno, Čaj
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="Jídlo">Polévka, Kaše, Maso</TabItem> <TabItem label="Pití">Džus, Víno, Čaj</TabItem></Tabs>Karta a karetní mřížka
Section titled “Karta a karetní mřížka”import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
<Card title="Titulek karty">Obsah karty.</Card>
<CardGrid> <Card title="Hvězdy" icon="star"> Sirius, Vega, Betelgeuse </Card> <Card title="Měsíce" icon="moon"> Io, Europa, Ganymede </Card> <LinkCard title="Karta s odkazem" description="Popis karty s odkazem" href="../../guides/new-players/popis-herniho-okna/" /></CardGrid>Ikonky
Section titled “Ikonky”Starlight v základu obsahuje několik základních ikonek, které je možné využívet s <Icon> Komponentou
import { Icon } from '@astrojs/starlight/components';
<Icon name="star" color="goldenrod" size="2rem" />Lightbox
Section titled “Lightbox”Pro lokální obrázky můžeme využít komponentu Lightbox, která obrázek automaticky zmenší na šířku obsahu a po kliknutí jej zobrazí ve větším náhledu.
import Lightbox from '../../../components/Lightbox.astro';
<Lightbox src="@images/Page.png" alt="Ukázkový obrázek" />FileTree
Section titled “FileTree”Adresářsrc
Adresářcomponents
- Header.astro
import { FileTree } from '@astrojs/starlight/components';
<FileTree>- src - components - Header.astro</FileTree>- Krok první
- Krok druhý
import { Steps } from '@astrojs/starlight/components';
<Steps>1. Krok první2. Krok druhý</Steps>LinkButton
Section titled “LinkButton”import { LinkButton } from '@astrojs/starlight/components';
<LinkButton href="../../guides/new-players/popis-herniho-okna/">Popis okna</LinkButton>import { Badge } from '@astrojs/starlight/components';
<Badge text="Nové" variant="success" />console.log('Ahoj')import { Code } from '@astrojs/starlight/components';
<Code code={`console.log('Ahoj')`} lang="js" />StarlightPage a AnchorHeading
Section titled “StarlightPage a AnchorHeading”---import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';---
<StarlightPage frontmatter={{ title: 'Moje stránka' }}> <AnchorHeading level="2" id="nadpis">Nadpis</AnchorHeading> <p>Obsah stránky</p></StarlightPage>Frontmatter
Section titled “Frontmatter”Frontmatter je část souboru, která se nachází před samotným obsahem souboru. Obvykle se používá k ukládání metadat o souboru, jako je název souboru, autor, datum vytvoření a další. V tomto dokumentu vypadá následovně:
---title: Jak psát moudradescription: Nápověda k tomu jak poskytnout svůj vlastní obsah---V rámci Starlight je povinnou součástí každeho md / mdx souboru a musí obsahovat minimálně položku title.
Ostatní parametry jsou nepovinné, ale umožňují nám ovlivnit chování jednotlivých dokumentů.
Pro naše použití níže uvedu pouze ty nejdůležitější. Všechny parametry je možné najít na odkazu zde.
Jedná se o povinný parametr pro každý dokument. Využívá se jako hravní titulek, název v tabu prohlížeče a metadata stránky.
description
Section titled “description”Používá se pro metadata stránky a poskytuje vyhledávácí data pro vyhledávací enginy.
tableOfContents
Section titled “tableOfContents”Dokáže pro stránku změnit globální nastavení pro tabulku s obsahem dokumentu.
---title: Stránka bez obsahutableOfContents: false---title: Stránka pouze s H2 nadpisytableOfContents: minHeadingLevel: 2 maxHeadingLevel: 2template
Section titled “template”Určuje šablonu rozložení stránky. Může mít hodnoty doc (viz tento dokument) nebo splash (úvodní stánka klobouku, bez sidebarů).
Umístí Hero komponentu na počátek stránky. Viz úvodní stránka klobouku.
Varianta tlačítek je nyní ve výchozím stavu primary, takže není nutné ji nastavovat, pokud ji nechcete změnit.
---title: Úvodtemplate: splashhero: title: 'Nějakej nadpis' tagline: Něco pod tím. image: alt: Hustý logo file: ../../assets/logo.png actions: - text: Text primárního tlačítka link: odkaz-buttonu/ icon: right-arrow - text: Text druhého buttonu link: https://github.com/astronaut/my-project icon: external---banner
Section titled “banner”Slouží pro zobrazení banneru na vrchu stránky.
---title: Page with a bannerbanner: content: Tady je můj cool banner---prev a next
Section titled “prev a next”Ovlivňují chování “předchozího” a “následujícího” odkazu na konci dokumentů.
---title: Stránka bez obsahuprev: false------title: Stránka pouze s H2 nadpisyprev: link: jina-stranka/ label: Jiný titulek---pagefind
Section titled “pagefind”Určuje zda je tato stánka vyhledatelná pomocí hledání. Hodnota je true / false
sidebar
Section titled “sidebar”Ovlivňuje chování sidebaru pokud je pro tuto stránku automaticky vygenerovaný odkaz.
interface SidebarConfig { label?: string; order?: number; hidden?: boolean; badge?: string | BadgeConfig; attrs?: Record<string, string | number | boolean | undefined>;}Součást sidebar. Určuje popisek stránky v sidebaru pokud je pro tuto stránku automaticky vygenerovaný odkaz.
Součást sidebar. Určuje pořadí stránky v sidebaru pokud je pro tuto stránku automaticky vygenerovaný odkaz.
Nižší číslo řadí stránku výše.
hidden
Section titled “hidden”Součást sidebar. Zabraňuje aby byla tato stránka přidána do automaticky vygenerovaných odkazů v sidebaru.
Součást sidebar. Mění chování (zobrazení) badge u odkazu této stránky v sidebaru
---title: Stránka s badgesidebar: badge: New------title: Page with a badgesidebar: badge: text: Experimental variant: caution---interface BadgeConfig { text: string; variant: 'note' | 'tip' | 'caution' | 'danger' | 'success' | 'default';}Součást sidebar. Přidává html atributy k automaticky vygenerovanému odkazu. Například otevření odkazu v novém tabu.
---title: Stránka otvírající se v novém tabusidebar: attrs: target: _blank---Náhled změn v pull requestu
Section titled “Náhled změn v pull requestu”Každý otevřený pull request se automaticky zbuildí a nasadí na testovací server.
Workflow použije příznak --base s cestou ve tvaru /previews/pr-<číslo PR>,
takže se správně načtou obrázky i styly. Odkaz na náhled se objeví jako komentář
v pull requestu.
Chcete-li si stejný build vyzkoušet lokálně, spusťte
npm run build -- --base /previews/pr-123a obsah z adresáře dist nahrajte na libovolný server například pomocí scp.
Footnotes
Section titled “Footnotes”-
Toto je reference z příkladu. ↩