Ontwikkelen Met Automad

0
15

Het selecteren van de juiste CMS voor een blog of website kan moeilijk zijn. Elk internet project heeft zijn eigen wensen en behoeften, wat betekent dat een CMS kan een betere pasvorm voor een site, maar niet zozeer voor een andere site. Eenvoudige oplossingen zou kunnen worden ontbreekt een aantal essentiële functies, terwijl de meer complexe systemen gemakkelijk kan creëren overhead voor een bepaalde taak.

Ik wil dekken Automad, een CMS is dat minder bekend is dan, zeg, een kolos zoals WordPress, maar biedt nog steeds een aantal krachtige functies, zoals het behoud van de wendbaarheid van kleinere, eenvoudigere oplossingen, zoals static site generators.

Specifiek, Automad vult een leemte op tussen de grotere en kleinere aanbod in een paar belangrijke opzichten:

  • Het is bestand-gebaseerd, maar het is niet nodig een database. Dit zorgt voor een snelle installatie, de draagbaarheid, veiligheid, snelheid, en de eenvoudige implementatie.
  • Zelfs zonder een database, database biedt functies zoals zoeken, tagging, filteren en sorteren.
  • Een multi-layer caching engine cache-inhoud die is opgeslagen in het bestandssysteem efficiënt.
  • De browser-based dashboard en het in-pagina (“live”) bewerken-modus zorgt voor intuïtieve content management.

Maar wat maakt Automad echt anders is, is de ingebouwde template engine. Template is een belangrijke vereiste voor het kunnen Cms ‘ en, omdat het zorgt voor en legt de basis voor een site in de visuele weergave. Sinds Automad de template engine is zo dicht bij de kern, kunt u sjablonen maken met complexe navigatie en batchverwerking van afbeeldingen met behulp van een schone en korte syntaxis. U zult het verschil voelen als je je handen op, en we lopen door een voorbeeld in een bit.

Maar eerst een kort overzicht van templates

Als ontwerper of ontwikkelaar, bent u waarschijnlijk nieuwsgierig naar hoe de ontwikkeling van thema ‘ s en sjablonen voor Automad. Ik bedoel, het is de kern van de vraag waarom ieder van ons echt het gebruik van een CMS in de eerste plaats. Als je het hebt gedaan, elk niveau van thema ‘ s met WordPress, dan is werken met Automad voelt enigszins bekend voor, en misschien zelfs gemakkelijker.

De minimale vereiste voor het maken van een Automad thema is een single .php-bestand en een thema.json-bestand gebundeld in een submap die u maakt in de top-niveau map /packages in een standaard Automad installatie:

pakketten/
yourTheme/
yourTemplate.php
– thema.json

Het zelfstudie pakket verzonden met Automad biedt een goed uitgangspunt voor het begrijpen van de basis concepten van thema ‘ s.

Een kijkje in de syntaxis die wordt gebruikt in Automad sjablonen

Het is mogelijk om te schrijven sjablonen in de vlakte van PHP, het is niet nodig en eigenlijk ook niet aanbevolen. De reden is dat Automad eigen template syntax is korter, leesbaarder en integreert goed met de user interface door automatisch een lijst van alle van de gebruikte variabelen in het dashboard. Het kan naadloos worden gemengd in HTML-opmaak.

Kortom, de syntaxis kan worden gesplitst in twee groepen:

  1. De echo van de inhoud: in @{ variabele }
  2. Verklaringen, zoals functies, loops en voorwaarden: <@ functie @> of <@ instructie @>…<@ end @>

Echo inhoud

Laten we zeggen dat we willen te trekken van het lichaam, de inhoud van een post naar een sjabloon en hebben we een variabele die is ingesteld voor dat genoemd tekst. In WordPress, dit zou een globale variabele (the_content) dat wordt genoemd in PHP:

<?php the_content(); ?>

In Automad, we kunnen hetzelfde doen zonder PHP:

<p>@{ tekst }</p>

Het is mogelijk om het manipuleren van de output van de variabelen die door het doorgeven van de waarde van een functie met behulp van de pijp (|) operator. Het volgende voorbeeld laat zien hoe het verkorten van een tekst tot een maximum van 100 tekens zonder snijden woorden:

@{ text | verkorten (100) }

Dit zou hetzelfde zijn, van wat je zou kunnen doen om het definiëren van het fragment van een post in WordPress met een functie:

/* Beperken fragment 20 woorden */
functie my_custom_excerpt_length( $lengte ) {
terug 20;
}
add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 )
}

Een van de belangrijkste voordelen van een CMS oplossingen, zoals Jeykll, is dat het gebruik van Markdown te maken van de inhoud van de site is een eigen functie. Automad hetzelfde kunnen doen. Laten we zeggen dat we willen om te zetten Markdown tekst naar HTML. Het is eigenlijk best simpel (en efficiënt) gebruik van de pijp operator:

@{ text | markdown }
Verklaringen

Uitspraken zijn een handige manier om te bepalen inhoud en de weergave van voorwaardelijk. In tegenstelling tot variabelen, statements zijn verpakt in <@ … @> scheidingstekens. Het volgende voorbeeld kan worden gebruikt voor het maken van een eenvoudige top level menu met behulp van de nav functie:

<@ nav { context: “/”, les: “nav” } @>

Laten we zeggen dat je wilt weergeven van uw inhoud post standaard, maar tonen een fallback als die content bestaat niet voor een bepaalde reden. Dat is waar we kunnen voorwaardelijke instructies en controle structuren te gebruiken:

<# Als het post de inhoud bestaat dan weer… #>
<@ if @{ tekst } @>
<p>…</p>

<# Anders, het weergeven van dit… #>
<@ else @>
<p>Sorry, geen inhoud hier!</p>

