Guider
https://groovy.simplo.dev/produkt-a/guider
Fördjupande guider för att bygga ut dokumentationen.
Praktiska guider för att skriva sidor, bygga navigation och konfigurera sök.
Produkt A
Skriva sidor
https://groovy.simplo.dev/produkt-a/guider/skriva-sidor
Riktlinjer för att skriva dokumentationssidor i Markdown.
Grundstruktur
Varje sida är en Markdown-fil med YAML-frontmatter högst upp. Titeln sätts i
frontmatter och blir sidans h1.
Rubriker
Använd h2 och h3 för att strukturera innehållet — dessa dyker automatiskt
upp i högerspaltens innehållsförteckning.
---
title: Min sida
---
## Första avsnittet
Innehåll här.Kodblock
Kodblock med språkangivelse får syntax enligt Markdown-standard och en kopieringsknapp vid hovring.
function hello(): string
{
return 'Hej världen';
}Tabeller
| Kolumn A | Kolumn B | Kolumn C |
|---|---|---|
| Ett | Två | Tre |
| Fyra | Fem | Sex |
Callouts
Använd GitHub-stilens varningsblock för att lyfta fram viktig information.
Note
Detta är en informativ notering som inte kräver åtgärd.
Warning
Detta är en varning — läsaren bör vara uppmärksam innan de går vidare.
Se även navigation för hur sidor grupperas i menyn.
Navigation
https://groovy.simplo.dev/produkt-a/guider/navigation
Så byggs vänstermenyn upp från sidträdet.
Ordning och synlighet
Sidor med numeriskt prefix i mappnamnet, till exempel 01.installation,
räknas som synliga och sorteras enligt numret.
03.komma-igang/
01.installation/
02.konfiguration/Dölja en sida
En sida utan numeriskt prefix visas inte i menyn men är fortfarande nåbar via direktlänk om den är routbar.
Gruppetiketter
En sida kan markeras som gruppetikett i sina inställningar (fliken Docs i Admin). Då visas den som en icke-klickbar rubrik och dess undersidor listas under den.
En länk till en lokal MP4-video
Inbäddat
Tip
Gruppetiketter är praktiska för att dela upp stora sektioner utan att skapa en egen landningssida.
Aktiv gren
Menyn fäller automatiskt ut den gren som innehåller den aktuella sidan, och den aktiva sidan markeras visuellt.
| Tillstånd | Beskrivning |
|---|---|
active |
Sidan som visas just nu |
activeChild |
En förälder till den aktiva sidan |
This is a story
Läs vidare om sökfunktionen.
Sök
https://groovy.simplo.dev/produkt-a/guider/sok
Hur klientsidessöket fungerar och hur du triggar det.
Öppna sökrutan!
Tryck Cmd+K (macOS) eller Ctrl+K (Windows/Linux) för att öppna
sökrutan, eller klicka på sökknappen i toppmenyn.
window.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
// öppna sökrutan
}
});Sökindex
Temat exponerar ett JSON-index på /search-index.json som innehåller titel,
url, sektion, rubriker och en avkortad textversion av varje sida.
Poängsättning
Träffar rankas efter var sökordet matchar.
| Träfftyp | Poäng |
|---|---|
| Titel | 10 |
| Rubrik | 5 |
| Brödtext | 1 |
Note
Sökindexet hämtas lat, det vill säga först när sökrutan öppnas för första gången per sidladdning.
Warning
Sökindexet innehåller inte innehåll från opublicerade eller dolda sidor.
Se referensavsnittet för fler tekniska detaljer.
Heroes
https://groovy.simplo.dev/produkt-a/guider/heroes
En banner överst på sidan eller nere i texten, med färdiga bakgrunder eller en egen bild.
Den här sidans hero ligger i sidans frontmatter (hero:) och bär sidans titel och beskrivning. Den ställs in under Page settings i redigeringsläget.
I texten
En hero i texten skrivs som en callout av typen HERO. I editorn är det blocket Hero.
Med en egen bild ur sidans mapp, hög och centrerad:
Egen bild som bakgrund
En mörk ton läggs över bilden så att texten går att läsa.
Mörk text, accentfärgad stor knapp och kontur:
Egen färg (#5c3d2e), textfärgen följer:
Egen färg
Skriv #rrggbb som ord, eller välj i färgväljaren.
Sajtens egna heroes brand (en gradient) och skyline (bakgrund, bild och ton), ur temainställningarna → Content — heroes:
Sajtens egen gradient
Bakgrunden brand kommer ur temainställningarna.
Sajtens egen bild
Bild, ton och textfärg följer med namnet skyline; höjden är sidans.
sand
Kompakt, i en ljus färg:
Nyheter i version 2
Tre saker som är värda att känna till.
Alla bakgrunder
gray
blue
teal
yellow
pink
ink
indigo
ocean
twilight
berry
ember
forest
night
dawn
mist
mint
Office-filer
https://groovy.simplo.dev/produkt-a/guider/office-filer
Word, PowerPoint och Excel visade direkt i sidan.
En länk till en Word-, PowerPoint- eller Excel-fil på sidan, med titeln embed och ensam i sitt stycke, visas som dokumentet självt. Allt ritas i läsarens webbläsare; ingenting skickas till någon tjänst. Ikonen i hörnet öppnar filen i en större vy, med Download.
Word
PowerPoint
Excel
Bredd och sida
Samma titel som för andra inbäddningar: "embed 60% right".
Som vanlig länk
En vanlig länk öppnar filen i samma vy som ikonen: rutin.docx, kvartal.pptx, budget.xlsx.
Sajtlista
https://groovy.simplo.dev/produkt-a/guider/sajtlista
En lista över sajterna i installationen, med titel och beskrivning.
En sida kan lista installationens sajter med blocket SITES. Varje besökare ser bara de sajter hon får läsa. Den sajt man står på är markerad och saknar länk.
Med gemensamma taggar på grupperas listan per tagg, som i sajtväljaren. I en sajt utan subsajter ritar blocket ingenting.