Diventa una superstar ExpressionEngine in 5 giorni parte 2

Continuando dalla prima parte di questa serie, in cui abbiamo brevemente esaminato il motivo per cui considereremmo di pagare per un CMS, poi ha continuato a installare EE e dare un'occhiata in giro - ora approfondiremo molto di più ciò che rende ExpressionEngine un CMS così potente. Molte persone sono scoraggiate dalla sua curva di apprendimento più ripida; il tutorial di oggi cercherà di alleviare alcune di quelle preoccupazioni.

Basta giocare, voglio fare qualcosa di buono!

Raffreddalo, cowboy (o cowgirl)! Sfortunatamente dobbiamo fare un po 'di compiti prima che possiamo arrivare al nocciolo della questione. Di gran lunga la causa più comune di preoccupazione quando gli sviluppatori raccolgono ExpressionEngine per la prima volta è la terminologia utilizzata da EE per descrivere la sua struttura e funzionalità. Non sono necessariamente confusi, sono semplicemente diversi da praticamente tutto il resto sul mercato. Una volta che hai il tuo boccaletto intorno alle basi, sei sulla buona strada per convertire i tuoi siti xHTML / CSS validi esistenti in un design compatibile con ExpressionEngine.

La documentazione EE è una risorsa inestimabile. Segnalibro e si riferiscono a loro spesso!

Weblog - probabilmente non quello che pensavi di essere

Se sei già abituato ad altri sistemi di gestione dei contenuti, in particolare WordPress e Joomla, è probabile che pensi di sapere cos'è un weblog. Bene, sole, ti sbagli. Un weblog di ExpressionEngine non è una descrizione di tutto: l'informazione e le pagine su cui sono visualizzate tali informazioni. Questo è un concetto davvero importante per girare la testa.

Un "blog" di ExpressionEngine consiste semplicemente di informazioni. Nello stesso modo in cui dovresti separare i tuoi contenuti e lo stile per quanto riguarda xHTML e CSS, EE ti consente di separare i tuoi contenuti (weblog) dal tuo stile (modelli - altri su quelli a breve). È necessario pensare a un weblog come contenitore per le informazioni archiviate nel database utilizzato da EE.

La documentazione ufficiale lo trasmette bene, quindi chi sono io per reinventare la ruota ...

Poiché ExpressionEngine non fa presupposti circa il posizionamento o il formato dei contenuti di un blog, puoi presentare il contenuto dei tuoi blog sulle tue pagine in mille modi, strutturato e organizzato in un modo che ha più senso per i tuoi contenuti.

Modelli - probabilmente esattamente quello che pensavi di essere

I modelli sono il modo di ExpressionEngine di visualizzare i dati che hai memorizzato nei tuoi weblog. Se, per un momento, ripensi ai bei vecchi tempi, quando il termine "crisi finanziaria globale" si riferiva agli anni '30, i politici in realtà hanno fatto un lavoro utile e ... (sto divagando ...) le pagine web erano statiche, quindi puoi pensare di un modello come una pagina html statica. Anche se ExpressionEngine è un CMS dinamico, non ci sono pagine html statiche (beh, sorta di). Se pensi a un file modello come tale, inizierai a vedere l'immagine più grande.

ExpressionEngine si occupa di trasformare un modello in una pagina Web quando qualcuno visita il tuo sito. Un modello può contenere tag che ti permettono di "trascinare" il contenuto dai tuoi weblog (o altrove, se necessario).

Regola i modelli

