Tumblr ist das am schnellsten wachsende Blog-Netzwerk im Internet. Mit der Möglichkeit, die Posts Ihrer Follower schnell zu verbreiten, revolutioniert dies die Art und Weise, wie wir mit einer digialen Community interagieren. Tumblr hat die beliebte Dashboard-Funktion zu einem persönlichen Blog-Feed erweitert.
Zu den vielen beliebten Funktionen des Dienstes gehört die Möglichkeit, das Erscheinungsbild Ihrer Seite direkt anzupassen. Jedes Blog verfügt über ein eigenes Thema, das Ihrer Seite Layout und Farbschema gibt. Es gibt viele kostenlose und kostenpflichtige Themen zur Auswahl, aber es ist viel einfacher und macht mehr Spaß, eigene zu erstellen.
In diesem kurzen Tutorial werden wir die wichtigsten Teile zu jedem Tumblr-Thema durchgehen. Die Engine wird mit reinem HTML / CSS-Code und In-Text-Variablen für Blockelemente betrieben. Grundlegendes HTML ist alles, was Sie benötigen, um wirklich ein eigenes Thema zu erstellen.
Seiten verstehen
Jedes Tumblr-Design besteht einfach aus einer einzelnen Seite des HTML-Codes mit dazwischen liegenden bedingten Fallvariablen. Dies bedeutet im Wesentlichen, dass alle Seitenaufrufe in einem langen Dokument nach Fallvariablen getrennt sind.
So werden beispielsweise alle Beiträge Ihrer Website in Kategorien unterteilt. Diese basieren auf Medieninhalten wie Text, Bild, Video, URL-Link usw. Dies sind alles verschiedene Optionen oder Ansichten für deinen blog Es können separate Optionen aktiviert werden, je nachdem, welcher Seitentyp angefordert wird.
Nun sind diese Arten von Bedingungen als bekannt Blöcke. Diese werden als Fallvariablen bezeichnet, die aufgrund bestimmter Bedingungen eindeutige Inhalte anzeigen. Seitenvariablen sind einzelne Container, die dynamische Werte enthalten. Ein Seitentitel oder ein RSS-Feed ändert sich beispielsweise mit jedem Blog, sodass diese Werte über Variablen hinzugefügt werden können ({Titel} und {RSS} beziehungsweise).
Aufbau der Kopfzeile
Die Überschrift ist das erste Stück zu jedem Tumblr-Thema. Es enthält alle wichtigen Details zu Ihrem Blog und die Meta-Optionen. Nachfolgend finden Sie ein wenig Beispielcode, den Sie in Ihrem Header verwenden können, um loszulegen.
Das Dokument sieht nicht viel anders aus als eine Standard-HTML-Seite. Sie beginnen mit einer DOCTYPE-Deklaration, gefolgt von Ihren HTML- und Head-Tags. Im Inneren können Sie zwei Codezeilen feststellen, die ein Blockelement abgrenzen. Die Eröffnung {Block: IndexPage} erstellt einen Codeblock, der nur auf der Indexseite angezeigt wird.
Innen haben wir einen Titel und eine Meta-Beschreibung, die das anzeigen {Titel} Variable Ihres Blogs. Alle anderen Seiten haben einen Titel mit einer gekennzeichneten Beitragszusammenfassung {postSummary}. Sie werden feststellen, dass diese Variablen in Themen wie z {Favicon} und {RSS} für Kopfplatzierungen.
Ein letzter Hinweis ist, wie alle CSS-Stile meines Themas in externen Dokumenten enthalten sind. Auf diese Weise können Sie schneller auf Daten zugreifen und DOM-Aktionen verarbeiten. Da Tumblr seine eigenen Dateien lädt, bevor externe Designs Ihres Designs geladen werden, wird der gesamte Prozess beschleunigt.
Blogeinträge
Nehmen Sie sich etwas Zeit, um Ihren Dokumentenkörper zu untersuchen und Ihre Seitenstruktur aufzubauen. Mit der Zeit sollten Sie Ihren primären Inhaltsbereich erreichen. Hier finden Sie alle Ihre Blogbeiträge und Kommentare. Dies ist mit einem gekennzeichnet {block: Beiträge} und enthält viele Untervariablen.
Innerhalb des Posts-Blocks werden die verschiedenen Medientypen geprüft. Es gibt viel zu besprechen und sie sind alle relativ unkompliziert. Ich habe unten eine Liste mit Postblocktypen hinzugefügt:
{block: Text}{block: Foto}{block: Photoset}{Block: Zitat}{block: Link}{block: Chat}{Block: Audio}{block: Video}{block: Antwort}* für nachfragen
Diese scheinen auf den ersten Blick etwas schwierig zu sein. Ehrlich gesagt ist der beste Weg zu verstehen, indem man neue Tumblr-Themen praktiziert und ausarbeitet. Wenn Sie tiefere Informationen in den einzelnen Postmedien erhalten möchten, lesen Sie die offiziellen Themendokumente.
Funktionale Paginierung
Tumblr plant nicht, alle Ihre Posts auf einer einzigen Seite geladen zu lassen, was sehr aufdringlich werden kann. Paginierung ist in Tumblr's Theme-Engine integriert und unterstützt die nächsten / vorherigen Links für Ihre Archivseiten.
Die erste Art der Paginierung führt den Benutzer zwischen Ihren älteren Seiten. Jede Seite speichert im Allgemeinen 7 bis 10 Beiträge, kann jedoch geändert werden, um mehr zu enthalten. Diese Art von Bedingung funktioniert auf jeder Seite und kann Links anzeigen, solange weitere Seiten durchlaufen werden. Unten ist ein Beispiel für diesen Stil:
Dies ist ein sehr rudimentäres Beispiel, obwohl es den Punkt eindeutig veranschaulicht. Dies kann an beliebiger Stelle in Ihrem Code platziert werden, um einen Paginierungsblock mit Links zu generieren.
Die zweite Möglichkeit besteht darin, Links zwischen den Beiträgen anzubieten. Diese werden nur auf einzelnen Postseiten angezeigt, auf denen ein Besucher Ihre Inhalte und Antworten aufgelistet sehen kann. Wenn es vor oder nach einem Beitrag einen Eintrag in den Archiven gibt, können Sie Navigationslinks anzeigen.
Der Code sieht genauso aus wie oben, jedoch mit etwas anderen Variablennamen. Der erste Block prüft auf {block: PermalinkPagination} statt nur Pagination. Auch alle Fälle von Seite werden ersetzt durch Post wie unten beschrieben.
{block: PreviousPost} {/ block: PreviousPost}{block: NextPost} {/ block: NextPost}{Vorherigen Post}{NextPost}
JumpPage Nav
Es gibt auch eine dritte Option für Navigationslinks, die als Sprungseiten bezeichnet werden. Diese bieten Besuchern eine Liste numerischer Links, die auf eine Seite in Ihrem Blog-Archiv verweisen.Die Struktur ähnelt anderen Formen der Paginierung, jedoch mit ihren eigenen geringfügigen Änderungen.
Ich habe ein weiteres Beispiel für Jump Pagination hinzugefügt. Der Inhalt ist etwas verwirrender für die Verdauung, also nehmen Sie sich etwas Zeit, um sich den Code anzusehen. Es gibt hier keine neuen Konzepte, da alle Tumblr-Designs reine HTML- und grundlegende Variablen sind.
Das length =? 5 "-Attribut durch das erste Element zählt die Anzahl der anzuzeigenden Links. Dies bedeutet, dass unsere Blockliste immer 5 Links enthält, die auf eine zentrale Achse ausgerichtet sind.
Um diese Theorie weiter auszudehnen, befindet sich die aktuelle Seite nur in Richtung eines Endpunkts ganz am Anfang oder Ende der Navigation. Das System setzt die aktuelle Seite direkt in der Mitte aller Jump-Seiten. So sollten wir beispielsweise auf Seite 7 unseres Blog-Archivs Links für die Seiten 5-9 sehen.
Weitere Lesungen
Dies sind einige der grundlegendsten Intro-Stücke für die Entwicklung von Tumblr. Themen sind eine großartige Möglichkeit, um Ihren Blog anzupassen und Ihre eigene Prise Kreativität hinzuzufügen. Es wird empfohlen, die offizielle Themendokumentation von Tumblr nach detaillierten Beispielen und Ressourcen zu durchsuchen.
Einige Seiten, an denen Sie möglicherweise interessiert sind, umfassen z. B. Likes, das Nachzählen, Suchanfragen und Anmerkungen. Für jedes Tumblr-Konto erhalten Sie standardmäßig ein kostenloses Thema. Nehmen Sie sich etwas Zeit, um den offiziellen Code zu analysieren, um besser zu verstehen, wie das System von Tumblr funktioniert und wie Sie Ihre eigenen Anpassungen bearbeiten.
Tumblr-Themes
Tumblr ist eine kostenlose, schnelle und beliebte Blogging-Plattform. Diese Serie enthält Tipps für die Verwendung von Tumblr sowie Sammlungen von schönen Tumblr-Motiven, mit denen Sie eine einzigartige und interessante Website erstellen können.