Utveckla Med Automad

0
16

Att välja rätt CMS för en blogg eller hemsida kan vara svårt. Varje projekt har sina egna behov och krav, vilket innebär ett CMS kan vara en bättre passform för en plats men inte så mycket för en annan webbplats. Enkla lösningar kan vara att det saknas viss grundläggande funktioner, medan mer komplexa system kan enkelt skapa kostnader för en given uppgift.

Jag vill att täcka Automad, ett CMS som är mindre kända än, säg, en koloss som WordPress, men fortfarande finns några kraftfulla funktioner som den samtidigt som den flinkheten av mindre, enklare lösningar, som statisk webbplats generatorer.

Specifikt, Automad fyller en lucka mellan större och mindre erbjudanden i några viktiga avseenden:

  • Det är för fil-baserat, men inte kräver en databas. Detta säkerställer snabb installation, flexibilitet, säkerhet, hastighet och enkel installation.
  • Även utan en databas, det finns databas-funktioner som sökning, märkning, filtrering och sortering.
  • En multi-layer caching motor cachar innehåll lagras i filsystemet på ett effektivt sätt.
  • Browser-baserade instrumentbrädan och i sidan (“live”) redigera-läget möjliggör intuitiv content management.

Men vad gör Automad verkligen skiljer sig, är dess integrerade mall motor. Mallar är ett grundläggande krav för maj Cms eftersom det skapar och ställer basen för en webbplats visuell display. Eftersom Automad mallen motorn är så nära kärnan, det gör att du kan skapa mallar med komplexa navigering och för att batch-process bilder med en ren och kort syntax. Du kommer att känna skillnaden när du får tag på det, och vi kommer att gå igenom ett exempel tillsammans i bara lite.

Men först, en snabb översikt av mallhantering

Som designer eller utvecklare, är du förmodligen nyfiken på hur du utvecklar teman och mallar för Automad. Jag menar, det är den springande punkten för varför någon av oss verkligen använda ett CMS i första hand. Om du har gjort någon nivå av teman med WordPress, då arbeta med Automad kommer att känna sig vagt bekant, och kanske ännu enklare.

Det minimala kravet för att skapa en Automad tema är en enda .php-fil och ett tema.json-fil buntas ihop i en underkatalog som du skapar inom topp-nivå /paket katalog i en standard Automad installation:

paket/
yourTheme/
yourTemplate.php
temat.json

Handledningen paket levereras med Automad ger en bra utgångspunkt för att förstå de grundläggande begreppen i teman.

En titt på den syntax som används i Automad mallar

Även om det är möjligt att skriva mallar i vanlig PHP, det är inte nödvändigt och faktiskt inte rekommenderas. Anledningen är att Automad egen mall syntax är kortare och mer lättläst, och är väl integrerat med användargränssnittet genom att automatiskt en lista över alla de variabler som används i instrumentpanelen. Det kan vara sömlöst blandas in i HTML-koden.

I grund och botten, syntax kan delas in i två grupper:

  1. Ekande innehåll: @{ variabel }
  2. Uttalanden, som funktioner, slingor och villkorssatser: <@ funktion @> eller <@ uttalande @>…<@ slut @>

Echo innehåll

Låt oss säga att vi vill dra kroppen innehåll för ett inlägg i en mall, och vi har en variabel som satts upp för att kallas för text. I WordPress, detta skulle vara en global variabel (the_content) som kallas i PHP:

<?php the_content(); ?>

I Automad, kan vi göra samma sak utan att PHP:

<p>@{ text }</p>

Det är möjligt att manipulera produktionen av variabler genom att skicka värdet för en funktion med pipe (|) operatör. Följande exempel visar hur du kan förkorta en given text till maximalt 100 tecken utan att skära ord:

@{ text | korta (100) }

Detta skulle vara samma sak som man kan göra för att definiera utdrag ur ett inlägg i WordPress med hjälp av en funktion:

/* Begränsa utdrag 20 ord */
funktion my_custom_excerpt_length( $length ) {
return 20;
}
add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 )
}

En av de viktigaste fördelarna med vissa CMS-lösningar, som Jeykll, är att med hjälp av Wiki för att skapa webbplatsens innehåll är en naturlig funktion. Automad kan göra samma sak. Låt oss säga att vi vill konvertera till Wiki-text till HTML. Det är ganska enkelt (och effektiv) använder röret operatör:

@{ text | wiki }
Med hjälp av rapporter

Uttalanden är ett praktiskt sätt att definiera innehåll och visa den villkorligt. Till skillnad från variabler, uttalanden är insvept i <@ … @> avgränsare. Följande exempel kan användas för att skapa en enkel top level-menyn med hjälp av nav-funktion:

<@ nav { sammanhang: “/”, klass: “nav” } @>

Låt oss säga att du vill visa din inlägg innehåll som standard, men visa en fallback om att innehållet inte finns någon anledning. Det är där vi kan sätta villkorssatser och kontrollstrukturer att använda:

<# Om inlägget innehåll finns då att visa… #>
<@ om @{ text } @>
<p>…</p>

<# Annars visar det här… #>
<@ annat @>
<p>Sorry, ingen text här!</p>

<# OK, inga fler villkor. #>
<@ slut @>

