Share
Webhook è una nuova piattaforma per la creazione di siti che è stata sostenuta con successo su Kickstarter nel maggio 2014 ed è appena stata rilasciata al pubblico. Il concetto dietro Webhook è, se vuoi scusare il mio entusiasmo, assolutamente geniale.
Una delle richieste più frequenti in molte comunità CMS è "Come posso personalizzare il sistema per (riempire gli spazi vuoti)"I ragazzi dietro Webhook volevano risolvere questo bisogno comune, ma invece di creare un nuovo CMS precostruito con l'idea di renderlo estendibile hanno fatto un passo in più e hanno chiesto," E se avessimo creato un Costruttore CMS anziché?".
La caratteristica più unica di Webhook e, probabilmente, che cambia il gioco, è che per ogni singolo sito è possibile controllare esattamente quale tipo di contenuto può essere pubblicato attraverso semplici drag and drop builder nell'area di amministrazione.
Supponiamo che tu debba pubblicare podcast ma non vuoi occuparti di post e pagine di blog tipici. Dovresti creare un tipo di contenuti "Episodi" e trascinare i campi attraverso i quali è possibile inserire i nomi degli episodi, digitare le sequenze episodio e caricare i file podcast.
Oppure, cosa succede se vuoi un blog, ma vuoi anche un posto dove visualizzare una galleria di video? Puoi farlo anche tu, semplicemente "trascina e rilascia" una tradizionale area di post del blog più un'altra sezione dedicata all'aggiunta di video.
E se aveste bisogno di creare diversi tipi di contenuto che hanno relazioni complesse tra loro? Sì, puoi farlo anche tu. A corto di e-commerce o gestione dei soci in piena regola, qualunque sia il sito richiesto, è possibile creare l'interfaccia CMS.
Il principio di base di Webhook è che dovresti avere la possibilità di creare facilmente un CMS con tutto ciò di cui hai bisogno e nulla che non sia, per ogni singolo progetto. Entriamo e diamo un'occhiata a come funziona Webhook e come si può iniziare.
Webhook vive in due posti:
Installa Webhook localmente e costruisci il tuo sito offline in modo da poter ottenere l'area di amministrazione, la presentazione e il contenuto come desideri. Quindi lo si distribuisce sul server live quando si è pronti. Da quel momento in poi puoi anche aggiornare continuamente il tuo sito a livello locale e ridistribuirlo tutte le volte che vuoi.
Webhook si installa in un paio di minuti tramite la linea di comando attraverso NPM.
Dopo aver verificato che Node.js sia installato, avviare un terminale (Mac / Linux) o prompt dei comandi (Windows) ed eseguire il comando:
npm install -g grunt-cli wh
Nota: potrebbe essere necessario anteporre tale comando con il comando "sudo" per ottenere i privilegi di amministratore su Mac o Linux.
Questo scarica tutti i file richiesti da Webhook e configura il tuo computer in modo che possa creare e gestire i siti Webhook dalla riga di comando.
Una volta installato Webhook, puoi procedere e creare un sito eseguendo il comando:
wh crea your_site_name
Nel tuo terminale dovrai quindi inserire l'indirizzo email che hai associato a Webhook e impostare o inserire la tua password:
Una volta completata la configurazione del sito, verrà visualizzata una conferma:
Cosa è appena successo? Troverai una cartella creata localmente con il nome che hai specificato durante la creazione e i file richiesti sono stati scaricati in esso:
Ora sei pronto per eseguire il tuo server Webhook locale in modo da poter lavorare sul tuo sito offline prima di distribuirlo dal vivo. Per fare ciò, prima vai alla cartella del tuo sito nel tuo terminale inserendo:
cd your_site_name
Quindi esegui il comando:
servire
Il tuo sito locale si aprirà automaticamente nel tuo browser predefinito e vedrai:
Quando si fa clic sul Alla ricerca del CMS? collegamento devi effettuare il login, quindi ti verrà indirizzato a una schermata in cui devi decidere se andare con un tema Webhook esistente o crearne uno da zero:
I temi Webhook giocano un ruolo completamente diverso rispetto a quelli su altre piattaforme, quindi prima di procedere è necessario capire cosa si sta effettivamente scegliendo quando si seleziona un tema Webhook o si sceglie di costruirne uno nuovo.
Sui tradizionali temi CMS controlla il modo in cui un sito appare, mentre i tipi di contenuti e i loro metodi di immissione sono gestiti separatamente. Tuttavia su Webhook il tema determina non solo la presentazione ma il tipo di contenuto accettato dal sito, nonché il modo in cui il contenuto viene pubblicato tramite il pannello di amministrazione.
Ad esempio, se installi il tema "Podcast e blog" precostruito, avrai un front-end progettato appositamente con inclusioni come i link di iTunes, i lettori audio, i link per il download e così via:
Ma avrai anche un'area di amministrazione progettata appositamente per il tipo di contenuti che pubblichi sul tuo sito:
Si noti il tipo di contenuto correlato al podcast "Membri cast", "Episodi" e "Dettagli podcast". Nota anche come nello screenshot precedente dell'interfaccia di post "Episodi" ha solo campi specifici per postare un podcast, per esempio numero di episodio, inserimento di file audio ecc. Non devi lavorare attorno a campi di inserimento di contenuti superflui che non saranno Usato.
Entrambi gli elementi front-end e ciò che vedi nel back-end sono controllati dal tema. Quindi, in un certo senso, per ogni sito Webhook il tema è il CMS.
In molti modi questo ha molto senso. Su qualsiasi piattaforma un tema deve allinearsi al tipo di contenuto che può essere pubblicato sul sito. Su un CMS tradizionale se viene aggiunto un nuovo tipo di contenuto personalizzato, ad esempio da un plug-in, spesso non può essere utilizzato se un tema non lo supporta. L'approccio di Webhook rende assolutamente sicuro che il tema e i tipi di contenuti di un sito combacino perfettamente con il loro contenimento nello stesso sistema.
Nelle future esercitazioni approfondiremo come costruire i tuoi temi Webhook personalizzati, quindi allo scopo di presentarti alla piattaforma sono andato con l'opzione precostruita. Questo mi ha dato otto temi tra cui scegliere.
Ho selezionato "Blog Bootstrap" che è un semplice tema per i blog in stile Bootstrap che offre i tipi di contenuto "Articoli" e "Informazioni personali" nell'area di amministrazione:
Dopo aver aggiunto alcuni contenuti, il front-end del mio sito locale era simile al seguente:
Anche prendere ciò che hai creato localmente e distribuirlo sul tuo sito live è incredibilmente facile. Apri un terminale nella cartella che ospita il tuo sito locale ed esegui il comando:
wh distribuire
Nota: Ho trovato più facile aprire un secondo terminale per fare questo, perché mi permette di lasciare il primo terminale che ho aperto eseguendo il mio processo di sito Webhook locale.
Quando la distribuzione avrà successo, riceverai una conferma nel tuo terminale insieme a un promemoria dell'URL in cui puoi vedere il tuo sito live:
Puoi visitare il sito demo creato qui sopra su http://tutsplusdemo.webhook.org/
Come ho detto prima, ti daremo tutorial completi sul tema Webhook nel prossimo futuro. Tuttavia, diamo un'occhiata a un semplice esempio di personalizzazione di uno dei tipi di contenuto del nostro sito in modo da farti un'idea di quanto sia facile.
Per impostazione predefinita, la pagina "Informazioni personali" mostra un'intestazione e una biografia:
Aggiungeremo la possibilità di aggiungere l'URL di un sito Web alla fine della pagina.
Dirigersi all'area di amministrazione e fare clic Aggiungi / modifica i tipi di contenuto nella barra laterale di sinistra:
Ti verrà mostrato un elenco dei tipi di contenuti esistenti:
Clicca il Riguardo a me entrata e sarete portati al sistema di costruzione del modulo. Sul lato sinistro dello schermo vedrai tutti i diversi tipi di campi di inserimento del contenuto che puoi aggiungere, chiamati "Widget" nella terminologia di Webhook. Trovare la Sito web widget nel specifiche sezione quindi trascinala dal lato sinistro e rilasciala a destra:
Clicca il Salva modulo pulsante in basso a destra dell'interfaccia:
Una volta completato il salvataggio, verrai indirizzato al modulo di immissione dei contenuti che hai appena aggiornato, dove vedrai il tuo nuovo Sito web campo. Quando passi il mouse sopra il campo ti verrà mostrato anche il tag che dovresti usare per visualizzare il suo contenuto attraverso il file modello appropriato:
Nella sottocartella "pagine" di questo tema è presente il file modello "about.html" che controlla la presentazione della pagina "Informazioni personali". Tratteremo di più su come funziona il sistema di template nel nostro tutorial completo sul tema del Webhook.
Per ora, puoi semplicemente aprire il file "about.html" e individuare la lettura della riga:
about.body | safe
Sotto questa linea aggiungi quanto segue:
about.website
Salva il file e il tuo sito locale rileverà la modifica e si aggiornerà automaticamente, a quel punto vedrai il tuo nuovo link sotto il testo principale:
Dopo aver sperimentato tutte le funzionalità che ho descritto sopra, ero già molto impressionato da Webhook e pensavo intensamente alle applicazioni per le quali potevo utilizzarlo, eppure ho trovato ancora più funzioni che continuavano a suscitare il mio interesse.
Con i temi Webhook non solo puoi controllare i dati, la presentazione e l'area di amministrazione, ma puoi anche farli recuperare i pacchetti NPM durante l'installazione.
Ciò significa che puoi fare cose come inserire un pacchetto di preprocessore in modo che i file LESS / Sass / Stylus possano essere compilati al volo. Ogni volta che servi il tuo sito Webhook locale, esegue un'attività di "grunt watch" in modo da poter personalizzare il Gruntfile incluso per gestire questi tipi di operazioni.
Significa anche che è possibile incorporare qualsiasi strumento disponibile tramite NPM come framework di preprocessore, plugin jQuery e quant'altro utile che si potrebbe trovare tra i circa 80.000 pacchetti disponibili.
Poiché l'intero CMS è controllato all'interno della cartella dei temi, hai anche il controllo sul modo in cui è in stile. Tutto quello che devi fare è aggiungere un collegamento al tuo CSS personalizzato nel file modello pagine / cms.html. Ad esempio, puoi aggiungere il tuo stile per rendere i campi di testo più ampi di quelli predefiniti:
E naturalmente potresti anche mettere insieme uno stile più completo per rielaborare completamente la combinazione di colori, la tipografia e qualsiasi altra cosa tu scelga.
Dai un'occhiata a questi fantastici screencast che dimostrano cosa può fare Webhook:
Accentsconagua