Utvikling Med Automad

0
20

Velge riktig CMS for en blogg eller nettside som kan være vanskelig. Hver web-prosjektet har sine egne behov og krav, noe som betyr en CMS kan bli en bedre passform for et nettsted, men ikke så mye for et annet nettsted. Enkle løsninger kan være mangler noen viktige funksjoner, mens mer komplekse systemer kan lage enkelt overhead for en gitt oppgave.

Jeg ønsker å dekke Automad, et CMS som er mindre kjent enn, si, en kjempe som WordPress, men fortsatt har noen kraftige funksjoner som det samtidig opprettholde nimbleness av mindre, enklere løsninger, som statisk side generatorer.

Spesielt, Automad fyller et gap mellom større og mindre tilbud i noen viktige måter:

  • Det er fil-basert, men ikke krever en database. Dette sikrer rask oppsett, mobilitet, sikkerhet, hastighet og enkel distribusjon.
  • Selv uten en database, og tilbyr database funksjoner som søk, merking, filtrering og sortering.
  • En multi-layer caching motor cacher innhold som er lagret i filsystemet på en effektiv måte.
  • Den nettleser-basert dashbord og in-side (“live”) rediger-modus gjør det mulig for intuitiv content management.

Men hva gjør Automad veldig forskjellig, er integrert mal motor. Templating er en sentral forutsetning for kan CMSs fordi det skaper og setter base for et webområde som er synlig oppstilling. Siden Automad malen motoren er så nær kjernen, det tillater deg å lage maler med komplekse navigasjon og for å batch-behandle bilder ved hjelp av en ren og kort syntaks. Du vil føle forskjellen når du får hendene på det, og vi vil gå gjennom et eksempel sammen i bare litt.

Men først en rask oversikt over templating

Som designer eller utvikler, er du sannsynligvis nysgjerrig på hvordan å utvikle temaer og maler for Automad. Jeg mener, det er crux for hvorfor noen av oss virkelig bruke et CMS i første omgang. Hvis du har gjort alle nivå av tematisere med WordPress, så jobber med Automad vil føle vagt kjent, og kanskje enda enklere.

Det minimale behovet for å opprette en Automad tema er en enkelt .php-filen og et tema.json-fil buntet sammen i en undermappe du opprette inne på topp-nivå /pakker katalogen i en standard Automad installasjon:

pakker/
yourTheme/
yourTemplate.php
tema.json

Opplæringen pakken sendt med Automad gir et godt utgangspunkt for å forstå de grunnleggende begrepene temaer.

En titt på syntaksen som brukes i Automad maler

Mens det er mulig å skrive maler i vanlig PHP, det er ikke nødvendig, og faktisk ikke anbefalt. Årsaken er at Automad egen mal syntaks er kortere, mer lesbar, og integrerer godt med brukergrensesnittet ved å automatisk en liste over alle brukte variabler i dashbordet. Det kan være sømløst blandet inn i HTML-markup.

I utgangspunktet, syntaks kan deles inn i to grupper:

  1. Ekko innhold: @{ variabel }
  2. Uttalelser, som funksjoner, looper og betingelser.: < @ funksjon @> eller <@ uttalelse @>…<@ slutten @>

Echo innhold

La oss si at vi ønsker å trekke kroppen innhold for et innlegg inn i en mal, og vi har en variabel som er satt opp for det som kalles tekst. I WordPress, ville dette være en global variabel (the_content) som er kalt i PHP:

<?php the_content(); ?>

I Automad, kan vi gjøre det samme uten PHP:

<p>@{ tekst }</p>

Det er mulig å manipulere resultatet av variabler ved å formidle verdien til en funksjon ved hjelp av rør (|) operatør. Følgende eksempel viser hvordan du kan redusere en gitt tekst til maksimalt 100 tegn uten å kutte ord:

@{ text | forkorte (100) }

Dette ville være den samme på ting du kan gjøre for å definere utdrag av et innlegg i WordPress ved hjelp av en funksjon:

/* Begrense utdrag 20 ord */
funksjonen my_custom_excerpt_length( $lengde ) {
tilbake 20;
}
add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 )
}

En av de viktigste fordelene med noen CMS løsninger, som Jeykll, er at det å bruke Markdown å skape innhold på nettstedet er opprinnelig funksjon. Automad kan gjøre det samme. La oss si at vi ønsker å konvertere Markdown tekst til HTML. Det er ganske darn enkle (og effektiv) ved hjelp av røret operatør:

@{ text | markdown }
Ved hjelp av uttalelser

Uttalelsene er en praktisk måte å definere innhold og vise det betinget. I motsetning til variabler, uttalelser er innpakket i <@ … @> skilletegn. Følgende eksempel kan brukes til å lage en enkel topp nivå-menyen ved hjelp av nav-funksjonen:

<@ nav { sammenheng: “/ ” class: “nav” } @>

La oss si at du ønsker å vise innlegget ditt innhold som standard, men vise et tilbakefall hvis det innholdet finnes ikke for noen annen grunn. Det er der vi kan sette betinget utsagn og kontroll strukturer til bruk:

<# Hvis legge inn innhold eksisterer deretter vise… #>
<@ dersom @{ tekst } @>
<p>…</p>

<# Hvis ikke, vises dette… #>
<@ annet @>
<p>Beklager, ikke noe innhold her!</p>

<# OK, ingen flere forhold. #>
<@ slutten @>

