Tumblr är det snabbast växande bloggenätverket på webben idag. Med möjligheten att snabbt reblogera någon av dina anhängares inlägg revolutionerar det verkligen hur vi interagerar med en digtial community. Tumblr har tagit den populära instrumentpanelen och utvidgat den till ett personligt bloggflöde.
Bland de många populära funktionerna i tjänsten är möjligheten att direkt anpassa utseendet på din sida. Varje blogg har sitt eget tema som används för att ge din sida sin layout och färgschema. Det finns gott om gratis och betalda teman att välja mellan, men det är mycket lättare och roligare att skapa din egen.
I denna korta handledning kommer vi att gå över de stora bitarna till något Tumblr-tema. Motorn drivs med rak HTML / CSS-kod tillsammans med in-textvariabler för blockelement. Grundläggande HTML är allt som krävs för att verkligen komma igång och bygga ditt eget tema.
Förstå sidor
Alla Tumblr-teman är helt enkelt en enda sida med HTML-kod med villkorliga fallvariabler däremellan. Detta innebär i princip att alla sidvisningar är separerade av fallvariabler i ett långt dokument.
Så till exempel alla inlägg från din webbplats delas upp i kategorier. Dessa är baserade på medieinnehåll som text, bild, video, URL-länk etc. Dessa är alla olika alternativ eller visningar för din blogg. Separata alternativ kan aktiveras baserat på vilken typ av sida som begärs.
Nu är dessa typer av conditionals kända som block. Dessa är kända som fallvariabler som visar unikt innehåll baserat på vissa villkor. Sidvariablerna är enstaka behållare som innehåller dynamiska värden. Exempelvis ändras en Sidtitel eller RSS-flöde med varje blogg så att dessa värden kan läggas till genom variabler ({Titel} och {RSS} respektive).
Bygga rubriken
Rubriken är den första delen till något Tumblr-tema. Den innehåller alla viktiga detaljer om din blogg och vilka meta-alternativ är inställda. Nedan är lite provkod att använda i din rubrik för att komma igång.
Dokumentet ser inte mycket annorlunda ut än en vanlig HTML-sida. Du börjar med en DOCTYPE-deklaration följt av dina html- och huvudetiketter. Inuti kan du märka två linjer kod som avgränsar ett blockelement. Öppningen {Block: indexsidan} Skapar ett block med kod för att bara visas på indexsidan.
Insidan har vi en titel och meta beskrivning som visar {titel} variabel av din blogg. Alla andra sidor har en titel som innehåller en sammanfattning av postinnehållet som är märkt {PostSummary}. Du kommer att hitta dessa variabler skräpade i alla teman som {Favicon} och {RSS} för rubrikplaceringar.
En sista bit att märka är hur allt mitt tema CSS-format finns i externa dokument. Detta ger ett mycket snabbare sätt att få tillgång till data och bearbeta DOM-åtgärder. Även eftersom Tumblr måste ladda egna filer innan du laddar upp ditt tema, kommer externa format att påskynda hela processen.
Blogginlägg
Spendera tid på att granska din dokumentkropp och bygga din sidstruktur. Med tiden bör du nå ditt primära innehållsområde. Inne är här där alla dina blogginlägg och kommentarer kommer att listas. Detta markeras med a {blockera: Inlägg} och innehåller många subvariabler.
Inom blocket Inlägg söker vi efter olika typer av media. Det finns mycket att gå över och de är alla relativt enkla. Jag har lagt till en lista med postblockstyper nedan:
{Block: Text}{Block: Foto}{Block: Photoset}{Block citat}{Block: Link}{Block: Chat}{Block: Audio}{Block: Video}{Blocket: Svar}* för fråga meddelanden
Det kan tyckas lite svårt att ta in först. Sanning är det bästa sättet att förstå genom att öva och bygga ut nya Tumblr-teman. Om du vill ha djupare information i varje postmedia, kolla in de officiella teman docs.
Funktionspagination
Tumblr har inte för avsikt att hålla alla dina inlägg laddade på en enda sida, vilket kan bli mycket påträngande. Pagination är inbyggd i Tumblrs tematormotor och stöder nästa / tidigare länkar för dina arkivsidor.
Den första typen av pagination leder användaren mellan dina äldre sidor. Varje sida lagrar vanligtvis 7-10 inlägg, men kan ändras för att innehålla mer. Denna typ av villkorlig vilja fungerar på en sida och kan visa länkar så länge det finns fler sidor att korsa. Nedan är ett exempel på denna stil:
Detta är ett mycket rudimentärt exempel, men det illustrerar tydligt punkten. Det här kan placeras var som helst i din kod för att skapa ett Pagination-block av länkar.
Det andra alternativet är att erbjuda länkar mellan inlägg. Dessa kommer bara att visas på enskilda post sidor där en besökare kan se ditt innehåll och svar listade. När det finns ett inlägg antingen före eller efter i arkiven kan du visa navlänkar.
Koden ser exakt ut som ovan, med undantag av något annorlunda variabla namn. Det ursprungliga blocket kontrollerar för {Block: PermalinkPagination} istället för bara pagination. Också alla instanser av Sida ersätts av Posta som beskrivs nedan.
{Block: PreviousPost} {/ block: PreviousPost}{Block: NextPost} {/ block: NextPost}{Tidigare inlägg}{NextPost}
JumpPage Nav
Det finns också ett 3: e alternativ för navigeringslänkar som kallas hoppa sidor. Dessa erbjuder besökare en lista över numeriska länkar som pekar mot en sida i dina bloggarkiv.Strukturen liknar andra former av pagination, men med sina egna små förändringar.
Jag har inkluderat ett annat exempel nedan för Jump Pagination. Innehållet är lite mer förvirrande att smälta, så ta tid att titta över koden. Det finns inga nya koncept här eftersom alla Tumblr-teman är raka HTML och grundläggande variabler.
Längden =? 5 "-attributet genom det första elementet räknar upp hur många länkar som ska visas. Det innebär att vår blocklista alltid innehåller 5 länkar riktade mot en central axel.
För att ytterligare expandera på denna teori kommer de enda tiderna du ser den aktuella sidan mot en slutpunkt att vara i början eller slutet av navigeringssidorna. Systemet fungerar genom att ställa in aktuell sida direkt i mitten av alla Hoppa Sidor. Så till exempel på sidan 7 i våra bloggarkiv borde vi se länkar till sidorna 5-9.
Ytterligare läsningar
Dessa är några av de mest grundläggande introbitarna för att utvecklas till Tumblr. Teman är ett utmärkt sätt att anpassa din blogg och lägga till din egen kreativitet. Det uppmanas att kolla in Tumblrs officiella temadokumentation för detaljerade exempel och resurser.
Några sidor som du kanske kan vara intresserade av läser inkluderar gillar, efter räkning, sökfrågor och anteckningar. För varje Tumblr-konto får du som standard ett gratis tema. Tillbringa lite tid på att dissekera sin officiella kod för att få en bättre förståelse för hur Tumblrs system fungerar och hur man kan manipulera egna anpassningar.
Tumblr Teman
Tumblr är en gratis, snabb och populär bloggplattform. Denna serie innehåller tips för att använda Tumblr och samlingar av vackra Tumblr-teman som hjälper dig att skapa en unik och intressant webbplats.