Ukrudtets guide til at ændre i skabelonen
Frygt ej for skabelonens anonyme udseende, du kan med denne guide få personliggjort din hjemmeside og samtidig lære, hvordan man redigerer sider og laver nye.
Guiden anbefales at følges kronologisk i første omgang, da de vigtigste koncepter introduceres løbende i guiden under de forskellige trin.
Trin i guiden
- Log ind på redigeringssiden
- Giv din hjemmeside en ny overskrift/titel
- Ændre skriftfarve
- Giv din hjemmeside en flot baggrundsfarve
- Ændre skrifttypen
- Lav en ny side
- Indsæt billede
- Indsæt link
- Formatér din side pænt med markdown
- Ret i menuen og tilføj den nye side
Log ind på redigeringssiden
For at kunne redigere i hjemmesiden, skal du først ind i redigerings-mode. Indtast /cms/edit.php i url'en efter hjemmesidens navn. For at komme ind på denne hjemmesides redigeringsmode skal man skrive lichen.ukrudt.net/cms/edit.php
Herefter vil man blive mødt af en log ind prompt:
Log ind med de oplysninger ud har fået på din egen hjemmeside🌛
Når man er logget ind kan man se markdown-redigerings-mode i venstre side, og hvordan hjemmesiden kommer til at se ud i højre side.
Den første side man kommer ind på er "forsiden" også kendt som index.md. Man kan slette al teksten, og skrive sin egen. Husk at trykke på den grønne Save knap i bunden.
Man kan se at al brødteksten er blevet ændret her. Men her har man ikke mulighed for at ændre overskriften "Lichen-markdown", eller menuen, som vil optræde på alle sider. Disse objekter en en del af headeren, som kan ændres ved at læse næste sektion i guiden.
Giv din hjemmeside en ny overskrift/titel
Overskriften/titlen er en del af headeren som optræder på alle sider. Den kan du ændre i ved at navigere til filen: header.md. Tryk først på knappen Files, hvorfra du vil komme ud i fil-navigatoren. Herefter kan du trykke på siden header.md
Når man vælger header.md filen, kommer man ind i redigeringsmode.
Her kommer man ind på header.md siden, hvor man kan se koden til overskriften som er:
# Lichen-markdown. Prøv at ændre teksten efter #.Man kan også se koden til navigationsmenuen indkapslet mellem
<menu> [...] </menu>tags'ne. Det kommer vi nærmere ind på senere.
Denne hjemmesides nye header-titel, ligger ikke så langt fra skabelonen:
Ændre skriftfarve
For at ændre skriftfarven skal vi ind i stylesheet.css. Tryk på Files-knappen, og tryk på mappen: assets, og vælg herefter stylesheet.css
I stylesheet.css kan vi ændre på alle hjemmesidens skrifttyper og farver. Når man klikker ind på det i første omgang, kan det godt virke overvældende, når man ikke kender så meget til HTML og CSS. Men fat mod. Der er masser af hjælp at hente på søgemaskiner og i matrix tråden. Du får i det næste også mulighed for at ændre lidt i den.
I redigeringsvinduet ses
stylesheet.css. De markede blå felter er skriftfarven for henholdsvis brødteksten (=indlejret ibody), og for overskrift 1, overskrift 2 og overskrift 3 (=indlejret ih1, h2, h3). Koden er skrevet i CSS-format. "color:" indikerer skriftfarven, og her skal man være lidt obs på at man får indtastet skriftfarven og afsluttet med semikolon (;). Se hvad der sker, hvis man ændre disse:
Du kan se, hvilke farve-kode-navne du kan bruge i CSS her. Du kan også bruge HEX-koder som er på formen af et hashtag efterfulgt af 6 bogstaver/tal fx:
#BA55D3.
Giv din hjemmeside en flot baggrundsfarve
På samme måde som du ændrer skrifttype-farvene, kan du også ændre baggrundsfarven i stylesheet.css. Baggrundsfarven ændres ud fra background: der er indlejret i body-sektionen
Ændre skrifttype
https://www.w3schools.com/css/css_font.asp
[...] Vælg web-safe skrifttyper som fallback, ved at tilføje flere skriftyper separeret af et komma. Læs artiklen foroven.
Hav forskellig skrifttype til brødtekst og overskrifter. Giv din oversskrifter en ny skrifttype ved at tilføje font-family: under h1, h2, h3 som vist:
Det kan være svært at se overskriften, på grund af lidt dårlig kontrast mellem de tynde streger og farverne. Så vi kan vælge en tykkere skrifttype ved at ændre
font-weight: 300;tilfont-weight: 600;som vist:
Lav en ny side
Gå ind i fil-navigatøren ved at trykke på Files. Hold derefter over www-mappen, og vælg New Page.
Giv din nye side et navn uden mellemrum og afslut med .md. md står for MarkDown.
Navnet kommer til at stå i url'en. Så i dette tilfælde vil man kunne komme ind på
kvikstart-siden ved at skrive lichen.ukrudt.net/kvikstart
Indsæt billede
tryk på
Uploadknappen og vælg din billedfil
Ovenstående billede har jeg kaldt for
upload.png. Når man brugerUpload-knappen, indsætter den automatisk den rette markdown-formatering til at få billedet frem.markdown-formateringen er:
. Så helt tom er formateringen![]()Den interne sti til billedet er i mappen/assets/og filnavnet er jo herupload.png
Man kan finde de billede og filer man har uploadet i assets mappen. Den finder man under Files, som vist på billedet under.
Man kan også indsætte link-billeder, ved at indsætte link i stedet for stien i paranteserne. fx: 
Hvis formateringen er svær at huske kan man finde hjælp, ved at trykke på Help knappen. Eller ved at gå ind på
cheatsheet.
Indsæt link
Du kan også indsætte links til dine sider
Det gør man ved at skrive det på formen: [Linktekst her](/kvikstart.md)
Du kan også linke til andre hjemmesider ved i stedet for at indsætte stien til en side, bare indsætte link: [Linktekst til ekstern side](https://ukrudt.net)
Så ender det med at se sådan ud: Linktekst til ekstern side
Formatér din side pænt med markdown
Her kan det virkelig anbefales at prøve de forskellige funktioner ud i markdown. Gå til cheatsheet
Her kan du bla. lære at lave overskrifter i forskellig størrelse, og lave ting i fed eller kursiv og meget meget mere.
Ret i menuen og tilføj den nye side
I en tidligere sektion lærte du at lave links. Denne viden kan du bruge til at ændre i menuen, som du finder i header.md.
HTML og CSS direkte i lichen-markdown
Vil du tilføje endnu mere bling til din hjemmeside, kan du faktisk tilføje html-kode direkte i din markdown-side.