Share
Webhook is een nieuw platform voor het bouwen van sites dat in mei 2014 succesvol werd ondersteund op Kickstarter en zojuist is vrijgegeven voor het publiek. Het concept achter Webhook is, als je mijn enthousiasme excuseert, absoluut briljant.
Een van de meest gehoorde verzoeken in veel CMS-community's is "Hoe kan ik het systeem aanpassen voor (vul de blanco in)De jongens achter Webhook wilden deze gemeenschappelijke behoefte aanpakken, maar in plaats van een nieuw vooraf gebouwd CMS te maken met het idee om het uitbreidbaar te maken, gingen ze een stap verder en vroegen: "Wat als we een CMS-bouwer in plaats daarvan?".
Webhooks meest unieke, en misschien wel het spelveranderende, kenmerk is dat je voor elke afzonderlijke site precies kunt bepalen welk type inhoud kan worden gepost door eenvoudige drag-and-drop vormbuilders in het admin-gebied.
Laten we zeggen dat je podcasts moet publiceren, maar dat je niet wilt omgaan met typische blogposts en -pagina's. Je zou een "Episodes" -inhoudstype creëren en velden slepen en neerzetten waardoor je afleveringsnamen kunt invoeren, je aflevering-blurbs kunt typen en podcastbestanden kunt uploaden.
Of, wat als u een blog wilt, maar u ook een plaats wilt om een galerij met video's weer te geven? U kunt dat ook doen, gewoon "slepen en neerzetten" zelf een traditioneel blogpostgedeelte plus een ander deel gewijd aan het toevoegen van video's.
En hoe zit het als u verschillende inhoudstypen moet maken die complexe relaties met elkaar hebben? Ja, dat kan ook. In plaats van volledig e-commerce of lidmaatschapsbeheer, wat uw site ook nodig heeft, kunt u de CMS-interface maken die bij u past.
Het onderliggende principe van Webhook is dat je de mogelijkheid moet hebben om eenvoudig een CMS te maken met alles wat je nodig hebt en niets wat je niet doet, voor elk project. Laten we even kijken en kijken hoe Webhook werkt en hoe je hiermee aan de slag kunt.
Webhook leeft op twee plaatsen:
U installeert Webhook lokaal en bouwt uw site offline, zodat u het admingebied, de presentatie en de inhoud kunt krijgen zoals u het wilt. U implementeert het vervolgens op de live server wanneer u klaar bent. Vanaf dat moment kunt u uw site ook continu bijwerken en zo vaak als u wilt opnieuw implementeren.
Webhook wordt in slechts een paar minuten geïnstalleerd via de opdrachtregel via NPM.
Nadat u ervoor heeft gezorgd dat Node.js is geïnstalleerd, start u een terminal (Mac / Linux) of opdrachtprompt (Windows) en voert u de opdracht uit:
npm install -g grunt-cli wh
Notitie: Misschien moet je dat vooraf doen met het commando "sudo" om beheerdersrechten te krijgen op Mac of Linux.
Hiermee worden alle vereiste bestanden van Webhook gedownload en wordt uw computer zo ingesteld dat Webhook-sites vanaf de opdrachtregel kunnen worden gemaakt en beheerd.
Zodra Webhook is geïnstalleerd, kunt u doorgaan en een site maken door de opdracht uit te voeren:
wha create your_site_name
In uw terminal moet u vervolgens het e-mailadres invoeren dat u aan Webhook hebt gekoppeld en uw wachtwoord instellen of invoeren:
Wanneer de site-instelling is voltooid, ziet u een bevestiging:
Wat is er zojuist gebeurd? U zult zien dat er lokaal een map is aangemaakt met de naam die u tijdens het maken hebt opgegeven en waarin de vereiste bestanden zijn gedownload:
U bent nu klaar om uw lokale Webhook-server te gebruiken, zodat u offline aan uw site kunt werken voordat u deze live implementeert. Om dit te doen, gaat u eerst naar de map van uw site in uw terminal door het volgende in te voeren:
cd your_site_name
Voer vervolgens het commando uit:
wie dienen
Uw lokale site wordt automatisch geopend in uw standaardbrowser en u ziet:
Wanneer u op klikt Op zoek naar het CMS? link moet je inloggen, waarna je naar een scherm gaat waar je moet beslissen of je met een bestaand Webhook-thema wilt gaan of helemaal niets wilt maken:
Webhook-thema's spelen een heel andere rol dan die op andere platforms, dus voordat je verder gaat, moet je begrijpen wat je eigenlijk kiest wanneer je een Webhook-thema selecteert of ervoor kiest om een nieuw thema te bouwen.
Op een traditionele CMS-thema's bepaalt de manier waarop een site eruitziet, terwijl de typen inhoud en de invoermethoden afzonderlijk worden beheerd. Op Webhook bepaalt het thema echter niet alleen de presentatie, maar ook het type inhoud dat de site accepteert, en ook hoe die inhoud wordt gepost via het admin-paneel..
Als u bijvoorbeeld het vooraf gebouwde "Podcast en blog" -thema installeert, krijgt u een speciaal ontworpen front-end met insluitsels zoals iTunes-links, audiospelers, downloadlinks enzovoort:
Maar u krijgt ook een speciaal ontworpen beheerdersgebied dat specifiek is voor het type inhoud dat u op uw site wilt plaatsen:
Let op de podcast-gerelateerde inhoudstypes "Cast Members", "Episodes" en "Podcast Details". Merk ook op hoe in de bovenstaande schermafbeelding van de "Episodes" posting-interface het alleen velden heeft die specifiek zijn voor het plaatsen van een podcast, bijv. Afleveringsnummer, invoegen van audiobestanden, enz. U hoeft geen inhoudsvelden voor overvloeiende inhoud te bewerken die niet gebruikt.
Zowel de front-end-elementen als wat u aan de achterkant ziet, worden bepaald door het thema. Dus in zekere zin, voor elke Webhook-site het thema is het CMS.
Op veel manieren is dit heel logisch. Op elk platform moet een thema worden uitgelijnd met het type inhoud dat op de site kan worden geplaatst. Op een traditioneel CMS als een nieuw aangepast inhoudstype wordt toegevoegd, bijvoorbeeld door een plug-in, kan het vaak niet worden gebruikt als een thema dit niet ondersteunt. De aanpak van Webhook zorgt er absoluut voor dat het thema en de inhoudstypen van een site perfect overeenkomen door ze in hetzelfde systeem te verwerken.
In toekomstige tutorials zullen we dieper ingaan op hoe je je eigen aangepaste Webhook-thema's kunt uitwerken, dus met het oog op de introductie van het platform ben ik met de vooraf gemaakte optie gegaan. Dit gaf me acht thema's om uit te kiezen.
Ik heb 'Bootstrap blog' geselecteerd, wat een eenvoudig blogging-thema is, gestileerd met Bootstrap, dat u de inhoudstypen 'Artikelen' en 'Over mij' in het beheerdersgedeelte geeft:
Na het toevoegen van wat inhoud zag de front-end van mijn lokale site er als volgt uit:
Het nemen van wat je lokaal hebt gemaakt en het gebruiken van je live site is ook ongelooflijk eenvoudig. Open een terminal in de map met uw lokale site en voer de opdracht uit:
wh deploy
Notitie: Ik vond het het gemakkelijkst om een tweede terminal te openen om dit te doen, want dat liet me de eerste terminal die ik opende met mijn lokale Webhook-siteproces verlaten.
Wanneer de implementatie succesvol is, ontvangt u een bevestiging in uw terminal samen met een herinnering aan de URL waarop u uw live site kunt bekijken:
Je kunt de demosite hierboven gemaakt bezoeken op http://tutsplusdemo.webhook.org/
Zoals ik eerder al zei, geven we je in de nabije toekomst volledige tutorials over Webhook-thema's. Laten we toch een eenvoudig voorbeeld bekijken van het aanpassen van een van de inhoudstypen van onze site zodat u een idee krijgt van hoe gemakkelijk het kan zijn.
Standaard toont de "Over mij" pagina een titel en een bio:
We voegen de mogelijkheid toe om een website-URL toe te voegen aan het einde van de pagina.
Ga naar het admin gebied en klik Inhoudstypen toevoegen / bewerken in de linkerzijbalk:
U krijgt een lijst met de bestaande inhoudstypen te zien:
Klik op de Over mij binnenkomst en u wordt naar het formulierbouwsysteem geleid. Aan de linkerkant van het scherm ziet u alle verschillende typen inhoudsinvoervelden die u kunt toevoegen, genaamd "Widgets" in Webhook-terminologie. Vind de Website widget in de Bijzonderheden en sleep het dan van de linkerkant en laat het aan de rechterkant vallen:
Klik op de Formulier opslaan knop rechtsonder in de interface:
Nadat het opslaan is voltooid, wordt u naar het formulier voor inhoudsinvoer gebracht dat u zojuist hebt bijgewerkt, waar u uw nieuwe ziet Website veld. Wanneer u de muisaanwijzer over het veld beweegt, wordt ook de tag weergegeven die u moet gebruiken om de inhoud weer te geven via het juiste sjabloonbestand:
In de submap "pagina's" van dit thema staat het sjabloonbestand "about.html" dat de presentatie van de pagina "Over mij" bestuurt. We zullen meer vertellen over hoe het template-systeem werkt in onze volledige Webhook theming-tutorial.
Voor nu kun je gewoon het "about.html" -bestand openen en de regel lezen:
about.body | safe
Voer onder die regel het volgende in:
about.website
Sla het bestand op en uw lokale site zal de wijziging detecteren en automatisch verversen. Op dat moment ziet u uw nieuwe link onder de hoofdtekst:
Na het ervaren van alle functionaliteit die ik hierboven heb beschreven, was ik al enorm onder de indruk van Webhook en druk bezig met het bedenken van applicaties waar ik het voor kon gebruiken, maar toch vond ik nog meer functies die mijn interesse bleven wekken.
Met Webhook-thema's kunt u niet alleen de gegevens, de presentatie en het admin-gebied beheren, maar u kunt ze ook NPM-pakketten laten ophalen tijdens de installatie.
Dit betekent dat u dingen kunt doen zoals een pre-processorpakket inpakken zodat LESS / Sass / Stylus-bestanden direct kunnen worden gecompileerd. Telkens wanneer u uw lokale Webhook-site bedient, voert deze een "grunt watch" -taak uit, zodat u het inbegrepen Grunt-bestand kunt aanpassen om dit soort bewerkingen uit te voeren.
Het betekent ook dat u alle hulpprogramma's die beschikbaar zijn via NPM kunt opnemen, zoals preprocessor-frameworks, jQuery-plug-ins en al het andere nuttige dat u kunt vinden in de bijna 80.000 beschikbare pakketten..
Omdat de volledige CMS vanuit uw themamap wordt bestuurd, hebt u ook controle over de manier waarop deze is gestileerd. Het enige wat u hoeft te doen is een link toevoegen aan uw eigen aangepaste CSS in het sjabloonbestand pages / cms.html. U kunt bijvoorbeeld uw eigen opmaak toevoegen om tekstvelden breder te maken dan hun standaard:
En natuurlijk kun je ook wat meer uitgebreide styling samenstellen om het kleurenschema, de typografie en al het andere dat je kiest volledig opnieuw te bewerken.
Bekijk deze geweldige screencasts die laten zien wat Webhook kan doen:
Accentsconagua