Share
Statisk er et moderne PHP CMS som virkelig gjør en innsats for å være enkel og intuitiv å bruke. Fra sin flatfildesign til bruk av teknologier som Markdown og YAML, kan du oppnå en enestående mengde arbeid uten å skrive noen kode i det hele tatt.
I denne artikkelen vil vi se på prosessen fra installasjon for å sette opp en grunnleggende portefølje.
Å ha en flatfildesign er oppsettet like enkelt som å utvinne zip-filen du laster ned fra det statiske nettstedet. Det er ingen database involvert, alt innhold og innstillinger lagres lokalt i en rekke forskjellige filer, noe som også betyr at du har automatisk sikkerhetskopiering og versjonering av alt innholdet ditt hvis du bruker noe som Git.
Med innholdet ekstrahert, la oss ta en titt på Statams struktur.
Det er mer eller mindre fem forskjellige mapper du mest sannsynlig vil samhandle med, og de er:
Foruten disse har du følgende fire mapper som du sannsynligvis ikke vil berøre direkte:
Det første trinnet i hvert statisk nettsted er å konfigurere opsjonene.
Alle konfigurasjonsfilene er inne i _config-mappen som beskrevet ovenfor. Hovedfilen du bør ta en titt på er settings.yaml.
Hvis du er ny til YAML, så er alt du virkelig trenger å vite at det er et datformat som ligner på JSON, bortsett fra at det er ment å være et mer lesbart format. Den oppnår dette ved å ikke kreve noen separerende tegn som semikolon eller anførselstegn, i stedet får den sin struktur fra plassering og innrykning.
De settings.yaml filen er veldig godt dokumentert, så du bør ikke ha et problem å fylle ut det. Noen av alternativene du vil trolig vil se på, er følgende:
_license_key: Skriv inn lisensnøkkelen _site_name: Min portefølje _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - språk _log_enabled: true _cookies.secret_key: Noen tilfeldig nøkkel
De fleste av disse er ganske enkle, for eksempel å sette inn lisensnøkkelen, nettstedets navn og URL. De tema alternativet angir hvilken temamappe som skal lastes inn. Vi kommer inn på dette på et øyeblikk, men et tema er i hovedsak stedet der du angir hvordan de forskjellige sidene på nettstedet ditt skal fungere. Vi skal skape vårt eget tema slik at du kan nevne det du vil. Jeg valgte 'portefølje'.
Det neste alternativet er et array som kalles taksonomi. Hvis du noen gang har brukt noe som WordPress, bør du vite hva dette er for. I utgangspunktet kan du legge til en innstilling eller "type" for hvert innlegg, og du kan deretter bruke disse taksonomiene til å filtrere innholdet ditt og lage egendefinerte sider for disse grupperinger.
Jeg legger bare til en taksonomi; Språklatonomien, fordi i vår eksempelportefølje skal vi spesifisere hvert arbeids programmeringsspråk. Du trenger ikke å opprette en taksonomi for hver egendefinert egenskap. Vi skal ønske andre ting i vår portefølje, som lenker og beskrivelser. En taksonomi er for felt som flere oppføringer har til felles, og for felt som du kanskje vil lage en egendefinert side for.
De log_enabled Innstillingen slår på logging, slik at du kan se problemer som kommer opp fra administrasjonspanelet. De vil bli lagret i _logs mappe vi så tidligere. Endelig er det siste alternativet jeg nevnte den hemmelige nøkkelen som brukes til å kryptere informasjonskapselen.
Denne filen kan nå lagres, men før vi går videre til innhold, la oss ta et øyeblikk for å sette opp porteføljemalen slik at vi kan se hva vi gjør.
Som de fleste moderne rammer, når du laster inn en side, kan du bygge den opp fra flere gjenbrukbare komponenter. En side i Statamic består av a oppsett, en mal, og a innholdsfilen. Både layoutfiler og maler kan eventuelt også bli laget av enda flere stykker kalt partials.
De oppsett er det ytre skallet der malen blir plassert. Dette brukes vanligvis til å holde HTML-koden for kjeveplaten som hoveden, så vel som den grunnleggende kroppen som alle sidene som bruker dette oppsettet vil trenge, for eksempel å legge til felles biblioteker nederst på filen.
De mal er en spesifikk visning for en enkelt side. Du kan ha en startside mal, en kontakt side mal, og så videre. Du trenger ikke å opprette en per side, men jeg vil anbefale en per type av siden.
I disse malene har du muligheten til å bruke variabler lagret i de faktiske innholdsfiler. For eksempel, si at du trenger en side som viser en indeks av bøker du leser, og deretter en annen side for å vise en liste over viser du ser på. I stedet for å kopiere det meste av koden for hver side, kan du opprette en mal for å vise en liste over objekter, og deretter trekke inn spesifikkene for hvilken liste som skal hente fra selve innholdsfilen.
De innholdsfilen-som navnet antyder - er den faktiske ressursen vist. Dette kan variere fra ting som en faktisk unik nettside til en enkelt bloggoppføring. Vi kommer til disse i flere detaljer om et øyeblikk.
I stedet for å manuelt opprette alle disse forskjellige komponentene, gir Statamic en slags startmaler, noe som gir deg en grunnleggende struktur for å komme i gang. Du kan laste ned temamappen fra Github.
Bare plasser hele mappen i _themes katalog, og gi nytt navn til mappen til «portefølje» (som det er temanavnet vi erklærte i innstillingsfilen). Du må også endre navn på kindling.js fil fra js-mappen og kindling.css fil fra css katalog, til portfolio.js og portfolio.css henholdsvis, da det er en spesiell kode for å trekke disse inn automatisk.
Det er alt oppsettet vi trenger nå, men for å få en bedre ide om hva jeg snakket om om layout og mal, la oss se på disse filene. Til å begynne med, åpne filen som heter default.html fra oppsett mappe. Dette tilsvarer standardoppsettet som du kanskje har gjettet.
_side navn layout_content
Som jeg nevnte tidligere, er oppsettet et bra sted å sette kode som kreves på flere sider (eller maler heller), og derfor inneholder standardoppsettet i denne filen bare den grunnleggende oversikten over en HTML-fil. Nå har vi ikke snakket om det ennå, men Statamic kommer med sin egen templerende motor, som er ganske lett å plukke opp. Du legger i utgangspunktet bare en tag hvor du vil at noe skal settes inn, ligner håndterker hvis du er kjent med det.
Denne oppsettet inneholder et par merker som jeg trodde jeg ville gå gjennom, den første er _side navn. Denne taggen refererer faktisk til eiendommen vi satt opp inne i settings.yaml fil. Du vil finne denne konvensjonen hele Statisk. Du kan angi YAML-alternativer enten globalt som dette, eller til og med per fil, og du kan da få disse alternativene bare ved å plassere en tag med navnene sine i malene dine.
Den neste taggen, som faktisk kommer opp to ganger, er tema stikkord. Hjelpere i statisk er mer som uavhengige moduler, slik at de kan ha flere forskjellige funksjoner knyttet til samme navn; Du får tilgang til de enkelte funksjonene med et kolon og deretter navnet på kommandoen du vil ha.
De tema tag handler om å laste inn ressurser som er spesifikke for dette temaet. Det kan brukes til å trekke inn ting som skript og stilark, men også ting som bilder og deler. Det er en hjelperfunksjon som i utgangspunktet lar deg bare gi navnet på ressursen du vil ha, og den vil fylle banen til gjeldende mallkatalog. Så for eksempel hvis du skulle skrive:
tema: js src = "underscore.js"
Det ville erstatte det med en lenke til en fil som heter underscore.js inne i det nåværende temaets js-mappe. Som standard hvis ingen parameter for parameteren er satt for kommandoen js eller css, antas det at du henviser til en js- eller css-fil med navnet på det aktuelle temaet, og derfor omdøpte vi disse filene. Det er bare et spørsmål om bekvemmelighet, så vi trenger ikke å spesifisere dem, og det rydder opp kilden litt.
Neste tag som kommer opp er layout_content. Dette ligner på utbytte i andre templerende motorer, og det betyr i utgangspunktet hvor den indre mal skal settes inn.
Det siste jeg vil gjøre i denne filen, er å fjerne linken til jQuery, fordi jeg ikke vil bruke den (hvis du vil da kan du selvfølgelig forlate det).
Neste, la oss flytte til standardmalfilen (templates / default.html). Det skal være tomt. For utdanningens skyld, la oss legge til en koden som heter innhold som bare legger inn innholdet på den aktuelle siden som lastes inn.
Så for å gjenopprette, når du går til en side, vil den først laste opp oppsettfilen, og deretter hvor som helst Layout_content tag er plassert denne malen vil bli satt inn. Denne malen vil da bare gi ut hva den nåværende siden har inne.
Med det gjort, lagre disse filene og la oss gå videre til innhold.
Innhold i Statisk er spesifisert i Markdown-filer som standard, og standardfilen lastes inn page.md. På samme måte som en standard webserver vil laste index.html hvis ingen fil er spesifisert, vil Statamic laste page.md.
Det er også verdt å merke seg at ruter eller URL-linker på nettstedet ditt blir definert av _innhold katalogen. For eksempel, hvis du oppretter en mappe som heter demo i _innhold katalog, og plasser en fil med navnet link.md, Dette vil korrespondere med nettadressen / Demo / link. Hvis du plasserer en page.md fil inne, det vil bli lastet hvis du navigerer til /demo/ siden det er standard filnavn.
Statisk kommer med noe demoinnhold, men du kan bare slette alt inni _innhold katalog for dette eksempelet (eller flytt det til side for nå).
La oss starte med en grunnleggende hjemmeside. På roten av _innhold katalog, opprett en fil som heter page.md med følgende:
--- tittel: Hjem --- # Velkommen til title siden
Alle innholdsfilene er delt inn i to seksjoner; YAML-fronten og innholdet. Den øverste delen (mellom de strekkede linjene) er hvor du kan sette standard YAML spesifikk for denne filen, og er en god måte å angi alternativer for å justere malfiler. Den andre delen er Markdown-området, hvor du legger inn innholdet på selve siden. Du kan bruke standard Markdown samt Statisk hjelpetiketter.
Denne siden lastes med standard layout og malfiler vi nettopp har opprettet, men hvis du vil at den skal bruke forskjellige, kan du spesifisere disse som alternativer i YAML-delen øverst ved å bruke _oppsett og _mal henholdsvis.
Hvis du lager en server i roten til din statiske katalog:
php -S localhost: 7000
... og deretter navigere til http: // localhost: 7000 i nettleseren din bør du se H1-taggen med vår velkomstmelding.
Dette er alt du trenger å vite for å lage sider i Statisk, og hvis du bygger en ganske statisk side, ville dette være nok. Men for mange nettsteder må vi kunne legge til dynamiske data, som kan ha formen av blogginnlegg, butikkartikler, eller i vårt tilfelle porteføljeverk.
Det er ingen database i Statisk, slik at disse typer oppføringer lagres i Markdown-filer akkurat som siden vi nettopp har bygget, selv om et par ting ble gjort for å intuitivt introdusere flere funksjoner for å optimalisere ting og få det til å fungere i administrasjonen.
Først kan du navngi filene med et spesielt datoformat slik at de kan sorteres og filtreres etter dato. Du gjør dette ved å vente på tittelen med en år måned dag mønster. Hvis du ønsket å lage et innlegg som heter 'foobar', ville du kalle det noe som:
2013-09-15-foobar.md
Eventuelle innstillinger posten krever, gå inn i forsiden seksjonen øverst, og deretter plasseres innholdet under. Dette følger formatet på sider som beskrevet ovenfor.
Selv om dette er ganske kult, svarer det til at man manuelt skriver inn innlegg i en database med et tradisjonelt system. Det er et annet alternativ!
Statisk kommer med en veldig fin admin som kan gjøre alt dette for deg, men for å få det satt opp må vi fortelle hvilke felt denne typen oppføring skal ha. Dette gjøres i en fil som er riktig navngitt fields.yaml.
Så for vårt eksempel, la oss lage en mappe i _content-katalogen som heter virker, og inne i virker mappe la oss lage en fil som heter fields.yaml. Inne i fields.yaml fil må vi angi hvilke egenskaper våre "oppføringer" inneholder og de enkelte typene for hver av disse innstillingene.
Du kan enten angi feltsettet (listen over felt) i _config / feltsett / katalog og trekk inn en definisjon, eller du kan bare skrive inn definisjonen her (eller du kan gjøre begge for å utvide en eksisterende definisjon). For vårt enkle eksempel skal jeg bare legge definisjonen her, siden vi ikke vil gjenbruke den hvor som helst:
type: datofelt: språk: type: tagsvisning: programmering Språk kreves: sann beskrivelse: type: tekstvisning: Beskrivelse kreves: Falsk lenke: Type: Tekstvisning: Kobling kreves: Sant innhold: Type: Skjult
Den første eiendommen forteller bare til Statamic at vi vil at disse oppføringsfilene skal ha en datoegenskap og bli navngitt på riktig måte. Deretter åpner vi opp et YAML-objekt som heter Enger inneholder alle egenskapene til våre oppføringer.
Den første er Språk feltet, som hvis du husker, er den taksonomien vi opprettet i settings.yaml. Innenfor hver eiendom må vi spesifisere typen (eller den er standard til en tekstboks), dens displaytekst (som vil være standard på eiendomsnavnet), og om det er nødvendig. Det finnes andre alternativer du kan angi, inkludert instruksjoner og standardverdien. Du kan vise mer informasjon om disse alternativene på Statams nettside. Ved siden av disse innstillingene kan forskjellige felttyper ha egne tilpassede alternativer.
For Språk Input, jeg satte den til å bruke stikkord type, som lar deg sette flere koder for dette alternativet. Det er bare en annen type inngang for å legge inn verdien i administrasjonen. Du kan se alle de forskjellige felttyper i Statams dokumentasjon eller på den offisielle Static Cheat Sheet under 'Fieldtypes'.
De beskrivelse og link er ganske mye det samme. De vil begge være tekstbokser, bortsett fra at en vil være nødvendig og den andre vil ikke være. I tillegg til feltene du angir, kommer alle oppføringer med et tittel- og innholdsfelt. Vi vil egentlig ikke ha et innholdsfelt - i våre verk vil de være mer som lenker - så jeg har satt den til skjult.
Det siste trinnet før vi går til administrasjonen er å opprette en page.md fil inne i virker katalogen. Dette er ikke nødvendig, men administratoren vil forsøke å få tittelen på denne oppføringstypen herfra, så det er en god ide å bare plassere den. For å gjøre dette, opprett en page.md fil inne i virker mappe med bare tittelen satt til 'Works':
--- tittel: Works ---
For å komme inn i administrasjonen må vi først opprette en bruker. Dette er en enkel YAML-fil innsiden av config mappe. Navnet på filen er brukernavnet du vil bruke til å logge inn, og inne i filen konfigurerer du brukerens detaljer og passord.
La oss lage en ny bruker med et brukernavn på redaktør. Vi gjør dette ved å opprette en fil som heter editor.yaml innsiden av _config / brukere / mappe. Sett inn følgende data (unntatt med informasjonen din i stedet for min):
--- first_name: Gabriel last_name: Manricks roller: [admin] email: [email protected] passord: passord --- Redaktøren av denne porteføljen
De fleste av disse kolonnene er ganske rett frem og jeg tror ikke de trenger noen forklaring. Det eneste feltet som er verdt å nevne er roller innstilling. For tiden admin er det eneste alternativet som er tilgjengelig, men i fremtiden vil dette være hvor du vil kunne justere brukerens redigeringsrettigheter.
Det er også verdt å nevne at passordet ikke vil være i ren tekst. Etter første innlogging, vil Statamic hash passordet sammen med et salt og inkludere de her i stedet.
Alt etter de strekkede linjene vil bli lagret som innholdet til denne brukeren, og kan brukes som en slags bio for dem.
Lagre denne filen nå, og hvis webserveren fortsatt kjører, naviger til / admin i nettleseren din. Dette åpner innloggingskonsollen der du kan skrive inn disse egenskapene. Første gang du logger på, må du gjøre dette to ganger, en gang til hash passordet, og den andre gangen du faktisk logger inn.
Når du er logget inn, vil du se en liste over våre sider. Inkludert er vår hjemmeside, så vel som "Works" oppføringstype. La oss ta en titt på hva vår feltdeklarasjon gjorde for oss. Klikk på Skape lenke innsiden av Virker Bar.
Du bør se et fint skjema som inneholder alle feltene vi oppgav, og tittelen. Prøv å legge til noen innlegg for å teste det ut.
Med noen innlegg lagret, har vi fullført runde en. Du vet nå hvordan du lager sider, temaer, brukere og oppføringer, det er et flott første skritt. Men det er mye mer Statamic har å tilby.
Å ha noen innlegg opprettet er fint, men det som ville vært bedre er om vi faktisk kunne vise dem på en side. For dette må vi redigere standardmalen.
Dette blir vår første virkelige interaksjon med den medfølgende templeringsmotoren, men ikke å bekymre deg, Statams intuitive design gjør det enkelt å hente.
For å se en fullstendig liste over de tilgjengelige kodene kan du se på Statams dokumentasjon. Alt vi virkelig trenger for dette eksempelet er innganger tag, som brukes til å trekke inn oppføringer fra en bestemt mappe i _innhold katalogen. Det finnes mange valgfrie egenskaper, slik at du kan filtrere etter dato, eller ved forhold som taksonomier eller til og med standardegenskaper. Vi skal holde det enkelt og bare liste egenskapene etter dato (som er standard).
Her er den komplette nye standardmalen (templates / default.html):
Portfolio
Språk | title - description |
I denne koden oppretter vi et bord og looping gjennom alle innlegg i "works" katalogen. Disse slags blokker, hvor du plasserer mer HTML inne, tilordner nye plassholdere. Bortsett fra å gi tilgang til ting som alle innleggets attributter, får du også spesielle hjelpevariabler som kan fortelle ting som gjeldende indeks, eller om dette er det første eller siste innlegget. Vi vil ikke bruke noen av disse variablene. Alt vi trenger er å vise tittelen, språket, beskrivelsen og lenken. Men hvis du laster opp siden i nettleseren din, vil du sannsynligvis innse at i stedet for å vise språket står det bare "Array".
Dette skyldes at vi angir at denne egenskapen skal være en typekode, noe som betyr at den kan inneholde mer enn ett språk. Så selv om du kanskje bare har satt ett språk, blir det fortsatt lagret i en matrise. Heldigvis kommer Statamic med modifikatorer.
For å fullføre denne veiledningen, la oss se på noen få modifikatorer som gjør at vi kan gjøre denne siden enda bedre.
Det første og største problemet er å få frem språket. Hvis du tar en titt på Static Cheat Sheet, helt til nederst til venstre, vil du se en seksjon som heter Liste snarveier. Selv om det ikke er teknisk å være modifikatorer, tillater Statamic deg å legge til disse ordene til slutten av en listevariabel, og det vil isteden returnere en strengrepresentasjon. Den jeg vil bruke i denne situasjonen er standarden _liste hjelper. Hva dette vil gjøre, er å skille flere verdier i matrisen med et komma og rom, og er det vi ønsker i vår situasjon.
For å prøve det, erstatt Språk tag med language_list. Oppdater nettleseren din og den skal nå vise språkene riktig.
Deretter la vi legge til en modifikator til tittelen for å gjøre det hele stort. Hvis du noen gang har brukt noe som Smarty Templating Engine, fungerer dette på samme måte. Du legger til et rør til slutten av variabelenavnet og legger til en modifikator. I vårt eksempel trenger du bare å bytte anropet til title med title | upper og disse er kjedbare slik at du kan fortsette å legge til rør på ubestemt tid.
La oss bare legge til noen CSS for å stille alt på. Husk at dette går i css / portfolio.css fil:
kropp bakgrunn: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; margin-bunn: 28px; bord font: 15px 'Coustard', serif; td polstring: 10px 10px 0 10px; p margin-bunn: 15px; .lang p bakgrunn: # CA9F53; farge: #FFF; polstring: 3px 5px; tekstjustering: høyre; .work text-align: left; .work en border-bottom: 1px solid # 000; tekst-dekorasjon: ingen; .title font-weight: 600; farge: # 000; .desc color: # 666;
Og disse to skrifttyper er fra Google Fonts, så du må legge til følgende kobling øverst på standard layoutfilen din:
_side navn layout_content
Hvis alt trengs, bør du se følgende side (unntatt med arbeidene du la til):
I denne opplæringen har jeg tatt deg gjennom hele prosessen fra å installere rammen, sette inn alt, lage en ny oppføringstype og bygge et tilpasset tema. Det er mye å gjøre, og det er bare mulig på grunn av hvor lett Statamic gjør ting.
Vi har allerede sett mye funksjonalitet allerede, og vi har ikke engang rørt på å lage dine egne moduler og utvide statisk med PHP, men jeg synes det mest fantastiske er så langt at vi ikke har hatt å skrive en enkelt linje med PHP i hele denne opplæringen! Det er noe å skryte av.
Så jeg tror det viktigste spørsmålet folk kan ha er, "Skal jeg bruke den?", Eller "Hva skal dette erstatte i mitt nåværende repertoar?" Det er viktig å måle hva Statisk er for. Hvis du bygger en ny oppstart og trenger fleksibiliteten til et fullverdig rammeverk, er jeg sikker på at du vil kunne få den til å løpe i Statisk, men det ville være mye tilpasset kode, som kan beseire formålet. Hvor jeg tror dette vil trives, er som en blogging-plattform eller CMS.
Kommer fra en bakgrunn i WordPress, føles dette som en direkte etterfølger. Det følger mange av de samme konvensjonene i teorien, men de er alle implementert på en mye smartere måte. Å sammenligne mengden kode som kreves i hver blir en vits. Fremover har Statamic en utrolig API for å bygge egendefinerte koder, kroker, nye felttyper og mer, og du kan forestille deg at Statamic gjør det så mager og enkelt å gjøre som du kanskje har kommet til å forvente.
Jeg håper du likte denne artikkelen, hvis du har spørsmål, kan du spørre meg nedenfor, på twitter @ gabrielmanricks, eller på Tuts + web dev IRC-kanalen på freenode (#nettuts).
Accentsconagua