Share
Statamic is een modern PHP CMS dat echt moeite doet om gemakkelijk en intuïtief te gebruiken. Van het platte ontwerp tot het gebruik van technologieën als Markdown en YAML, u kunt een uitstekende hoeveelheid werk doen zonder enige code te schrijven.
In dit artikel zullen we het proces van installatie tot het opzetten van een basisportfolio bekijken.
Met een ontwerp met een plat bestand is de installatie zo eenvoudig als het zipbestand dat u downloadt van de Statamic-website. Er is geen database bij betrokken, alle inhoud en instellingen worden lokaal opgeslagen in een groot aantal verschillende bestanden, wat ook betekent dat je automatische back-ups en versioning op al je inhoud hebt als je iets als Git gebruikt.
Laten we, als de inhoud wordt geëxtraheerd, de structuur van Statamic bekijken.
Er zijn min of meer vijf verschillende mappen waarmee u waarschijnlijk zult communiceren en zij zijn:
Naast deze heb je de volgende vier mappen die je waarschijnlijk niet direct zult aanraken:
De eerste stap in elke Statamic-site is het configureren van de opties.
Alle configuratiebestanden bevinden zich in de map _config zoals hierboven beschreven. Het hoofdbestand dat u moet bekijken, is het settings.yaml.
Als u nog niet bekend bent met YAML, hoeft u alleen maar te weten dat het een gegevensformaat is dat vergelijkbaar is met JSON, behalve dat het bedoeld is als een voor mensen leesbaarder formaat. Het volbrengt dit door geen scheidingstekens zoals puntkomma's of aanhalingstekens te vereisen, maar het krijgt zijn structuur van plaatsing en inkeping.
De settings.yaml bestand is echt goed gedocumenteerd, dus je zou geen probleem moeten hebben om het in te vullen. Een aantal van de opties die u waarschijnlijk wilt bekijken, zijn de volgende:
_license_key: Voer uw licentiecode in _site_name: My Portfolio _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - language _log_enabled: true _cookies.secret_key: Some Random Key
De meeste hiervan zijn vrij eenvoudig, zoals het instellen van de licentiesleutel, de naam van uw site en de URL. De thema optie stelt in welke themamap moet worden geladen. We komen hier zo meteen op in, maar een thema is in feite de plaats waar u opgeeft hoe de verschillende pagina's op uw site zullen werken. We zullen ons eigen thema maken zodat je het kunt noemen wat je maar wilt. Ik koos voor 'portfolio'.
De volgende optie is een array met de naam taxonomie. Als je ooit zoiets als WordPress hebt gebruikt, dan zou je moeten weten waar dit voor is. In principe kun je een instelling of 'type' toevoegen aan elk bericht en kun je deze taxonomieën vervolgens gebruiken om je inhoud te filteren en aangepaste pagina's voor deze groepen te maken.
Ik voeg slechts één taxonomie toe; de taaltaxonomie, omdat we in ons voorbeeldportfolio de programmeertalen van elk werk zullen specificeren. U hoeft geen taxonomie te maken voor elke aangepaste eigenschap. We gaan andere dingen in onze portfolio willen, zoals links en beschrijvingen. Een taxonomie is voor velden die meerdere vermeldingen gemeen hebben en voor velden waarvoor u wellicht een aangepaste pagina wilt maken.
De log_enabled instelling schakelt logboekregistratie in, zodat u problemen kunt bekijken die vanuit het admin-paneel naar voren komen. Ze worden opgeslagen in de _logs map die we eerder zagen. Ten slotte is de laatste optie die ik noemde de geheime sleutel die wordt gebruikt om de cookie te coderen.
Dit bestand kan nu worden opgeslagen, maar voordat we naar inhoud gaan, nemen we even de tijd om de portfoliosjabloon in te stellen, zodat we kunnen zien wat we doen.
Net als bij de meeste moderne frameworks, kunt u wanneer u een pagina laadt, deze opbouwen vanuit meerdere herbruikbare componenten. Een pagina in Statamic bestaat uit een lay-out, een sjabloon, en een inhoudsbestand. Zowel de lay-outbestanden als de sjablonen kunnen desgewenst ook worden gemaakt van nog meer stukken die parties worden genoemd.
De lay-out is de buitenste schil waarin uw sjabloon zal worden geplaatst. Dit wordt meestal gebruikt om de standaard HTML-HTML-code te behouden, zoals het hoofdgedeelte, evenals het basisgedeelte dat alle pagina's met deze lay-out nodig hebben, zoals het toevoegen van algemene bibliotheken onder aan uw bestand.
De sjabloon is een specifieke weergave voor een enkele pagina. U kunt een sjabloon voor een beginpagina, een sjabloon voor contactpagina's, enzovoort gebruiken. U hoeft geen pagina per pagina te maken, maar ik zou er één per pagina aanbevelen type van de pagina.
In deze sjablonen kunt u variabelen gebruiken die zijn opgeslagen in de daadwerkelijke inhoudsbestanden. Stel bijvoorbeeld dat u een pagina nodig heeft die een index van boeken die u leest weergeeft, en vervolgens een andere pagina om een lijst met programma's weer te geven die u aan het bekijken bent. In plaats van het grootste deel van de code voor elke pagina te repliceren, kunt u één sjabloon maken voor het weergeven van een lijst met objecten en vervolgens de details ophalen van de lijst die moet worden opgehaald uit het inhoudsbestand zelf.
De inhoudsbestand-zoals de naam al doet vermoeden - is de eigenlijke bron die wordt weergegeven. Dit kan variëren van zaken als een echte unieke webpagina tot één blogbericht. We zullen hier in een oogwenk meer over in details komen.
In plaats van het handmatig maken van al deze verschillende componenten, biedt Statamic een soort startsjabloon, waarmee u een basisstructuur hebt om te beginnen. Je kunt de themamap downloaden van Github.
Plaats gewoon de hele map in de _thema's map en hernoem de map naar 'portfolio' (want dat is de themanaam die we in het instellingenbestand hebben opgegeven). U moet ook de naam wijzigen kindling.js bestand uit de map js en de kindling.css bestand uit de css map, naar portfolio.js en portfolio.css respectievelijk, omdat er een speciale tag is om deze automatisch in te voeren.
Dat is alles wat we nu nodig hebben, maar om een beter beeld te krijgen van waar ik het over had met betrekking tot de lay-out en de sjabloon, laten we die bestanden eens bekijken. Om te beginnen, open het bestand met de naam default.html van de lay-outs map. Dit komt overeen met de standaardlay-out, zoals u misschien al geraden had.
_site naam layout_content
Zoals ik eerder al zei, is de lay-out een goede plaats om code in te voegen die op meerdere pagina's (of liever sjablonen) vereist is. Daarom bevat de standaardlay-out in dit bestand alleen de basisbeschrijving van een HTML-bestand. Nu hebben we er nog niet echt over gesproken, maar Statamic komt met een eigen templating-engine, die vrij gemakkelijk is op te pikken. Je plaatst eigenlijk gewoon een tag waarop je iets wilt invoegen, vergelijkbaar met Handlebar als je daar bekend mee bent.
Deze lay-out bevat een aantal tags waarvan ik dacht dat ik ze zou doorlopen, waarvan de eerste is _site naam. Deze tag verwijst eigenlijk naar de eigenschap die we in de settings.yaml het dossier. Je vindt deze conventie overal in Statamic. Je kunt YAML-opties globaal op deze manier instellen, of zelfs per bestand, en je kunt deze opties dan krijgen door een tag met hun namen in je sjablonen te plaatsen.
De volgende tag, die eigenlijk twee keer voorkomt, is de thema label. Helpers in Statamic lijken meer op onafhankelijke modules, zodat ze meerdere verschillende functies kunnen hebben die aan dezelfde naam zijn gekoppeld; u opent de afzonderlijke functies met een dubbele punt en vervolgens de naam van de gewenste opdracht.
De thema tag draait alles om het laden van middelen die specifiek zijn voor dit thema. Het kan worden gebruikt om dingen in te voeren, zoals scripts en stylesheets, maar ook dingen als afbeeldingen en partials. Het is een hulpfunctie waarmee je in principe alleen de naam van de gewenste bron kunt opgeven en het pad naar de huidige sjabloondirectory wordt ingevuld. Dus bijvoorbeeld als je zou schrijven:
theme: js src = "underscore.js"
Het zou dat vervangen door een link naar een bestand met de naam underscore.js in de map js van het huidige thema. Als er geen src-parameter is ingesteld voor de opdracht js of css, wordt standaard aangenomen dat u verwijst naar een js- of css-bestand met de naam van het huidige thema. Daarom hebben we de naam van die bestanden gewijzigd om overeen te komen; het is gewoon een kwestie van gemak, dus we hoeven ze niet op te geven en het maakt de bron een beetje schoon.
De volgende tag die opkomt is layout_content. Dit is vergelijkbaar met opbrengst in andere templating-engines, en het betekent in feite waar de innerlijke sjabloon moet worden ingevoegd.
Het laatste dat ik in dit bestand wil doen is de link naar jQuery verwijderen, omdat ik het niet ga gebruiken (als je het dan wilt, kun je het natuurlijk laten).
Laten we vervolgens naar het standaardsjabloonbestand gaan (templates / default.html). Het moet leeg zijn. Laten we omwille van het onderwijs een tag toevoegen met de naam inhoud die gewoon de inhoud van de huidige pagina invoegt die wordt geladen.
Dus om samen te vatten, wanneer u naar een pagina gaat, wordt eerst het lay-outbestand geladen, en vervolgens waar dan ook Layout_content tag wordt geplaatst, deze sjabloon wordt ingevoegd. Deze sjabloon zal dan gewoon uitvoeren wat de huidige pagina van binnen heeft.
Met dat gedaan, sla deze bestanden op en laten we verder gaan met inhoud.
Inhoud in Statamic wordt standaard opgegeven in Markdown-bestanden en het standaard geladen bestand wordt aangeroepen page.md. Op dezelfde manier als een standaardwebserver index.html laadt als er geen bestand is opgegeven, laadt Statamic page.md.
Het is ook vermeldenswaard dat routes, of URL-koppelingen in uw site, worden gedefinieerd door de _inhoud directory. Als u bijvoorbeeld een map met de naam demonstratie in de _inhoud map en daarin een bestand met de naam link.md, dit komt overeen met de URL / Demo / link. Als u een plaatst page.md bestand binnen, wordt het geladen als u naar navigeert / Demo / aangezien dit de standaard bestandsnaam is.
Statamic wordt geleverd met een aantal demo-inhoud, maar je kunt gewoon alles in de map verwijderen _inhoud directory voor dit voorbeeld (of verplaats het voor nu).
Laten we beginnen met een eenvoudige startpagina. Aan de wortel van de _inhoud map, maak een bestand met de naam page.md met het volgende:
--- title: Home --- # Welkom op de pagina title
Alle inhoudsbestanden zijn verdeeld in twee secties; de YAML-front-matter en de inhoud. In het bovenste gedeelte (tussen de stippellijnen) kunt u standaard YAML gebruiken die specifiek is voor dit bestand, en dit is een goede manier om opties in te stellen om uw sjabloonbestanden aan te passen. Het tweede deel is het Markdown-gebied, waar u de inhoud van de daadwerkelijke pagina plaatst. U kunt zowel standaard Markdown als Statamic helper-tags gebruiken.
Deze pagina wordt geladen met de standaardlay-out en sjabloonbestanden die we zojuist hebben ingesteld, maar als u wilt dat deze verschillende lay-outs gebruikt, kunt u deze als opties opgeven in de YAML-sectie bovenaan. _layout en _sjabloon respectievelijk.
Als u een server aan de hoofdmap van uw Statamic-map maakt:
php -S localhost: 7000
... en navigeer vervolgens naar http: // localhost: 7000 in uw browser zou u de H1-tag moeten zien met ons welkomstbericht.
Dit is alles wat u moet weten om pagina's in Statamic te maken en als u een redelijk statische site aan het bouwen bent, is dit voldoende. Maar voor veel sites moeten we dynamische gegevens kunnen toevoegen, die de vorm kunnen aannemen van blogposts, winkelitems of in ons portfolio werken.
Er is geen database in Statamic, dus dit soort items worden opgeslagen in Markdown-bestanden, net als de pagina die we zojuist hebben gebouwd, hoewel er een aantal dingen zijn gedaan om subtiel meerdere functies te introduceren om dingen te optimaliseren en deze in de admin te laten werken.
Ten eerste kunt u de bestanden een naam geven met een speciale datumnotatie, zodat ze kunnen worden gesorteerd en gefilterd op datum. Dit doe je door de titel vooraf af te wachten met een jaar maand dag patroon. Als je een bericht met de naam 'foobar' wilt maken, zou je het zoiets noemen als:
2013-09-15-foobar.md
Alle instellingen waarvoor het bericht vereist is, gaan eerst naar de front-matter sectie bovenaan en dan wordt de inhoud eronder geplaatst. Dit volgt het formaat van pagina's zoals hierboven beschreven.
Hoewel dit best cool is, is dit het equivalent van het handmatig invoeren van berichten in een database van een traditioneel systeem. Er is nog een andere optie!
Statamic wordt gebundeld met een heel aardige admin die dit allemaal voor je kan doen, maar om het te kunnen instellen moeten we vertellen welke velden dit type entry zou moeten hebben. Dit gebeurt in een bestand met de juiste naam fields.yaml.
Dus laten we voor ons voorbeeld een map aanmaken in de _content map met de naam werken, en in de werken map laten we een bestand met de naam maken fields.yaml. Binnen in de fields.yaml bestand moeten we specificeren welke eigenschappen onze 'ingangen' zullen bevatten en de individuele typen voor elk van deze instellingen.
U kunt uw veldset (de lijst met velden) in de _config / veldverzamelingen / map en trek een definitie in, of u kunt hier gewoon de definitie invoeren (of u kunt beide doen om een bestaande definitie uit te breiden). Voor ons eenvoudige voorbeeld ga ik de definitie hier gewoon plaatsen, omdat we deze nergens anders zullen hergebruiken:
type: datumvelden: taal: type: tags weergeven: programmeren Taal vereist: echte beschrijving: type: tekstweergave: Beschrijving vereist: false link: type: tekstweergave: link vereist: echte inhoud: type: verborgen
De eerste eigenschap vertelt Statamic gewoon dat we willen dat deze invoerbestanden een eigenschap voor de datum hebben en op de juiste wijze worden benoemd. Vervolgens openen we een YAML-object met de naam velden met alle eigenschappen van onze inzendingen.
De eerste is de taal veld, wat, als je het onthoudt, de taxonomie is die we in de settings.yaml. Binnen elke eigenschap moeten we het type (of standaard een tekstvak), de weergavetekst (die standaard de eigenschapnaam is) opgeven en aangeven of dit vereist is. Er zijn nog andere opties die u kunt instellen, inclusief instructies en de standaardwaarde. U kunt meer informatie over deze opties bekijken op de website van Statamic. Naast deze instellingen kunnen verschillende veldtypen hun eigen aangepaste opties hebben.
Voor de taal input, stel ik het in om de label type, waarmee u meerdere tags voor deze optie kunt instellen. Het is gewoon een ander type invoer voor het invoeren van zijn waarde in de admin. U kunt alle verschillende veldtypen bekijken in de Statamic-documentatie of op de officiële Statamic Cheat Sheet onder 'Fieldtypes'.
De Omschrijving en link zijn vrijwel hetzelfde. Dit zijn beide tekstvakken, behalve dat er een nodig is en de andere niet. Naast de velden die u opgeeft, worden alle vermeldingen voorzien van een titel- en inhoudsveld. We willen niet echt een inhoudsveld - in ons werk zullen ze meer op links lijken - dus ik heb het ingesteld verborgen.
De laatste stap voordat we naar de beheerder gaan, is het maken van een page.md bestand in de werken directory. Dit is niet verplicht, maar de beheerder zal proberen om de titel van dit ingangstype van hier te krijgen, dus het is een goed idee om het gewoon te plaatsen. Hiertoe maakt u een page.md bestand in de werken map met alleen de titel ingesteld op 'Works':
--- titel: werkt ---
Om toegang te krijgen tot de beheerder, moeten we eerst een gebruiker maken. Dit is een eenvoudig YAML-bestand in de config map. De naam van het bestand is de gebruikersnaam die u gebruikt om u aan te melden, en in het bestand configureert u de gegevens en het wachtwoord van de gebruiker.
Laten we een nieuwe gebruiker maken met een gebruikersnaam van editor. We doen dit door een bestand genaamd te maken editor.yaml binnenkant van de _config / users / map. Voeg de volgende gegevens in (behalve met uw info in plaats van de mijne):
--- first_name: Gabriel last_name: Manricks roles: [admin] email: [email protected] wachtwoord: wachtwoord --- De redacteur van dit portfolio
De meeste van deze kolommen zijn redelijk rechttoe rechtaan en ik denk niet dat ze enige uitleg behoeven. Het enige vermelden waard is de rollen setting. Momenteel beheerder is de enige beschikbare optie, maar in de toekomst zal dit de plaats zijn waar u de bewerkingsrechten van de gebruiker kunt aanpassen.
Het is ook de moeite waard te vermelden dat het wachtwoord niet in platte tekst zal blijven staan. Na de eerste keer inloggen, zal Statamic het wachtwoord samen met een zout hashen en deze hier in plaats daarvan opnemen.
Alles na de stippellijnen wordt opgeslagen als de inhoud voor deze gebruiker en kan als een soort van bio voor hen worden gebruikt.
Sla dit bestand nu op. Als uw webserver nog steeds actief is, navigeert u naar /beheerder in uw browser. Dit opent de aanmeldingsconsole waar u deze eigenschappen kunt invoeren. De eerste keer dat u zich aanmeldt, moet u dit twee keer doen, een keer om het wachtwoord te hashen en de tweede keer om u daadwerkelijk aan te melden.
Nadat u bent ingelogd, ziet u een lijst met onze pagina's. Inbegrepen is onze startpagina evenals het invoertype 'Works'. Laten we eens kijken naar wat onze veldenverklaring voor ons deed. Klik op de creëren link binnenkant van de Werken bar.
Je zou een mooi formulier moeten zien met alle velden die we hebben gespecificeerd en de titel. Voeg enkele berichten toe om het uit te testen.
Nadat sommige berichten zijn opgeslagen, hebben we de eerste ronde afgerond. Je weet nu hoe je pagina's, thema's, gebruikers en ingangen maakt, het is een geweldige eerste stap. Maar er is nog veel meer dat Statamic te bieden heeft.
Sommige berichten zijn leuk, maar wat beter zou zijn, is of we ze daadwerkelijk op een pagina kunnen weergeven. Hiervoor moeten we de standaardsjabloon bewerken.
Dit is onze eerste echte interactie met de meegeleverde templating-engine, maar maak je geen zorgen, Statamic's intuïtieve ontwerp maakt het gemakkelijk om op te halen.
Om een volledige lijst met beschikbare tags te bekijken, kunt u de documentatie van Statamic bekijken. Alles wat we echt nodig hebben voor dit voorbeeld is het entries tag, die wordt gebruikt om items in te voeren uit een specifieke map in de _inhoud directory. Er zijn veel optionele eigenschappen, waarmee u kunt filteren op datum of op voorwaarden zoals taxonomieën of zelfs standaardeigenschappen. We houden het eenvoudig en geven alleen de eigenschappen op datum (wat de standaard is).
Hier is de compleet nieuwe standaardsjabloon (templates / default.html):
Portefeuille
taal | title - Omschrijving |
In deze code maken we een tabel en doorlopen alle berichten in de directory 'works'. Dit soort bloktags, waar u meer HTML in plaatst, wijst nieuwe tijdelijke aanduidingen toe. Behalve dat je toegang hebt tot dingen zoals alle kenmerken van de post, krijg je ook speciale hulpvariabelen die je dingen kunnen vertellen zoals de huidige index, of dat dit de eerste of laatste post is. We zullen geen van die variabelen gebruiken. Alles wat we nodig hebben is om de titel, taal, beschrijving en link weer te geven. Als u echter de pagina in uw browser laadt, zult u zich waarschijnlijk realiseren dat in plaats van de taal te laten zien, het alleen "Array" zegt.
Dit komt omdat we deze eigenschap instellen als een typetag, wat betekent dat deze meer dan één taal kan bevatten. Dus hoewel je misschien maar één taal hebt ingesteld, wordt deze nog steeds opgeslagen in een array. Gelukkig komt Statamic met modifiers.
Om deze gids af te werken, laten we enkele modifiers bekijken die ons in staat zullen stellen om deze pagina nog beter te maken.
Het eerste en grootste probleem is het laten verschijnen van de taal. Als je de Statamic Cheat Sheet helemaal onderaan links bekijkt, zie je een sectie met de naam Lijstsneltoetsen. Hoewel dit technisch gezien geen modifiers zijn, kunt u met Statamic deze woorden toevoegen aan het einde van een lijstvariabele en in plaats daarvan een tekenreeksrepresentatie retourneren. Degene die ik wil gebruiken in deze situatie is de standaard _lijst helper. Wat dit zal doen is meerdere waarden in de array scheiden met een komma en spatie, en dat is wat we zouden willen in onze situatie.
Om het uit te proberen, vervangt u de taal tag met language_list. Vernieuw uw browser en nu zouden de talen correct moeten worden weergegeven.
Laten we vervolgens een wijziging toevoegen aan de titel om deze allemaal hoofdletters te maken. Als je ooit iets hebt gebruikt als de Smarty-sjablonengine, werkt dit op dezelfde manier. U voegt een pipe toe aan het einde van de variabelenaam en voegt vervolgens een modifier toe. In ons voorbeeld hoeft u alleen de oproep te vervangen door title met title | upper en deze zijn vast te ketenen, zodat je onbeperkt pijpen kunt blijven toevoegen.
Laten we nu wat CSS toevoegen om alles op te maken. Denk eraan, dit gaat in de css / portfolio.css het dossier:
body achtergrond: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; margin-bottom: 28px; tafel font: 15px 'Coustard', serif; td opvulling: 10px 10px 0 10px; p margin-bottom: 15px; .lang p background: # CA9F53; kleur: #FFF; opvulling: 3px 5px; text-align: right; .werk text-align: left; .work a border-bottom: 1px solid # 000; tekstdecoratie: geen; .title font-weight: 600; kleur: # 000; .desc color: # 666;
En deze twee lettertypen zijn van Google Fonts, dus u moet de volgende link bovenaan uw standaard lay-outbestand toevoegen:
_site naam layout_content
Als alles goed is gekomen, zou je de volgende pagina moeten zien (behalve met de werken die je hebt toegevoegd):
In deze zelfstudie heb ik het hele proces doorlopen van het installeren van het framework, het instellen van alles, het maken van een nieuw boekingstype en het bouwen van een aangepast thema. Het is veel om te doen, en het is alleen mogelijk vanwege hoe eenvoudig Statamic dingen maakt.
We hebben al veel functionaliteit gezien en we hebben zelfs niet gesproken over het maken van je eigen modules en het uitbreiden van Statamic met PHP, maar ik denk dat het meest verbazingwekkende tot nu toe is dat we geen enkele regel van PHP hoefden te schrijven in deze hele tutorial! Dat is iets om over op te scheppen.
Dus ik denk dat de belangrijkste vraag die mensen kunnen hebben, is: "Moet ik het gebruiken?", Of: "Wat zou dit moeten vervangen in mijn huidige repertoire?" Het is belangrijk om te bepalen waar Statamic voor is. Als je een nieuwe startup aan het bouwen bent en de flexibiliteit van een volledig framework nodig hebt, ben ik er zeker van dat je het in Statamic zou kunnen laten draaien, maar het zou veel aangepaste code zijn, die het doel zou kunnen verslaan. Waar ik denk dat dit goed gaat, is als een blogplatform of CMS.
Komende van een achtergrond in WordPress, voelt dit als een directe opvolger. Het volgt in theorie veel dezelfde conventies, maar ze worden allemaal op een veel slimmere manier geïmplementeerd. Het vergelijken van de hoeveelheid code die in elke wordt vereist, wordt een grap. Voor de toekomst heeft Statamic een ongelooflijke API voor het bouwen van aangepaste tags, hooks, nieuwe veldtypen en meer, en je kunt je voorstellen dat Statamic het net zo eenvoudig en eenvoudig te doen is als je zou verwachten.
Ik hoop dat je dit artikel leuk vond, als je vragen hebt, kun je me hieronder vragen, op twitter @ gabrielmanricks, of op het Tuts + web dev IRC-kanaal op freenode (#nettuts).
Accentsconagua