Share
Static är ett modernt PHP CMS som verkligen gör ett försök att vara enkelt och intuitivt att använda. Från sin platta design till användningen av teknik som Markdown och YAML kan du uppnå en enastående mängd arbete utan att skriva någon kod alls.
I den här artikeln tar vi en titt på processen från installationen för att skapa en grundläggande portfölj.
Med en plattfildesign är installationen lika enkel som att extrahera zip-filen du laddar ner från den statiska webbplatsen. Det finns ingen databas, allt innehåll och inställningar lagras lokalt i en mängd olika filer, vilket också innebär att du har automatisk säkerhetskopiering och versionering på allt innehåll om du använder något som Git.
Med innehållet extraherat, låt oss ta en titt på Statams struktur.
Det finns mer eller mindre fem olika mappar som du sannolikt kommer att interagera med, och de är:
Förutom dessa har du följande fyra mappar som du förmodligen inte kommer att röra direkt på:
Det första steget i varje statisk webbplats är att konfigurera sina alternativ.
Alla konfigurationsfiler finns i _config-mappen enligt beskrivningen ovan. Huvudfilen du bör titta på är settings.yaml.
Om du är ny på YAML, är allt du verkligen behöver veta att det är ett dataformat som liknar JSON förutom att det är meningen att det är ett mer mänskligt läsbart format. Det åstadkommer detta genom att inte kräva några separerande tecken som halvkolon eller citattecken, utan får sin struktur från placering och inryckning.
De settings.yaml filen är väldokumenterad så att du inte borde ha problem med att fylla i det. Några av de alternativ som du noga vill titta på är följande:
_license_key: Ange din licensnyckel _site_name: Min portfölj _site_url: http: // localhost: 7000 _theme: portfölj _taxonomy: - språk _log_enabled: true _cookies.secret_key: En del slumpmässig nyckel
De flesta av dessa är ganska enkla, som att ställa in licensnyckeln, webbplatsens namn och webbadress. De tema alternativen anger vilken templatmapp som ska laddas. Vi kommer att komma in på detta på ett ögonblick, men ett tema är i huvudsak den plats där du anger hur de olika sidorna på din webbplats ska fungera. Vi kommer att skapa vårt eget tema så att du kan namnge det du vill ha. Jag valde "portfölj".
Nästa alternativ är en array som kallas taxonomi. Om du någonsin har använt något som WordPress, bör du veta vad det här är för. I grund och botten tillåter du att lägga till en inställning eller "typ" för varje inlägg, och du kan sedan använda dessa taxonomier för att filtrera ditt innehåll och skapa anpassade sidor för dessa grupperingar.
Jag lägger bara till en taxonomi språk taxonomi, för i vår exempelportfölj kommer vi att ange varje arbets programmeringsspråk. Du behöver inte skapa en taxonomi för varje anpassad egendom. Vi kommer att vilja ha andra saker i vår portfölj, som länkar och beskrivningar. En taxonomi är för fält som flera poster har gemensamt, och för fält som du kanske vill skapa en anpassad sida för.
De log_enabled Inställningen aktiverar loggning så att du kan se problem som kommer upp från adminpanelen. De kommer att lagras i _logs mapp vi såg tidigare. Slutligen det sista alternativet jag nämnde är den hemliga nyckeln som används för att kryptera kakan.
Den här filen kan nu sparas, men innan vi flyttar till innehåll, låt oss ta en stund att konfigurera portföljmallen så att vi kan se vad vi gör.
Precis som de flesta moderna ramar, kan du bygga upp det från flera återanvändbara komponenter när du laddar en sida. En sida i Static består av a layout, en mall, och a innehållsfilen. Både layoutfilerna och mallarna kan valfritt också tillverkas av ännu fler bitar som heter partiklar.
De layout är det yttre skalet där din mall kommer att placeras. Detta brukar användas för att hålla HTML-koden för kedjeplattformen som huvudavsnittet, liksom den grundläggande kroppen som alla sidor som använder den här layouten behöver, till exempel att lägga till gemensamma bibliotek längst ner i filen.
De mall är en specifik vy för en enda sida. Du kan ha en mall för webbsidor, en kontaktblankett och så vidare. Du behöver inte skapa en per sida, men jag skulle rekommendera en per typ av sidan.
I dessa mallar har du möjlighet att använda variabler lagrade i de faktiska innehållsfilerna. Till exempel, säg att du behöver en sida som visar ett index över böcker du läser, och sedan en annan sida för att visa en lista över visar du tittar på. Istället för att kopiera det mesta av koden för varje sida kan du skapa en mall för att visa en lista med objekt och dra sedan in specifika för vilken lista som ska hämtas från innehållsfilen själv.
De innehållsfilen-som namnet antyder-är den faktiska resursen som visas. Detta kan sträcka sig från saker som en verklig unik webbsida till en enda blogginmatning. Vi kommer till dessa i mer detaljer på ett ögonblick.
Nu istället för att manuellt skapa alla dessa olika komponenter, ger Statamic en slags startmall, vilket ger dig en grundläggande struktur för att komma igång. Du kan ladda ner temapappen från Github.
Placera hela mappen i _themes katalog, och byt namn på mappen till "portfölj" (som det är temainnamnet vi deklarerade i inställningsfilen). Du måste också byta namn på kindling.js fil från js-mappen och kindling.css filen från css-katalogen till portfolio.js och portfolio.css respektive, eftersom det finns en special tagg för att dra in dessa automatiskt.
Det är all den inställning vi behöver nu, men för att få en bättre uppfattning om vad jag pratade om med layout och mall, låt oss ta en titt på dessa filer. Till att börja med öppnar du filen som heter default.html från layouter mapp. Detta motsvarar standardlayouten som du kanske har gissat.
_sidnamn layout_content
Som jag nämnde tidigare är layouten ett bra ställe att sätta kod som krävs på flera sidor (eller mallar snarare), varför standardlayouten i den här filen bara innehåller den grundläggande översikten av en HTML-fil. Nu har vi inte riktigt pratat om det ännu, men Statamic kommer med sin egen templerande motor, vilket är ganska lätt att hämta. Du placerar i grund och botten bara en tagg där du vill att något ska sättas in, liknar Handlebars om du är bekant med det.
Denna layout innehåller ett par taggar som jag trodde skulle gå igenom, varav den första är _sidnamn. Den här taggen refererar faktiskt till den egendom vi satt upp inuti settings.yaml fil. Du kommer att hitta denna konvention hela Static. Du kan ställa in YAML-alternativ antingen globalt så här eller till och med per fil, och du kan då få dessa alternativ genom att bara placera en tagg med namnen i dina mallar.
Nästa tagg, som faktiskt kommer upp två gånger, är tema märka. Hjälpare i statiken är mer som fristående moduler, så de kan ha flera olika funktioner kopplade till samma namn; Du får tillgång till de enskilda funktionerna med ett kolon och sedan namnet på det kommando du vill ha.
De tema taggar handlar om att ladda in resurser som är specifika för detta tema. Det kan användas för att dra in saker som skript och stylesheets, men också saker som bilder och partiklar. Det är en hjälpfunktion som i princip tillåter att du bara anger namnet på den resurs du vill ha och det kommer att fylla i sökvägen till den aktuella mallkatalogen. Så till exempel om du skulle skriva:
tema: js src = "underscore.js"
Det skulle ersätta det med en länk till en fil med namnet underscore.js inuti det aktuella tematets js-mapp. Som standard om ingen parameter för parametrar är inställd för kommandot js eller css antar du att du hänvisar till en js- eller css-fil med namnet på det aktuella temat, varför vi bytte namn på dessa filer för att matcha; det är bara en fråga om bekvämlighet så vi behöver inte ange dem och det städar källan lite.
Nästa tagg som kommer upp är layout_content. Detta liknar avkastning i andra templerande motorer, och det betyder i princip var den inre mallen ska sättas in.
Det sista jag vill göra i den här filen är att ta bort länken till jQuery, eftersom jag inte kommer att använda den (om du då kan du självklart lämna den).
Låt oss sedan flytta till standardmallfilen (templates / default.html). Det ska vara tomt. För utbildningens skull, låt oss lägga till en tagg som heter innehåll som bara sätter in innehållet på den aktuella sidan som laddas.
Så för att återskapa, när du går till en sida kommer den först att ladda upp layoutfilen, och sedan överallt Layout_content taggen placeras den här mallen kommer att införas. Denna mall kommer då bara att mata ut vad den aktuella sidan har inuti.
Med det gjort, spara ut dessa filer och låt oss gå vidare till innehållet.
Innehållet i statiken anges som standard i Markdown-filer och standardfilen laddas upp page.md. På samma sätt kommer en vanlig webbserver att ladda index.html om ingen fil anges, laddar Statamic page.md.
Det är också värt att notera att rutter eller URL-länkar på din webbplats kommer att definieras av _innehåll katalogen. Om du till exempel skapar en mapp som heter demo i _innehåll katalog och placera en fil med namnet link.md, Detta kommer att motsvara webbadressen / Demo / länk. Om du placerar en page.md filen inuti, den laddas om du navigerar till / Demo / eftersom det är standardfilnamnet.
Statisk kommer med lite demoinnehåll, men du kan bara ta bort allt inne i _innehåll katalog för det här exemplet (eller flytta det åt sidan för tillfället).
Låt oss börja med en grundläggande hemsida. I roden av _innehåll katalog, skapa en fil med namnet page.md med följande:
--- titel: Hem --- # Välkommen till title sidan
Alla innehållsfiler är uppdelade i två sektioner; YAML-frågan och innehållet. Den övre delen (mellan streckade linjer) är där du kan ställa in standard YAML specifikt för den här filen och är ett bra sätt att ställa in alternativ för att justera dina mallfiler. Den andra delen är Markdown-området, där du sätter innehållet på den aktuella sidan. Du kan använda standard Markdown såväl som statiska hjälptaggar.
Den här sidan laddas med standardlayout och mallfiler som vi just har ställt in, men om du vill att den ska använda olika, kan du ange dessa som alternativ i YAML-sektionen högst upp med _layout och _mall respektive.
Om du skapar en server i roten till din statiska katalog:
php -S localhost: 7000
... och sedan navigera till http: // localhost: 7000 I din webbläsare ska du se H1-taggen med vårt välkomstmeddelande.
Det här är allt du behöver veta för att skapa sidor i Static, och om du bygger en ganska statisk webbplats skulle det vara tillräckligt. Men för många webbplatser måste vi kunna lägga till dynamiska data, som kan vara i form av blogginlägg, butiksobjekt eller i vårt fall.
Det finns ingen databas i Static, så dessa typer av poster lagras i Markdown-filer precis som den sida vi just byggt, även om ett par saker gjordes för att subtilt introducera flera funktioner för att optimera saker och för att få det att fungera i admin.
Först kan du namnge filerna med ett speciellt datumformat så att de kan sorteras och filtreras efter datum. Du gör detta genom att du väntar på titeln med en år månad dag mönster. Om du vill skapa ett inlägg som heter "foobar" skulle du nämna det något som:
2013-09-15-foobar.md
Alla inställningar posten kräver går in i främre delen upptill, och sedan placeras innehållet under. Detta följer formatet på sidor som beskrivits ovan.
Även om detta är ganska coolt, motsvarar det att man manuellt skriver in inlägg i en databas av ett traditionellt system. Det finns ett annat alternativ!
Statisk levereras med en riktigt trevlig admin som kan göra allt detta för dig, men för att få det inrättat måste vi berätta vilka fält denna typ av post ska ha. Detta görs i en fil med namnet fields.yaml.
Så för vårt exempel låt oss skapa en mapp i _content katalogen heter Arbetar, och inuti Arbetar mapp låt oss skapa en fil med namnet fields.yaml. Inuti fields.yaml fil måste vi ange vilka egenskaper våra "poster" innehåller och de enskilda typerna för var och en av dessa inställningar.
Du kan antingen ange ditt fält (fältlistan) i _config / fieldsets / katalog och dra i en definition, eller du kan bara ange definitionen här (eller du kan göra både för att utöka en befintlig definition). För vårt enkla exempel kommer jag bara att lägga definitionen här eftersom vi inte kommer att återanvända den någonstans:
typ: datumfält: språk: typ: taggdisplay: Programmering Språk krävs: sann beskrivning: typ: textvisning: Obligatorisk beskrivning: Felaktig länk: Typ: Textvisning: Länk krävs: Sant innehåll: Typ: Dold
Den första egenskapen berättar bara för Statamic att vi vill att dessa postfiler ska ha en datumegenskap och att namnet ska vara korrekt. Därefter öppnar vi ett YAML-objekt som heter fält innehållande alla egenskaper hos våra poster.
Den första är språk fält, som om du kommer ihåg är den taxonomi vi skapade i settings.yaml. Inne i varje egendom måste vi ange typ av typ (eller som standard till en textruta), dess displaytext (vilken kommer att vara standard till egenskapsnamnet) och om det är nödvändigt. Det finns andra alternativ du kan ställa in, inklusive instruktioner och standardvärdet. Du kan visa mer information om dessa alternativ på Statams webbplats. Utöver dessa inställningar kan olika fälttyper ha egna anpassade alternativ.
För språk input, ställde jag in den för att använda märka typ, som låter dig ställa in flera taggar för det här alternativet. Det är bara en annan typ av ingång för att ange sitt värde i admin. Du kan se alla olika fälttyper i Statams dokumentation eller på det officiella Statliga fuskbladet under "Fälttyper".
De beskrivning och länk är ganska mycket desamma. De kommer båda att vara textrutor, förutom en kommer att krävas och den andra kommer inte att vara. Förutom de fält du anger kommer alla poster att ha ett titel- och innehållsfält. Vi vill verkligen inte ha ett innehållsfält - i våra verk kommer de att vara mer som länkar - så jag har ställt den till dold.
Det sista steget innan vi går till admin är att skapa en page.md filen inuti Arbetar katalogen. Det här är inte nödvändigt, men administratören försöker få titeln på den här typen av inlägg, så det är en bra idé att bara placera den. För att göra detta, skapa en page.md filen inuti Arbetar mapp med bara titeln satt till "Works":
--- titel: Works ---
För att komma in i admin måste vi först skapa en användare. Det här är en enkel YAML-fil inuti config mapp. Namnet på filen är det användarnamn som du ska använda för att logga in, och inuti filen konfigurerar du användarens uppgifter och lösenord.
Låt oss skapa en ny användare med ett användarnamn på redaktör. Vi gör det genom att skapa en fil som heter editor.yaml inuti _config / användare / mapp. Infoga följande data (förutom med din information istället för min):
--- first_name: Gabriel last_name: Manricks roller: [admin] email: [email protected] lösenord: lösenord --- Redaktören för denna portfölj
De flesta av dessa kolumner är ganska raka framåt och jag tror inte att de behöver någon förklaring. Det enda fältet som är värt att nämna är roller miljö. För närvarande administration är det enda alternativet som är tillgängligt, men i framtiden kommer det att vara där du skulle kunna justera användarens redigeringsbehörigheter.
Det är också värt att nämna att lösenordet inte kommer att ligga i ren text. Efter den första inloggningen har Statamic hash lösenordet tillsammans med ett salt och inkluderar de här istället.
Allt efter de streckade linjerna kommer att lagras som innehållet för den här användaren, och kan användas som en slags bio för dem.
Spara nu den här filen, och om din webbserver fortfarande körs, navigera till /administration i din webbläsare. Detta öppnar inloggningskonsolen där du kan skriva in dessa egenskaper. Första gången du loggar in måste du göra det två gånger, en gång till hash lösenordet och andra gången att faktiskt logga in.
När du är inloggad kommer du att se en lista över våra sidor. Inkluderat är vår hemsida samt inlämningstypen "Works". Låt oss ta en titt på vad vår fältdeklaration gjorde för oss. Klicka på Skapa länk inuti Arbetar bar.
Du borde se en fin blankett som innehåller alla de fält som vi angav och titeln. Försök lägga till några inlägg för att testa det.
Med några sparade inlägg har vi slutfört en omgång. Du vet nu hur man skapar sidor, teman, användare och poster, det är ett utmärkt första steg. Men det finns mycket mer Statamic har att erbjuda.
Att ha några inlägg skapade är trevligt, men vad skulle vara bättre är om vi faktiskt kunde visa dem på en sida. För detta behöver vi ändra standardmallen.
Detta kommer att bli vår första riktiga interaktion med den medföljande templerande motorn, men oroa dig inte, Statams intuitiva design gör det enkelt att plocka upp.
För att se en fullständig lista över de tillgängliga taggarna kan du titta på Statams dokumentation. Allt vi verkligen behöver för detta exempel är anteckningar tagg, som används för att dra in poster från en specifik mapp i _innehåll katalogen. Det finns många valfria egenskaper, så att du kan filtrera efter datum, eller genom förhållanden som taxonomier eller till och med standardegenskaper. Vi kommer att hålla det enkelt och bara lista egenskaperna efter datum (vilket är standard).
Här är den fullständiga nya standardmallen (templates / default.html):
Portfölj
language | title - description |
I denna kod skapar vi ett bord och loopar genom alla inlägg i "works" katalogen. Dessa typ av block-taggar, där du placerar mer HTML inuti, tilldelar nya platshållare. Förutom att ge tillgång till saker som alla postens attribut, får du även speciella hjälpvariabler som kan berätta om saker som det aktuella indexet, eller om det här är första eller sista inlägget. Vi använder inte någon av dessa variabler. Allt vi behöver är att visa titeln, språket, beskrivningen och länken. Men om du laddar upp sidan i din webbläsare kommer du förmodligen inse att istället för att visa språket står det bara "Array".
Detta beror på att vi ställer in den här egenskapen som en typtagg, vilket innebär att den kan innehålla mer än ett språk. Så även om du kanske bara har satt ett språk, lagras det fortfarande i en array. Lyckligtvis kommer Statamic med modifierare.
För att avsluta den här guiden, låt oss ta en titt på några modifieringsmedel som gör att vi kan göra den här sidan ännu bättre.
Det första och största problemet är att få språket att dyka upp. Om du tittar på Static Cheat Sheet hela vägen längst ner till vänster ser du en sektion som heter Lista genvägar. Medan du inte tekniskt är modifierare, tillåter Statamic dig att lägga till dessa ord i slutet av en listvariabel, och det kommer istället att returnera en strängrepresentation. Den jag vill använda i denna situation är standarden _lista hjälpare. Vad detta kommer att göra är att separera flera värden i arrayen med ett komma och utrymme, och det är vad vi vill ha i vår situation.
För att prova det, byt ut language tagga med language_list. Uppdatera din webbläsare och det ska nu visa språk på rätt sätt.
Därefter lägger vi till en modifierare till titeln för att göra allt stort. Om du någonsin har använt något som Smarty-templerande motor fungerar det på samma sätt. Du lägger till ett rör i slutet av variabelnamnet och lägger sedan till en modifierare. I vårt exempel behöver du bara byta ut samtalet till title med title | upper och dessa är kedjbara så att du kan fortsätta lägga till rör i obestämd tid.
Låt oss nu bara lägga till lite CSS för att stile allt upp. Kom ihåg att det här går in i css / portfolio.css fil:
kropp bakgrund: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; marginalbotten: 28px; bord font: 15px 'Coustard', serif; td vaddering: 10px 10px 0 10px; p margin-bottom: 15px; .lang p bakgrund: # CA9F53; färg: #FFF; vaddering: 3px 5px; textjustera: höger; .work text-align: left; .work a border-bottom: 1px solid # 000; text-dekoration: ingen; .title font-weight: 600; färg: # 000; .desc färg: # 666;
Och dessa två teckensnitt är från Google Fonts, så du måste lägga till följande länk högst upp i din standardlayoutfil:
_sidnamn layout_content
Om allt fungerat borde du se följande sida (förutom med de arbeten du lade till):
I den här handledningen har jag tagit dig igenom hela processen från att installera ramverket, att ställa in allt, skapa en ny posttyp och bygga ett anpassat tema. Det är mycket att göra, och det är bara möjligt på grund av hur lätt Statamic gör saker.
Vi har redan sett en hel del funktionalitet och vi har inte ens berört med att skapa egna moduler och utvidga Static med PHP, men jag tycker att det mest fantastiska så länge är att vi inte har skrivit en enda rad av PHP i hela denna handledning! Det är något att skryta om.
Så jag tror att den viktigaste frågan folk kan ha är, "Ska jag använda den?", Eller "Vad ska detta ersätta i mitt nuvarande repertoar?" Det är viktigt att mäta vad statiken är för. Om du bygger en ny uppstart och behöver flexibiliteten i en fullsträckt ram, är jag säker på att du skulle kunna få den att springa i Static, men det skulle vara mycket anpassad kod, som kan besegra syftet. Där tror jag att detta kommer att trivas är som en bloggplattform eller CMS.
Ur en bakgrund i WordPress känns det som en direkt efterträdare. Det följer mycket av samma konventioner i teorin, men de implementeras alla på ett mycket smartare sätt. Att jämföra mängden kod som krävs i varje blir ett skämt. Framåtriktat har Statamic ett otroligt API för att bygga anpassade taggar, krokar, nya fälttyper och mer, och du kan tänka dig att Statamic gör det så lunt och enkelt att göra som du kanske har kommit.
Jag hoppas att du haft den här artikeln, om du har några frågor kan du fråga mig nedan, på twitter @ gabrielmanricks eller på Tuts + web dev IRC-kanalen på freenode (#nettuts).
Accentsconagua