Share
Webhook er en ny plattform for byggeplasser som ble støttet på Kickstarter i mai 2014, og har nettopp blitt utgitt for publikum. Konseptet bak Webhook er, hvis du vil unnskyld min entusiasme, helt strålende.
En av de oftest hørte forespørslene i mange CMS-fellesskap er "Hvordan kan jeg tilpasse systemet til (fyll ut det tomme)". Gutta bak Webhook ønsket å takle dette vanlige behovet, men i stedet for å lage et nytt prebuilt CMS med ideen om å gjøre det utvidbart tok de ting et skritt videre og spurte:" Hva om vi opprettet en CMS byggherre i stedet?".
Webhooks mest unike og ganske muligens spillbyttende funksjon er at for hvert enkelt nettsted kan du styre nøyaktig hvilken type innhold som kan legges ut via enkle dra og slippe formbyggere i administrasjonsområdet.
La oss si at du må publisere podcaster, men du ønsker ikke å håndtere typiske blogginnlegg og sider. Du vil opprette en innholdstype "Episoder" og dra og slippe feltene der du kan skrive inn episodenavn, skrive inn episodeblurbs og laste opp podcastfiler.
Eller hva om du vil ha en blogg, men du vil også ha et sted å vise et galleri med videoer? Du kan også gjøre det, bare "dra og slipp" deg selv et tradisjonelt blogginnleggsområde pluss en annen seksjon dedikert til å legge til videoer.
Og hva med om du trenger å lage flere forskjellige innholdstyper som har komplekse forhold til hverandre? Ja, det kan du også gjøre. Kort av fullblåst e-handel eller medlemskapsstyring, uansett hvilket nettsted du trenger, kan du opprette CMS-grensesnittet for å passe.
Grunnprinsippet til Webhook er at du burde ha muligheten til å lage et CMS med alt du trenger og ingenting du ikke gjør, for hvert enkelt prosjekt. La oss hoppe inn og se på hvordan Webhook fungerer, og hvordan du kan komme i gang med det.
Webhook bor på to steder:
Du installerer Webhook lokalt og bygger nettstedet ditt offline, slik at du kan få administrasjonsområdet, presentasjonen og innholdet akkurat slik du vil ha det. Deretter distribuerer du den til live serveren når du er klar. Fra det tidspunktet kan du også kontinuerlig oppdatere nettstedet ditt lokalt og omorganisere så mange ganger du vil.
Webhook installeres på bare noen få minutter via kommandolinjen gjennom NPM.
Etter at Node.js er installert, brann opp en terminal (Mac / Linux) eller kommandoprompt (Windows) og kjør kommandoen:
npm installere -g grunt-cli wh
Merk: Du må kanskje prepend det med kommandoen "sudo" for å få administratorrettigheter på Mac eller Linux.
Dette laster ned alle Webhooks nødvendige filer og setter opp datamaskinen din slik at den kan opprette og administrere Webhook-nettsteder fra kommandolinjen.
Når Webhook er installert, kan du gå videre og opprette et nettsted ved å kjøre kommandoen:
hv opprett din_stednavn
I terminalen din må du da skrive inn e-postadressen du har tilknyttet Webhook, og enten angi eller skriv inn passordet ditt:
Når oppsettet er ferdig, ser du en bekreftelse:
Hva skjedde nå? Du finner en mappe som er opprettet lokalt med navnet du oppgav under opprettelsen, og de nødvendige filene er lastet ned til det:
Du er nå klar til å kjøre din lokale Webhook-server, slik at du kan jobbe på nettstedet ditt offline før du distribuerer det live. For å gjøre dette, må du først gå til webområdet ditt i terminalen ved å skrive inn:
cd din_stednavn
Kjør deretter kommandoen:
hv tjener
Ditt lokale nettsted åpnes automatisk i standard nettleseren din, og du får se:
Når du klikker på Leter etter CMS? lenke du må logge inn, så blir du tatt til en skjerm hvor du må bestemme om du skal gå med et eksisterende Webhook-tema eller opprette en fra begynnelsen:
Webhook-temaer spiller en ganske annen rolle for de andre plattformene, så før du går videre må du forstå hva du egentlig velger når du velger et Webhook-tema eller velger å bygge en ny.
På et tradisjonelt CMS-tema styrer måten et nettsted ser ut, mens innholdstypene og inntaksmetoderne administreres separat. Men på Webhook bestemmer temaet ikke bare presentasjonen, men hvilken type innhold nettstedet aksepterer, samt hvordan innholdet blir lagt ut via administrasjonspanelet.
Hvis du for eksempel installerer det forhåndsbestemte "Podcast og blogget" -temaet, får du en målrettet designfront med inkluderinger som iTunes-koblinger, lydspillere, nedlastingskoblinger og så videre:
Men du får også et spesialdesignet adminområde som er spesifikt for typen innhold du vil legge inn på nettstedet ditt:
Legg merke til de podcastrelaterte innholdstypene "Cast Members", "Episodes" og "Podcast Details". Legg også merke til hvordan i det ovennevnte skjermbildet av "Episodes" -postingsgrensesnittet, har det bare felt som er spesifikt for å legge inn en podcast, dvs. episodnummer, lydfilinnsetting osv. Du trenger ikke å arbeide rundt noen overflødige innholdsinngangsfelt som ikke vil være Brukt.
Både frontendens elementer og det du ser i bakenden, styres av temaet. Så på en måte, for hvert Webhook-område temaet er CMS.
På mange måter gir dette mye mening. På en hvilken som helst plattform må et tema justere seg med typen innhold som kan legges ut på nettstedet. På et tradisjonelt CMS hvis en ny tilpasset innholdstype legges til, kan det for eksempel ofte ikke brukes av et plugin hvis et tema ikke støtter det. Webhooks tilnærming er helt sikker på at tema og innholdstyper av et nettsted samsvarer perfekt ved å inneholde dem i samme system.
I fremtidige opplæringsprogrammer vil vi dekke i dybden hvordan du bygger opp egne egendefinerte Webhook-temaer, så med det formål å introdusere deg til plattformen gikk jeg med forhåndsbygget alternativ. Dette ga meg åtte temaer å velge mellom.
Jeg valgte "Bootstrap blog", som er en enkel blogging tema utformet med Bootstrap som gir deg innholdstypene "Artikler" og "Om meg" i administrasjonsområdet:
Etter at jeg hadde lagt til noe, så så fremsiden av mitt lokale nettsted slik:
Å ta det du har opprettet lokalt og distribuere det til ditt nettsted er også utrolig enkelt. Åpne en terminal i mappen, og husk det lokale stedet og kjør kommandoen:
hv deployere
Merk: Jeg fant det enklest å åpne en annen terminal for å gjøre dette, fordi det lot meg forlate den første terminalen jeg åpnet kjører min lokale Webhook-prosess.
Når distribusjonen er vellykket, får du en bekreftelse i terminalen din sammen med en påminnelse om nettadressen der du kan se ditt nettsted:
Du kan besøke demo-siden opprettet på http://tutsplusdemo.webhook.org/
Som nevnt tidligere vil vi gi deg full opplæring på Webhook-temaer i nær fremtid. Likevel, la oss ta en titt på et enkelt eksempel på å tilpasse et av nettstedets innholdstyper, slik at du får en ide om hvor lett det kan være.
Som standard viser "Om meg" -siden en overskrift og et bio:
Vi skal legge til muligheten til å legge til en nettsideadresse til slutten av siden.
Gå til administrasjonsområdet og klikk Legg til / rediger innholdstyper i venstre sidefelt:
Du vil bli vist en liste over eksisterende innholdstyper:
Klikk på Om meg oppføring og du vil bli tatt til skjemaets byggesystem. På venstre side av skjermen ser du alle de forskjellige typer innholdsinngangsfelt du kan legge til, kalt "Widgets" i Webhook-terminologi. Finn nettsted widget i nærmere seksjonen, og dra den fra venstre og slipp den til høyre:
Klikk på Lagre skjema knappen nederst til høyre på grensesnittet:
Etter at lagringen er fullført, blir du tatt til innholdsinnleggsskjemaet du nettopp har oppdatert, hvor du vil se den nye nettsted felt. Når du svinger over feltet, vises også taggen du bør bruke for å vise innholdet i den aktuelle malfilen:
I «sider» -undermappen i dette temaet er malfilen "about.html" som styrer presentasjonen av «Om meg» -siden. Vi vil dekke mer om hvordan templeringssystemet fungerer i vår fullstendige Webhook-tutorial.
For nå kan du bare åpne filen "about.html" og finne linjelesningen:
about.body | safe
Under denne linjen legger du til følgende:
about.website
Lagre filen, og ditt lokale nettsted vil oppdage endringen og automatisk oppdatere, på hvilket tidspunkt vil du se din nye lenke under hovedteksten:
Etter å ha opplevd all funksjonalitet jeg har beskrevet ovenfor, var jeg allerede imponert av Webhook og tenkt på programmer som jeg kunne bruke den til, men likevel fant jeg enda flere funksjoner som fortsatte å pique min interesse.
Med Webhook-temaer kan du ikke bare kontrollere data, presentasjon og administrasjonsområdet, men du kan også få dem til å hente NPM-pakker under installasjonen.
Dette betyr at du kan gjøre ting som å trekke i en preprosessorpakke, slik at LESS / Sass / Stylus-filer kan kompileres på fluen. Når du serverer ditt lokale Webhook-nettsted, kjører det en "grunt watch" -oppgave, slik at du kan tilpasse den medfølgende Gruntfile for å håndtere disse typer operasjoner.
Det betyr også at du kan inkludere verktøy som er tilgjengelige via NPM, for eksempel preprocessor-rammer, jQuery-plugins og alt annet som du kan finne blant de nærliggende 80.000 tilgjengelige pakkene.
Fordi hele CMS styres fra temamappen din, har du også kontroll over måten den er stylet på. Alt du trenger å gjøre er å legge til en lenke til din egen tilpassede CSS i malfilen sider / cms.html. For eksempel kan du legge til din egen styling for å gjøre tekstfeltene bredere enn deres standard:
Og selvfølgelig kan du også sette sammen en mer omfattende stil for å fullstendig omarbeide fargevalg, typografi og alt annet du velger.
Sjekk ut disse flotte skjermbildene som viser hva Webhook kan gjøre:
Accentsconagua