Un'enorme caratteristica di EE è il fatto che puoi modificare i tuoi modelli dal tuo pannello di controllo. Molti CMS hanno questa capacità, ma per essere sinceri, l'implementazione è di solitoterribile. Il modo in cui EE ti permette di aggiustare tutto con i propri tag personalizzati (più su questi più tardi) dal pannello di controllo è, onestamente, fantastico. Non è più necessario sfogare con la modifica di un file, quindi caricarlo tramite il programma FTP scelto, quindi andare al browser e aggiornare per apportare un emendamento. Il pannello di controllo di EE e in particolare la sua funzionalità "Modifica modello" è di prima classe e, credo, senza rivali. (Puoi salvare i tuoi modelli come file flat se desideri essere in grado di modificarli nell'editor scelto, coda / dreamweaver ecc. - ti guideremo attraverso questo processo in un altro tutorial)

Gruppi di modelli: fa esattamente ciò che dice sulla latta

Un ultimo punto di nota per quanto riguarda i modelli: è possibile raggrupparli come meglio credi. Un gruppo di modelli è una raccolta di modelli correlati a cui stai pensando come una cartella sul tuo file system. Potresti avere un gruppo di modelli che raggruppa tutti i modelli del tuo sito, ad esempio le informazioni nel piè di pagina, nell'intestazione e nel menu. Nella maggior parte dei casi si tratta di file "statici" (qui nudi con me) in modo da poter chiamare il gruppo di modelli "static_template_files" e archiviare i modelli di intestazione, menu e piè di pagina in quel gruppo.

Visualizzazione di un modello

Poiché in realtà non ci sono pagine web fisiche sul tuo sito, devi dire ad EE esattamente ciò che vuoi vedere e quindi EE determinerà quale modello verrà mostrato. Se lo si analizza al centro, è possibile accedere a una pagina specifica come segue:

http://www.MyWebsite.com/YourSystemFolderName/index.php/template_group_name/template_name/

Piuttosto semplice eh? Pertanto, se si dispone di un gruppo di modelli denominato "Statico" e si desidera visualizzare il modello "Piè di pagina", che si trova all'interno di quel gruppo, si esplorerà:

http://www.MyWebsite.com/YourSystemFolderName/index.php/Static/Footer/

Tag EE: la magia inizia

Per la maggior parte, un file modello assomiglia a una pagina HTML standard. Il fattore discernente sono i tag EE: questi ti permettono di generare contenuti dinamici all'interno dei tuoi file template e sono il mezzo con cui sarai in grado di utilizzare tutte le straordinarie funzionalità che EE contiene all'interno dei tuoi template. Questa sezione è piuttosto difficile, per favore continuate a seguirla. Una volta che hai compreso le nozioni di base su weblog, template e tag, sei sulla buona strada per diventare una superstar di ExpressionEngine. Ogni singolo tag ExpressionEngine è collegato a un modulo o plugin che consente di generare o visualizzare il contenuto.

Come appare un tag EE?

Una bella domanda! Le basi assolute sono le seguenti: un tag è circondato da parentesi graffe, una simile a questa: ... - e in genere ha tre componenti.

  1. La prima parte dice a EE che stai scrivendo un tag
  2. La seconda parte è il modulo a cui ti stai riferendo
  3. La terza parte è la funzione specifica all'interno del modulo che stai utilizzando.

Un tag assomiglia a questo:

exp: weblog: entries ... content ... / exp: weblog: entries

Questo tag dice a ExpressionEngine di eseguire la funzione "entries" che si trova nel modulo "weblog". Praticamente tutti i tag hanno tre segmenti come questo, tuttavia, di tanto in tanto ci saranno plugin che ne hanno solo due. Tieni a mente questo per ora.

Esistono due tipi di tag EE - singoli tag e tag coppie. Se seguiamo la nostra analogia HTML e CSS da precedenti, possiamo pensare a singoli tag come tag html a chiusura automatica come un tag immagine o una regola orizzontale. Questi tag recuperano a singola informazione e non hanno un tag di chiusura. Questi tipi di tag saranno più familiari agli sviluppatori di WordPress poiché la maggior parte del codice WP è tag "single" a chiusura automatica.

L'altro tipo di tag EE sono le coppie di tag. Ancora una volta, seguendo la nostra precedente analogia, una coppia di tag è praticamente identica ai tag html standard come i tag heading, paragraph o div - hai un tag di apertura, il contenuto e poi un tag di chiusura. Le coppie di tag sono progettate per restituire diverse informazioni. L'esempio sopra è una coppia di tag - la funzione 'entries' all'interno del modulo 'weblog' è progettata per restituire diverse voci dal tuo weblog (infatti nel suo formato corrente restituisce tutte le informazioni dal tuo weblog - a patto che il le variabili corrette sono a posto) - Utilizzerai questo, in una forma o nell'altra, moltissimo quando crei i tuoi modelli (e lo vedremo più avanti in questa serie quando creeremo i nostri modelli).

Variabili Tag EE

La maggior parte delle coppie di tag conterrà le variabili: puoi considerarle come una singola informazione recuperata utilizzando la funzione invocata quando hai aperto la coppia di tag. Per gli sviluppatori di WordPress disponibili, puoi pensare alle variabili esattamente nello stesso modo in cui lavorano in WordPress ... digiti il ​​nome della variabile e le informazioni che hai richiesto vengono visualizzate nel tuo modello. L'esempio più semplice da comprendere è quello di utilizzare la funzione weblog: entries - che useremo nella sua forma più semplice, quindi:

exp: weblog: entries weblog = "movies" 

titolo


se riepilogo
  sommario
/Se

corpo

/ Exp: weblog: voci

Qui abbiamo introdotto un paio di novità - parametri e Variabili condizionali. Analizzeremo il codice di cui sopra linea per linea e spiegheremo cosa sta succedendo.

exp: weblog: entries weblog = "movies"

Abbiamo allegato un parametro alla fine della parte iniziale di questa coppia di tag. Abbiamo detto a ExpressionEngine di invocare la funzione 'entries' dal modulo 'weblog' e poi ci è stato detto che vogliamo caricare il weblog 'movies'. Ciò significa che solo le informazioni memorizzate nel weblog dei "filmati" verranno visualizzate tra qui e la fine della coppia di tag di chiusura. La funzione 'voci' (e il modulo weblog) può prendere molti parametri e li userete di più nei vostri modelli. I documenti ufficiali per questo particolare modulo elencano tutti i parametri disponibili su http://expressionengine.com/docs/modules/weblog/parameters.html e, come puoi vedere, puoi "filtrare" ciò che desideri visualizzare in misura enorme . Questa pagina è probabilmente degna di un segnalibro!

titolo

Ora abbiamo scelto il nostro weblog, possiamo ottenere informazioni da esso - qui abbiamo detto a ExpressionEngine di produrre i titoli delle voci che abbiamo nel weblog dei "film". Questo è un esempio di come usiamo una variabile.

se riepilogo
  sommario
/Se

Questo pezzo di codice, per me e molti altri sviluppatori, mette in evidenza uno dei punti di forza principali di EE. Questo è chiamato a Variabile condizionale. Come potete vedere, abbiamo detto a EE che se c'è un sommario per la voce, dovremmo mostrarlo. Le variabili condizionali sono estremamente utili (e sono uno dei 3 tipi di variabili disponibili in EE - gli altri due sono Singole variabili e Coppie variabili che toccheremo più avanti in questa serie).

corpo

Questo è simile alla variabile title sopra - ma invece stiamo emettendo il corpo principale della voce.

/ Exp: weblog: voci

Questa è la fine della nostra coppia di tag - notiamo che non abbiamo bisogno di includere il parametro, stiamo solo chiudendo quel particolare tag - stiamo dicendo a EE che non vogliamo più usare la funzione entry nel modulo weblog.

Ma dove faccio tutte queste cose interessanti?

OK, così ora sappiamo quali sono alcuni aspetti del codice EE e abbiamo una certa comprensione delle basi dietro la visualizzazione delle informazioni che vogliamo. Ma come facciamo a mettere questo in un vero esempio del mondo? Facciamo proprio questo. Creiamo il nostro modello che mostra solo le informazioni che vogliamo!

Il primo passo è accedere al nostro pannello di controllo: lo facciamo navigando nella nostra cartella di sistema. Nella prima parte di questo tutorial abbiamo rinominato la cartella di sistema "NotTheSystemFolder", quindi dobbiamo andare su http://www.MyWebsite.com/NotTheSystemFolder/ (o dovunque hai installato ExpressionEngine nella Parte 1) - questo farà apparire il login pagina. Inserisci le tue credenziali e sarai nella "dashboard" principale.

Clicca su "Modelli" e ti verrà presentata la pagina "Gestione modelli". Questa pagina particolare è incredibilmente utile, ma a prima vista è piuttosto complicata.

All'estrema sinistra abbiamo i gruppi di modelli (ricordali?) - al momento abbiamo *posto e ricerca nella nostra lista (questo è se non hai apportato alcuna modifica alla configurazione standard). *posto è evidenziato e siamo in grado di vedere i modelli attualmente disponibili che si trovano in questo 'gruppo' verso il centro dello schermo. Se fai clic su "cerca" nel gruppo di modelli, i modelli disponibili cambiano. Come probabilmente hai intuito, questo gruppo di modelli elenca tutti i modelli che vengono utilizzati ogni volta che qualcuno cerca qualcosa sul nostro sito. I tre attualmente utilizzati sono "index", "results" e "search_css": facendo clic sul titolo di uno di questi viene visualizzata la schermata del modello di modifica. Tuttavia, per ora, non farlo: vogliamo tornare al gruppo di modelli del sito * e guardare alcuni dei modelli in esso contenuti - quindi fai clic su * sito e i modelli cambiano di nuovo.

Tra l'elenco dei gruppi di modelli (con * sito e ricerca) e l'elenco dei nomi dei modelli verrà visualizzata una colonna denominata "sito" (purché sia ​​selezionato il * gruppo di modelli del sito): il menu con "Preferenze, Nuovo modello, Modifica gruppo, Elimina gruppo ed Esporta modelli "è quello che vogliamo ... mentre stiamo creando un nuovo modello, naturalmente, vogliamo fare clic su" Nuovo modello "

Abbiamo bisogno di nominare il nome del nostro modello - tutta una parola (trattini e trattini bassi sono permessi) - chiameremo il nostro "testTemplate" Quindi devi selezionare il tipo di modello: la casella a discesa elenca diverse opzioni come Web Pagina, Pagina RSS, Foglio di stile CSS, Javascript, Statico e XML. Molti di questi sono abbastanza auto-esplicativi, ma ne parleremo alcuni in un tutorial successivo. Per ora, stiamo creando una nuova pagina web, quindi la lasceremo selezionata come tale (è l'impostazione predefinita). Successivamente, fornisci l'opzione per popolare il tuo nuovo modello con dati già esistenti o uno dalla tua libreria. Per chiarezza, selezioneremo il valore predefinito che è "Nessuno - crea un modello vuoto".

Ora sei tornato alla pagina Gestione modelli con un piccolo messaggio che dice "Template Created" e vedrai nell'elenco che tra i modelli chiamati "Smileys" e "Trackbacks" è il nostro "testTemplate". Ora dobbiamo fare clic sul titolo in modo da portarci alla pagina "Modifica modello". Vedrai che (perché abbiamo detto a EE di farlo) che il modello è attualmente vuoto - non c'è nulla nella casella "Modifica" - se avessimo scelto di popolare il nostro modello con i dati di un altro modello, avresti visto qualche codice qui.

In alto a destra vedrai un grande pulsante verde che dice "Visualizza modello di rendering", facendo clic in quel momento è un po 'inutile in quanto otterrai un grande schermo vuoto. Tuttavia, quando abbiamo qualcosa di codificato, saremo in grado di utilizzare questo pulsante per visualizzare l'anteprima del nostro modello. Sotto questo pulsante viene visualizzata la casella a discesa Cronologia revisioni: quando salvi i modelli, avrai un elenco degli emendamenti che hai apportato qui in modo da poter eseguire il rollback a un punto nel passato se crei una tetta.

Sotto la casella di modifica (e appena sopra i pulsanti "Aggiorna" e "Aggiorna e finito") vedrai una barra con la dicitura "Note modello" - al momento collassata, ma se premi l'icona + (o ovunque sul barra, infatti) avrai un altro box aperto - questa è una piccola area abbastanza utile per prendere appunti per questo modello (specialmente se stai collaborando a un progetto).

Meno parlare! Più cose da fare!

Abbastanza giusti, abbiamo fatto un sacco di lavoro preliminare, andiamo giù e sporchi. La prima parte è abbastanza semplice, abbiamo bisogno di creare una pagina HTML standard, con le normali intestazioni e gli elementi contenenti che avremmo in quasi tutti i nostri siti web standard.

    ExpressionEngine Template   

Quindi, non c'è nulla di nuovo qui - bog standard xHTML strict page con un contenitore div. (Nota: per brevità, non ho incluso una versione completa della mia intestazione standard con metatag, ecc.) Ora abbiamo bisogno di ottenere effettivamente del contenuto in quel contenitore così, mettendo insieme quello che abbiamo appena imparato in precedenza, usiamo un po 'di EE tag per trascinare informazioni dal nostro weblog attuale:

 
exp: weblog: entries weblog = "default_site"

titolo

Di author relativo_data fa

corpo

Ultima modifica: edit_date format = "% Y% m% d"


/ Exp: weblog: voci

OK, quindi abbiamo un bel po 'di informazioni qui, ma restaci solo per un po'. Vai avanti e copialo nella schermata "Modifica modello" (fai clic su "testTemplate" dal menu "Modelli" dalla dashboard) e poi sul pulsante "Aggiorna" seguito dal pulsante verde "Visualizza modello reso" per vedere cosa hai appena finito.

Non è esattamente la cosa più carina che tu abbia mai creato, immagino, comunque, che il lavoro venga svolto per ora. Hai trascinato molte informazioni dal database utilizzando diversi tag EE e singole variabili (tra cui permalink, title, email, relative_date e edit_date) e hai anche visualizzato la voce effettiva. Attualmente il nostro weblog (se non lo hai modificato dal momento dell'installazione) contiene solo un post, motivo per cui in questa pagina è presente una sola voce. Quindi cosa succede se abbiamo più di una voce nel nostro weblog? Scopriamolo: creeremo altre voci di esempio e ci abitueremo alla schermata di creazione / modifica mentre ci siamo.

Creazione e modifica

Gli occhi d'aquila tra voi avranno notato che, nel codice precedente, abbiamo usato il weblog "default_site" quando stavamo trascinando nella nostra voce usando il modulo weblog. Non ci vuole uno scienziato missilistico per determinare che il weblog che viene installato di default sia chiamato "default_site" - così dal nostro pannello di controllo, quando passiamo il mouse su "Pubblica" (in alto a sinistra), vediamo anche "Weblog sito predefinito" come "Modifica weblog" - questo ha perfettamente senso! Per ora, non ci preoccupiamo di modificare i weblog (ne parleremo abbastanza presto), quindi fai clic su "Weblog sito predefinito" e saremo nella schermata "Pubblica nuova voce".

Ora, abbiamo bisogno di andare avanti e compilare tutte le caselle di testo - il titolo, il riepilogo, il corpo e il testo esteso - includi testo che ti permetterà di identificare questa voce come la prima che abbiamo creato (quindi forse un titolo di " La nostra prima voce "per esempio) - in questo modo saremo in grado di vedere l'ordine di visualizzazione un po 'più tardi.

Verso l'inizio di questa pagina vedrai un menu con 7 opzioni (Pubblica modulo, Data, Categorie, Opzioni, Trackback, Ping, Mostra tutto) - dovresti essere relativamente familiare con questi dalla prima parte di questo tutorial. Clicca su Categorie e ti verranno mostrati! Se provieni da un altro CMS, avrai familiarità con queste, in caso contrario, le categorie sono fondamentalmente un 'contenitore' per le tue voci - forniscono una descrizione molto breve di cosa tratta la tua nuova voce. Le categorie predefinite che vedrai sono "Blogging", "Notizie" e "Personale". Seleziona "Personale" per questa voce e poi fai clic su "Invia" (che si trova accanto a "Anteprima" e "Salvataggio rapido" più a destra). Dovresti essere accolto da un messaggio "Nuova voce inviata" e una versione renderizzata di ciò che hai digitato (nota come la pagina "Visualizza voce").

Allora, vediamo cosa hai fatto! O vai su "Templates> testTemplate> View Rendered Template" o in una nuova scheda del browser (stai utilizzando un browser abilitato alla scheda non sei? :)) vai a http://www.myWebsite.com/NotTheSystemFolder/index .php / site / testTemplate / - dovresti essere in grado di vedere la tua nuova voce posta sopra la voce predefinita! Eccezionale!

Hey! Dov'è il mio "testo esteso"

Buon punto! Anche il tuo "Riepilogo" è scomparso. Immagino che li vuoi indietro? Bene, finiamo questo mastodontico tutorial scoprendo come fare per farlo. Come probabilmente avrete intuito, il vostro riassunto e il testo esteso non sono "svaniti" - è solo che il nostro modello in realtà non dice a EE di visualizzarli quando lo vediamo. Quindi, passiamo alla schermata Modifica modello (Modelli> testTemplate) e apportiamo alcuni emendamenti minori come segue:

 
exp: weblog: entries weblog = "default_site"

titolo

Di author relativo_data fa

sommario
corpo Esteso

Ultima modifica: edit_date format = "% Y% m% d"


/ Exp: weblog: voci

Quindi niente di importante qui - la semantica non è esattamente precisa, ma ho inserito quei tag extra solo per evidenziare quello che abbiamo fatto. Quindi, se lo salviamo e lo visualizziamo, ora vedrai che per l'articolo che abbiamo creato, vengono visualizzati il ​​riepilogo e il testo esteso! Perfezionare! Un'ultima cosa che ci aiuterà in seguito in questa serie è per noi per visualizzare in quale categoria sono inserite le voci. Il tag di categorie in EE è unico, semplicemente perché una voce può essere in più categorie - è un tag coppia, e contiene una singola variabile al loro interno, quindi:

 categories category_name / categories

Quindi puoi usare questo bit di codice ovunque ti piaccia - lo inserirò alla fine, racchiuso in un link in modo che se un utente fa clic sul nome della categoria, viene indirizzato a una pagina che mostra tutti i voci che sono all'interno di quella categoria, che va un po 'in questo modo:

 
exp: weblog: entries weblog = "default_site"

titolo

Di author relativo_data fa

sommario
corpo Esteso

Ultima modifica: edit_date format = "% Y% m% d"

Inserito in: categories category_name / categories


/ Exp: weblog: voci

È finito? Dimmi che è finita!

OK, è finita. Questo è un tutorial piuttosto epico, ma quando affronteremo esattamente ciò che è stato realizzato, penso che sarete abbastanza contenti, abbiamo:

  • Discusso una certa terminologia EE
  • Come visualizzare i modelli
  • La magia dei tag EE
  • Creato un modello molto semplice
  • Utilizzato diverse variabili EE, coppie di tag e parametri
  • Crea alcuni contenuti dal Pannello di controllo
  • Realizzato diverse tazze di caffè

Cosa Avanti?

Abbiamo ancora molto da fare nei restanti tre giorni - il nostro attuale 'modello' è davvero un po 'anonimo, quindi dovremmo probabilmente farlo un po' (MOLTO). Abbiamo anche bisogno di imparare come creare un modello completo; modificare le impostazioni nel nostro pannello di controllo; impara come usare correttamente gli altri moduli; e parla di alcune delle funzionalità veramente utili che EE possiede. Ci occuperemo anche di alcuni dei moduli e di altre funzionalità che non sono disponibili nella versione "core" gratuita di EE - quindi rimanete sintonizzati nel corso dei prossimi tre post! Grazie per aver letto; non esitate a fare domande nei commenti qui sotto.

  • Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.