Vill skapa en loop? Det är där visas en lista över tjänster eller någon repeterbara innehåll som matchar ett villkor är super bra. Vi kan göra det i Automad genom att tillhandahålla en eller flera glob-mönster i en foreach-loop.

Till exempel, låt oss visa alla JPG-och PNG-bilder för ett inlägg beskurna på 400×300 med sina bildtexter:

<@ foreach i “*.jpg, *.png” { bredd: 400 höjd: 300, gröda: true } @>
<img src=”@{:fileResized}” width=”@{:widthResized}” height=”@{:heightResized}”>
<p>@{:bildtext}</p>
<@ slut @>

Visste du fånga det?! Som framgår av detta exempel, en märklig Automad funktion är möjligheten att bädda in storleksändring alternativ för varje matchande fil inuti slingan uttalande. Ingen mer komplicerade funktioner för att registrera storlekar som sedan vid behov kan kallas i mallen!

Det är värt att notera att foreach-loopar kan också användas för att iterera över objekt. Automad vet flera typer av objekt. En av de viktigaste objekt är pagelist grund av dess förmåga att visa alla sidor på webbplatsen, som du kanske vill göra när du bygger navigering. När gå en pagelist samband ändras med varje iteration till den aktuella sidan i slingan. På det sättet är det möjligt att använda sidan variabler inom loop kodblocket.

För att konfigurera pagelist, kan vi använda newPagelist funktion som denna:

<@ newPagelist { sammanhang: “/”, typ: “barn” } @>
<ul>
<@ foreach i pagelist @>
<li><a href=”@{ url }”>@{ title }</a></li>
<@ slut @>
</ul>
En smygtitt bakom kulisserna för att du super nördar 🤓

Automad mallen tolk är skrivet i ren PHP-och it-processer mallar på fluga. Därför, inga extra byggprocessen är ett krav. Den lista av krav på systemet är också ganska kort. En webbserver (Apache eller Nginx) och PHP 5.4+ är redan tillräckligt för att driva en webbplats. Sidor är endast gjorde när innehållet har ändrats eller efter systemuppdateringar.

Automad multi-layer caching motor butiker utförda sidor i separat .html-filer samt alla kröp data i filsystemet som en typ av innehåll som objekt. Detta objekt är också används för att snabba upp sidan sökning och filtrering.

På grund av denna mekanism, och det är möjligt att antingen redigera innehållet på en webbplats direkt i produktionen på nätet med hjälp av browser-baserade instrumentpanelen eller redigera en webbplats lokalt och distribuera det via Git eller vanligt rsync.

Låt oss skriva lite kod!

Det bästa sättet att bekanta sig med något på nätet är att bara bygga webbplatser. Här är några exempel på hur vi skulle komma igång med att använda Automad.

Exempel 1: Rekursiv navigering

Skapa en webbplats-träd navigering är ett bra exempel för att använda rekursion i mallar. Begreppsmässigt, skapa en rekursiv navigering kan delas upp i tre steg:

  1. Definiera en återanvändbar snutt kod för att skapa en enda gren av webbplatsen-träd som kallar sig själv för villkorligt
  2. Konfigurera en dynamisk pagelist som automatiskt innehåller endast barn av sin aktuella sammanhanget
  3. Definiera rot-sida-träd (till exempel hemsidan) och kallar den rekursiva ursprungligen utdrag

Låt oss bryta dessa steg ner i större detalj…

Definiera en återanvändbar kod utdrag

I Automad, block av kod kan definieras för att återanvändas vid ett senare tillfälle med hjälp av utdrag sökord. Om detta exempel, följande utdrag kommer att kalla sig villkorligt när loopa igenom en pagelist och den aktiva sidan av den nuvarande iteration själv har barn-sidor:

<@ utdrag navigering @>
<ul class=”menu-list”>
<@ foreach i pagelist @>
<li>
<a href=”@{ url }”>@{ title }</a>
<# Ring utdrag rekursivt. #>
<@ navigering @>
</li>
<@ slut @>
</ul>
<@ slut @>
Konfigurera en dynamisk pagelist

Den pagelist vara konfigurerade för ett barn typ. Ramen (eller moderbolagets sida) kommer alltid att ändra rekursivt inom snutten ovan definierade på detta sätt. Den pagelist kommer automatiskt att enbart innehåller barn-sidor som för närvarande behandlas sidan.

<@ newPagelist {
typ: “barn”
} @>
Definiera roten sidan

I det sista steget, rot-sammanhang i navigationsträdet definieras och snutten har att kallas en gång om att inleda rekursion. Med uttalandet används här för att ändra förutsättningarna till hemsidan.

<div class=”menu”>
< @ ‘ / ‘ @ >
<@ navigering @>
<@ slut @>
</div>

En komplett fungerande handledning mallen är redan ingår i Automad.

Exempel 2: att Arbeta med filer

Eftersom bilder är super viktigt för content management, som arbetar med dem bör vara så enkelt och intuitivt som möjligt. Automad s mall språk ger praktiska metoder för grundläggande bildbehandling, som att ändra storlek och beskära. När du använder en enda bild eller gå en uppsättning bilder, ändra storlek alternativ kan överföras till en med uttalande eller en foreach-loop. Kolla in