Ønsker å skape en loop? Dette er hvor du vise en liste over innlegg eller noen repeterbare innhold som samsvarer med en tilstand som er super nyttig. Vi kan gjøre det i Automad ved å gi én eller flere glob-mønstre i en foreach-løkke.

For eksempel, la oss vise alle JPG og PNG-bilder til et innlegg beskåret på 400×300 med sine tekster:

<@ foreach i “*.jpg, *.png” { bredde: 400, høyde: 300, beskjære: true } @>
<img src=”@{:fileResized}” bredde=”@{:widthResized}” høyde=”@{:heightResized}”>
<p>@{:bildetekst}</p>
<@ slutten @>

Visste du ta den?! Som vist av dette eksemplet, en bemerkelsesverdig Automad funksjon er muligheten til å bygge skalering alternativer for hver like fil i loop-uttrykket. Ingen kompliserte funksjoner for å registrere størrelser som trenger å bli kalt i malen!

Det er verdt å merke seg at foreach løkker kan også brukes til å iterere over objekter. Automad vet flere typer objekter. En av de viktigste objektene er pagelist på grunn av sin evne til å lage alle sidene på nettstedet, som du kanskje ønsker å gjøre når du bygger navigasjon. Når iterating en pagelist, konteksten endres med hver iterasjon til den aktuelle siden i loop. På den måten er det mulig å bruke side variabler i loop kode blokk.

For å konfigurere pagelist, kan vi bruke newPagelist funksjon som dette:

<@ newPagelist { sammenheng: “/”, skriver: “barn” } @>
<ul>
<@ foreach i pagelist @>
<li><a href=”@{ url }”>@{ tittel }</a></li>
<@ slutten @>
</ul>
En sniktitt bak kulissene for deg super geeks 🤓

Automad malen tolk er skrevet i ren PHP og det prosesser som maler på fly. Derfor, ingen ekstra bygge prosessen er nødvendig for i det hele tatt. Listen av krav til systemet er også ganske kort. En webserver (Apache eller Nginx) og PHP 5.4+ er allerede nok til å kjøre et område. Sidene er bare gjengis når innholdet er endret, eller etter at systemet oppdateringer.

Automad multi-layer caching motor lagrer gjengitt sider i separat .html-filer samt alle krøp data i filsystemet som en slags innhold objekt. Som objekt er også brukt til å fremskynde side søking og filtrering.

På grunn av at mekanismen, er det mulig å redigere innholdet på et nettsted direkte i produksjonen på nettet ved hjelp av den nettleser-basert dashbord eller redigere et nettsted lokalt og distribuere den via Git eller vanlig rsync.

La oss skrive noen kode!

Den beste måten å bli kjent med noe på nettet, er å bygge nettsteder. Her er noen eksempler på hvordan vi skulle komme i gang med at bruk av Automad.

Eksempel 1: Rekursiv navigasjon

Å opprette et nettsted-treet-navigasjon er et godt eksempel for bruk av recursion i maler. Konseptuelt, og skaper slik en rekursiv navigasjon kan deles inn i tre trinn:

  1. Å definere gjenbrukbare kodebit for å skape en eneste gren av nettstedet-treet som kaller seg selv betinget
  2. Konfigurere en dynamisk pagelist som automatisk bare inneholder barn av sin nåværende kontekst
  3. Å definere roten side av nettstedet-treet (for eksempel startsiden), og ring den rekursive kodebiten i utgangspunktet

La oss bryte disse trinnene ned i større detalj…

Å definere gjenbrukbare kodebit

I Automad, blokker med kode kan defineres til å brukes om igjen på et senere tidspunkt ved hjelp av kodebiten søkeord. Om dette eksempel, følgende kodebit vil kalle seg selv betinget når looping gjennom en pagelist og den aktive side av den nåværende utgaven selv har barn sider:

<@ kodebiten navigasjon @>
<ul class=”meny-listen”>
<@ foreach i pagelist @>
<li>
<a href=”@{ url }”>@{ tittel }</a>
<# Samtale kodebiten med undermapper. #>
<@ navigasjon @>
</li>
<@ slutten @>
</ul>
<@ slutten @>
Konfigurere en dynamisk pagelist

Den pagelist har konfigurert et barn typen. Konteksten (eller overordnet side) alltid vil endre seg med undermapper i tekstutdraget er definert ovenfor, på den måten. Den pagelist vil automatisk bare inneholde barn sider av den tiden som er behandlet siden.

<@ newPagelist {
type: ‘barn’
} @>
Å definere roten side

I det siste trinnet, roten sammenheng i navigasjonstreet er definert og tekstutdraget har til å bli kalt en gang for å starte recursion. With-uttrykket er brukt her for å endre konteksten til hjemmesiden.

<div class=”meny”>
<@ med ‘/’ @>
<@ navigasjon @>
<@ slutten @>
</div>

En komplett arbeider opplæringen mal er allerede inkludert i Automad.

Eksempel 2: Arbeide med filer

Siden bilder er super viktig for content management, arbeide med dem, skal være så enkel og intuitiv som mulig. Automad malen språk gir praktiske metoder for grunnleggende bildebehandling, som skalering og beskjæring. Når du bruker et enkelt bilde eller iterating et sett med bilder, endre størrelse alternativer som kan sendes til en med uttalelse eller foreach loop. Sjekk ut

SHARE
Previous articleGeneste Links
Next articleUtveckla Med Automad