<# OK, niet meer voorwaarden. #>
<@ end @>

Wilt u een lus? Dit is waar in een lijst weergeven van berichten of herhaalbare inhoud die aan een voorwaarde voldoet, is super handig. We kunnen dat doen in Automad door het verstrekken van één of meer glob patronen in een foreach lus.

Bijvoorbeeld, laten we weer alle JPG-en PNG-afbeeldingen voor een post bijgesneden op 400×300 met hun titels:

<@ foreach in “*.jpg, *.png” { width: 400, height: 300, gewas: true } @>
<img src=”@{:fileResized}” width=”@{:widthResized}” height=”@{:heightResized}”>
<p>@{:caption}</p>
<@ end @>

Heb je vangen?! Zoals blijkt uit dit voorbeeld, is een opmerkelijke Automad feature is de mogelijkheid om het insluiten van resizing opties voor elke overeenkomende bestanden in de lus-instructie. Niet meer gecompliceerde functies te registreren maten die dan moeten worden genoemd in de sjabloon!

Het is vermeldenswaard dat foreach loops kan ook worden gebruikt om te itereren over objecten. Automad kent meerdere soorten objecten. Een van de meest belangrijke objecten is pagelist vanwege de mogelijkheid om de uitvoer van alle pagina ‘ s op de site, zoals je zou willen doen als het bouwen van navigatie. Bij het itereren van een pagelist, de context verandert met elke iteratie van de huidige pagina in de lus. Op die manier is het mogelijk gebruik te maken van pagina variabelen in de loop van de code blok.

Voor het configureren van de pagelist, kunnen we gebruik maken van de newPagelist functie zoals deze:

<@ newPagelist { context: “/”, type: “kinderen” } @>
<ul>
<@ foreach in pagelist @>
<li><a href=”@{ url }”>@{ titel }</a></li>
<@ end @>
</ul>
Een kijkje achter de schermen voor je super geeks 🤓

Automad sjabloon tolk is geschreven in PHP en it-processen sjablonen op de vlieg. Daarom is er geen extra proces van het bouwen is vereist. De lijst van systeemvereisten is ook vrij kort. Een web server (Apache of Nginx) en PHP 5.4+ is al voldoende voor het uitvoeren van een site. Pagina ‘ s worden alleen weergegeven wanneer de inhoud is veranderd of na updates van het systeem.

Automad multi-layer caching engine slaat de gerenderde pagina ‘ s in afzonderlijke .html-bestanden, alsmede alle verkende gegevens in het bestand systeem als een soort van content-object. Dat object wordt ook gebruikt om de snelheid van pagina zoeken en filteren.

Door dat mechanisme is het mogelijk om zowel het bewerken van de inhoud van een site rechtstreeks in de productie van online met behulp van de browser-based dashboard of bewerken van een website lokaal en implementeren via Git of gewoon rsync.

Laten we wat code schrijven!

De beste manier om kennis te maken met alles op het web is slechts het bouwen van websites. Hier zijn enkele voorbeelden van hoe we willen aan de slag met die gebruik van Automad.

Voorbeeld 1: Recursieve navigatie

Het maken van een site-boom navigatie is een goed voorbeeld voor het gebruik van recursie in sjablonen. Conceptueel, het creëren van een dergelijke recursieve navigatie kan worden opgesplitst in drie stappen:

  1. Het definiëren van een herbruikbare fragment van code voor het maken van een enkele tak van de site-boom, die noemt zichzelf voorwaardelijk
  2. Het configureren van een dynamische pagelist die automatisch bevat alleen de kinderen van de huidige context
  3. Het definiëren van de startpagina van de site-structuur (bijvoorbeeld de homepage) en de oproep van de recursieve fragment in eerste instantie

Laten we breken die stappen naar beneden in meer detail…

Het definiëren van een herbruikbare codefragment

In Automad, blokken code kan worden gedefinieerd te worden hergebruikt op een later moment door het gebruik van het fragment trefwoord. Met betrekking tot dit voorbeeld is het volgende fragment gesprek zelf voorwaardelijk als lussen door een pagelist en de actieve pagina van de huidige iteratie zelf kinderen heeft pagina ‘ s:

<@ fragment navigatie @>
<ul class=”menu-list”>
<@ foreach in pagelist @>
<li>
<a href=”@{ url }”>@{ titel }</a>
<# Oproep fragment recursief. #>
<@ navigatie @>
</li>
<@ end @>
</ul>
<@ end @>
Het configureren van een dynamische pagelist

De pagelist moet worden geconfigureerd voor de kinderen van het type. De context (of ouder pagina) zal altijd veranderen recursief in het fragment hierboven omschreven, op die manier. De pagelist automatisch bevatten alleen pagina ‘ s van kinderen van de op dit moment verwerkt pagina.

<@ newPagelist {
type: ‘kinderen’,
} @>
Het definiëren van de root pagina

In de laatste stap, de wortel context van de navigatiestructuur moet gedefinieerd worden en het fragment is een keer opgeroepen voor het initiëren van de recursie. De verklaring is hier gebruikt om de verandering van de context naar de homepage.

<div class=”menu”>
<@ met ‘/’ @>
<@ navigatie @>
<@ end @>
</div>

Een complete tutorial sjabloon is al opgenomen in Automad.

Voorbeeld 2: Werken met bestanden

Aangezien de beelden zijn super belangrijk voor content management, werken met hen moet zo eenvoudig en intuïtief mogelijk te zijn. Automad sjabloon taal biedt handige methoden voor de elementaire beeldverwerking, zoals resizen en uitsnijden. Bij het gebruik van een enkele afbeelding of het itereren van een set afbeeldingen, formaat wijzigen opties kunnen doorgegeven worden aan een met de verklaring of de foreach lus. Check out de