Share
Webhook este o platformă nouă de construire a site-urilor, care a fost susținută cu succes de Kickstarter în mai 2014 și tocmai a fost lansată publicului. Conceptul din spatele Webhook este, dacă îmi scuzi entuziasmul, absolut genial.
Una dintre cele mai des solicitate cereri din multe comunități CMS este "Cum pot personaliza sistemul pentru (completează spațiul liber)"Tipii din spatele lui Webhook au vrut să răspundă acestei nevoi comune, dar în loc să creeze un nou CMS preconstruit, cu ideea de a fi extensibil, au luat lucrurile cu un pas mai departe și au întrebat:" Dacă am creat un CMS builder in schimb?".
Caracteristica cea mai unică și destul de posibilă schimbătoare a jocului Webhook este aceea că pentru fiecare site puteți controla exact ce tip de conținut poate fi postat prin constructori de formate simplu de tip drag and drop în zona de administrare.
Să presupunem că trebuie să publicați podcasturi, dar nu doriți să vă ocupați de mesajele și paginile tipice din blog. Ați crea un tip de conținut "Episoade" și trageți și plasați câmpuri prin care puteți introduce nume de episoade, introduceți episoade neclare și încărcați fișiere podcast.
Sau, dacă vrei un blog, dar vrei și un loc pentru a afișa o galerie de videoclipuri? Puteți face acest lucru, doar "trageți și plasați-vă" o zonă tradițională de postare de blog, plus o altă secțiune dedicată adăugării de videoclipuri.
Și ce zici dacă trebuie să creați mai multe tipuri diferite de conținut care au relații complexe între ele? Da, puteți face și asta. Scurt de comert electronic sau gestiune de membru, indiferent de site-ul dvs. aveti nevoie pentru a crea interfata CMS pentru a se potrivi.
Principiul de bază al Webhook este că ar trebui să aveți capacitatea de a crea cu ușurință un CMS cu tot ceea ce aveți nevoie și de ceea ce nu faceți, pentru fiecare proiect. Să intrăm și să aruncăm o privire la funcționarea Webhook și cum puteți începe cu asta.
Webhook trăiește în două locuri:
Instalați Webhook la nivel local și construiți site-ul dvs. offline, astfel încât să puteți obține zona de administrare, prezentarea și conținutul așa cum doriți. Apoi îl implementați pe serverul live când sunteți gata. Din acel moment puteți să actualizați în permanență site-ul dvs. în mod local și să vă redistribuiți de câte ori doriți.
Webhook se instalează în doar câteva minute prin intermediul liniei de comandă prin NPM.
După ce ați instalat Node.js, porniți un terminal (Mac / Linux) sau promptul de comandă (Windows) și executați comanda:
npm instalare -g grunt-cli wh
Notă: este posibil să aveți nevoie să prependați cu comanda "sudo" pentru a obține privilegii de administrare pe Mac sau Linux.
Descărcarea tuturor fișierelor necesare Webhook și configurarea computerului pentru a putea crea și gestiona site-uri Webhook din linia de comandă.
Odată ce Webhook este instalat, puteți continua și creați un site executând comanda:
wh create your_site_name
În terminalul dvs. va trebui apoi să introduceți adresa de e-mail pe care ați asociat-o cu Webhook și setați sau introduceți parola:
Când configurația site-ului este completă, veți vedea o confirmare:
Ce s-a intamplat? Veți găsi că un dosar a fost creat local cu numele pe care l-ați specificat în timpul creării și că fișierele necesare au fost descărcate în el:
Acum sunteți gata să rulați serverul Webhook local pentru a putea lucra offline pe site-ul dvs. înainte de a-l implementa în direct. Pentru a face acest lucru, mergeți mai întâi la dosarul site-ului dvs. din terminalul dvs. introducând:
cd your_site_name
Apoi rulați comanda:
ce servesc
Site-ul dvs. local se va deschide automat în browserul dvs. implicit și veți vedea:
Când faceți clic pe Privind pentru CMS? link-ul va trebui să vă conectați, atunci veți fi dus la un ecran în care trebuie să decideți dacă să mergeți cu o temă Webhook existentă sau să creați una de la zero:
Subiectele Webhook joacă un rol destul de diferit de cele de pe alte platforme, așa că înainte de a continua trebuie să înțelegeți ce alegeți de fapt atunci când selectați o temă Webhook sau alegeți să construiți o nouă.
Pe un tematic tradițional CMS se controlează modul în care un site arată, în timp ce tipurile de conținut și metodele lor de intrare sunt gestionate separat. Cu toate acestea, pe Webhook, tema determină nu numai prezentarea, ci și tipul de conținut acceptat de site, precum și modul în care acel conținut este afișat prin panoul de administrare.
De exemplu, dacă instalați tema "Podcast și blog" pre-construită, veți obține un scop conceput pentru front-end, cu includeri precum linkuri iTunes, playere audio, link-uri de descărcare și așa mai departe:
Dar veți obține, de asemenea, o zonă de admin destinație specifică tipului de conținut pe care îl postați pe site-ul dvs.:
Observați tipurile de conținut asociate podcast-urilor "Cast Members", "Episodes" și "Details Podcast". Rețineți, de asemenea, cum în captura de ecran de mai sus a interfeței de postare "Episoade" există doar câmpuri specifice postării unui podcast, respectiv număr de episod, inserare de fișiere audio etc. Nu este necesar să faceți o descriere a câmpurilor superflore de introducere a conținutului care nu vor fi folosit.
Atât elementele front-end cât și ceea ce vedeți în spate sunt controlate de temă. Deci, într-un sens, pentru fiecare site Webhook tema este CMS.
În multe moduri, acest lucru are un sens. Pe orice platformă, o temă trebuie să se alinieze la tipul de conținut care poate fi postat pe site. Pe un CMS tradițional dacă se adaugă un nou tip de conținut personalizat, de exemplu, un plugin nu poate fi utilizat dacă o temă nu o acceptă. Abordarea Webhook face absolut sigur că temele și tipurile de conținut ale unui site se potrivesc perfect prin faptul că le conțin în același sistem.
În tutorialele viitoare vom analiza în profunzime cum să vă construiți propriile teme personalizate Webhook, astfel încât în scopul introducerii dvs. pe platforma am mers cu opțiunea pre-construită. Acest lucru mi-a oferit opt teme de a alege.
Am selectat blogul "Bootstrap", care este o temă de bloguri simplă, denumită Bootstrap, care vă oferă tipurile de conținut "Articole" și "Despre mine" în zona de administrare:
După adăugarea unui anumit conținut, partea front-end a site-ului meu local a arătat astfel:
Luând ceea ce ați creat la nivel local și desfășurați-o pe site-ul dvs. live, este, de asemenea, incredibil de ușor. Deschideți un terminal din dosarul care găzduiește site-ul dvs. local și executați comanda:
care se desfășoară
Notă: Mi sa părut mai ușor să deschid un al doilea terminal pentru a face acest lucru, pentru că asta mi-a lăsat să plec de la primul terminal pe care l-am deschis când rulează site-ul local Webhook.
Când implementarea este reușită, veți primi o confirmare în terminal împreună cu un memento al adresei URL la care puteți vedea site-ul live:
Puteți vizita site-ul demo creat mai sus la http://tutsplusdemo.webhook.org/
După cum am menționat mai devreme, vă vom oferi tutoriale complete pe teme Webhook în viitorul apropiat. Cu toate acestea, să aruncăm o privire la un exemplu simplu de personalizare a unuia dintre tipurile de conținut ale site-ului nostru, pentru a obține o idee despre cât de ușor poate fi.
Implicit pagina "Despre mine" afișează o rubrică și un bio:
Vom adăuga posibilitatea de a adăuga o adresă URL a site-ului la sfârșitul paginii.
Accesați zona de administrare și faceți clic pe Adăugați / editați tipuri de conținut în bara laterală stângă:
Veți fi afișat o listă cu tipurile de conținut existente:
Apasă pe Despre mine intrare și vei fi dus la sistemul de construire a formularului. În partea stângă a ecranului veți vedea toate tipurile de câmpuri de introducere a conținutului pe care le puteți adăuga, numite "Widget-uri" în terminologia Webhook. Găsi website widget în Specifics apoi trageți-l din partea stângă și fixați-l în partea dreaptă:
Apasă pe Salvați formularul butonul din partea dreaptă jos a interfeței:
După ce ați terminat salvarea, veți fi direcționați către formularul de înregistrare a conținutului pe care tocmai l-ați actualizat, unde veți vedea noul dvs. conținut website camp. Când treceți deasupra câmpului, veți fi afișat și eticheta pe care ar trebui să o utilizați pentru a afișa conținutul acestuia prin fișierul șablon corespunzător:
În subfolderul "pagini" din această temă este fișierul șablon "about.html" care controlează prezentarea paginii "Despre mine". Vom aborda mai multe despre modul în care funcționează sistemul templating în tutorialul nostru Webhook complet.
Pentru moment, puteți să deschideți fișierul "about.html" și să găsiți linia de citire:
about.body | safe
Sub această linie, adăugați următoarele:
despre.website
Salvați fișierul și site-ul dvs. local va detecta modificarea și va reîmprospăta automat, moment în care veți vedea noul dvs. link sub textul principal:
După ce am experimentat toate funcționalitățile pe care le-am descris mai sus, am fost deja foarte impresionat de Webhook și m-am gândit în mod firesc la aplicații pe care le-aș putea folosi, dar totuși am găsit încă și mai multe caracteristici care au continuat să mi-.
Cu temele Webhook nu numai că puteți controla datele, prezentarea și zona de administrare, dar puteți, de asemenea, să le preluați pachetele NPM în timpul instalării.
Aceasta înseamnă că puteți face lucruri cum ar fi tragerea într-un pachet de preprocesor, astfel încât fișierele LESS / Sass / Stylus pot fi compilate în zbor. Ori de câte ori serviți site-ul Webhook local, acesta rulează o sarcină "watch watch", astfel încât să puteți personaliza Gruntfile inclus pentru a gestiona aceste tipuri de operațiuni.
De asemenea, înseamnă că puteți integra orice instrumente disponibile prin intermediul NPM, cum ar fi cadrele preprocesor, pluginurile jQuery și orice altceva util pe care îl puteți găsi printre cele 80.000 de pachete disponibile.
Deoarece întregul CMS este controlat din interiorul dosarului tematic, de asemenea, aveți controlul asupra modului în care este scris. Tot ce trebuie să faceți este să adăugați un link la propriul CSS personalizat în fișierul șablon pagini / cms.html. De exemplu, puteți adăuga propriul dvs. stil pentru a face câmpurile de text mai mari decât valorile implicite:
Și, bineînțeles, ați putea pune împreună un stil mai cuprinzător pentru a relua complet schema de culori, tipografia și orice altceva pe care îl alegeți.
Check out aceste mari screencast-uri care demonstrează ce poate face Webhook:
Accentsconagua