Tumblr è la rete di blog in più rapida crescita sul web oggi. Con la possibilità di reblog rapidamente qualsiasi post dei tuoi follower, rivoluziona davvero il modo in cui interagiamo con una comunità digitale. Tumblr ha adottato la famosa funzionalità di dashboard e l'ha espansa in un feed personale del blog.
Tra le molte caratteristiche popolari del servizio c'è la possibilità di personalizzare direttamente l'aspetto grafico della tua pagina. Ogni blog ha il suo tema che viene usato per dare alla tua pagina il layout e la combinazione di colori. Ci sono un sacco di temi gratuiti ea pagamento tra cui scegliere, ma è molto più semplice e divertente crearne di nuovi.
In questo breve tutorial esamineremo i pezzi principali di qualsiasi tema di Tumblr. Il motore è alimentato utilizzando codice HTML / CSS lineare insieme a variabili nel testo per gli elementi di blocco. L'HTML di base è tutto ciò che è necessario per iniziare veramente e creare il tuo tema.
Capire le pagine
Ogni tema Tumblr è semplicemente una singola pagina di codice HTML con variabili di caso condizionali intermedie. Ciò significa fondamentalmente che tutte le visualizzazioni di pagina sono separate da variabili del caso in un unico documento lungo.
Ad esempio, tutti i post del tuo sito saranno suddivisi in categorie. Questi sono basati su contenuti multimediali come testo, immagini, video, link URL, ecc. Sono tutte opzioni diverse o visualizzazioni per il tuo blog. Le opzioni separate possono essere attivate in base al tipo di pagina richiesta.
Ora questi tipi di condizionali sono noti come blocchi. Queste sono note come variabili del caso che visualizzano contenuti unici in base a determinate condizioni. Le variabili di pagina sono singoli contenitori che contengono valori dinamici. Ad esempio, un titolo della pagina o un feed RSS cambierà con ciascun blog in modo che questi valori possano essere aggiunti tramite variabili ({Titolo} e {} RSS rispettivamente).
Costruire l'intestazione
L'intestazione è il primo brano di qualsiasi tema di Tumblr. Contiene tutti i dettagli importanti sul tuo blog e quali meta opzioni sono impostate. Di seguito è riportato un breve codice di esempio da utilizzare nell'intestazione.
Il documento non ha un aspetto molto diverso da una pagina HTML standard. Inizi con una dichiarazione DOCTYPE seguita dai tag html e head. All'interno è possibile notare due righe di codice che delineano un elemento di blocco. L'apertura {Block: IndexPage} sta creando un blocco di codice da visualizzare solo nella pagina indice.
All'interno abbiamo un titolo e meta description che mostrano il {titolo} variabile del tuo blog. Tutte le altre pagine hanno un titolo contenente un riepilogo del contenuto del post etichettato {} PostSummary. Troverete queste variabili disseminate in temi come {} Favicon e {} RSS per piazzamenti di testa.
Un ultimo aspetto da notare è il modo in cui tutti gli stili CSS del mio tema sono in documenti esterni. Questo fornisce un modo molto più rapido per accedere ai dati ed elaborare le azioni DOM. Inoltre, dato che Tumblr deve caricare i propri file prima di caricare gli stili esterni del tema, accelererà l'intero processo.
I post del blog
Passa un po 'di tempo a esaminare il corpo del tuo documento e a costruire la struttura della tua pagina. Con il tempo dovresti raggiungere l'area del tuo contenuto principale. Dentro qui è dove verranno elencati tutti i post e i commenti del tuo blog. Questo è contrassegnato da a {blocchi: Messaggi} e contiene molte sotto-variabili.
All'interno del blocco Post stiamo controllando i diversi tipi di media. Ci sono molte cose da affrontare e sono tutte relativamente semplici. Ho aggiunto un elenco di tipi di post block di seguito:
{Block: Testo}{Block: Foto}{Block: Photoset}{Block: Quote}{Block: Connessioni}{Blocco: Chat}{Block: Audio}{Block: Video}{Block: Risposta}* per chiedere messaggi
Questi possono sembrare un po 'difficili da accettare all'inizio. Sinceramente il modo migliore per capire è esercitarsi e costruire nuovi temi Tumblr. Se desideri informazioni più approfondite su ogni post, controlla i documenti ufficiali sui temi.
Paginazione funzionale
Tumblr non ha intenzione di mantenere tutti i tuoi messaggi caricati su una singola pagina, che potrebbe diventare molto invadente. La paginazione è incorporata nel motore di ricerca di Tumblr e supporta i link precedenti / precedenti per le pagine di archivio.
Il primo stile di paginazione guida l'utente tra le pagine più vecchie. Ogni pagina generalmente memorizza 7-10 post, ma può essere modificata per contenere altro. Questo tipo di condizionale funzionerà su qualsiasi pagina e può visualizzare collegamenti finché ci sono più pagine da attraversare. Di seguito è riportato un esempio di questo stile:
Questo è un esempio molto rudimentale, anche se illustra chiaramente il punto. Questo potrebbe essere inserito in qualsiasi parte del codice per generare un blocco di collegamenti di paginazione.
La seconda opzione è di offrire collegamenti tra post. Questi verranno visualizzati solo su singole pagine di post in cui un visitatore può vedere i tuoi contenuti e le risposte elencate. Ogni volta che c'è un post prima o dopo negli archivi è possibile visualizzare i collegamenti nav.
Il codice appare esattamente come sopra, tranne che con nomi di variabili leggermente differenti. Il blocco iniziale controlla per {Block: PermalinkPagination} invece di solo impaginazione. Anche tutte le istanze di Pagina sono sostituiti da Inviare come descritto di seguito.
{Block: PreviousPost} {/ block: PreviousPost}{Block: NextPost} {/ block: NextPost}{Messaggio precedente}{} NextPost
JumpPage Nav
C'è anche una terza opzione per i collegamenti di navigazione chiamati pagine di salto. Questi offrono ai visitatori un elenco di link numerici che puntano ciascuno verso una pagina nei tuoi archivi del blog.La struttura è simile ad altre forme di impaginazione, sebbene con le sue piccole variazioni.
Ho incluso un altro esempio qui sotto per Jump Pagination. Il contenuto è un po 'più confuso da digerire, quindi prenditi del tempo per consultare il codice. Non ci sono nuovi concetti qui poiché tutti i temi di Tumblr sono HTML diretto e variabili di base.
L'attributo length =? 5 "attraverso il primo elemento conta quanti link mostrare. Ciò significa che la nostra block list conterrà sempre 5 link orientati verso un asse centrale.
Per espandere ulteriormente questa teoria, l'unica volta in cui vedrai la pagina corrente verso un endpoint è proprio all'inizio o alla fine della navigazione delle pagine. Il sistema funziona impostando la pagina corrente direttamente nel mezzo di tutte le Jump Pages. Quindi per esempio a pagina 7 del nostro archivio del blog dovremmo vedere i collegamenti per le pagine 5-9.
Ulteriori letture
Questi sono alcuni dei pezzi introduttivi di base per lo sviluppo in Tumblr. I temi sono un ottimo modo per personalizzare il tuo blog e aggiungere il tuo pizzico di creatività. È consigliabile consultare la documentazione ufficiale sui temi di Tumblr per esempi dettagliati e risorse.
Alcune pagine che potresti potenzialmente interessare alla lettura includono i Mi piace, il conteggio successivo, le query di ricerca e le note post. Per ogni account Tumblr ti viene assegnato un tema gratuito per impostazione predefinita. Dedica del tempo a sezionare il codice ufficiale per capire meglio come funziona il sistema di Tumblr e come manipolare le tue personalizzazioni.
Temi di Tumblr
Tumblr è una piattaforma di blogging gratuita, veloce e popolare. Questa serie contiene suggerimenti per l'uso di Tumblr e raccolte di bellissimi temi di Tumblr per aiutarti a creare un sito web unico e interessante.