Tumblr est le réseau de blogs qui connaît la croissance la plus rapide sur le Web aujourd'hui. Avec la possibilité de publier rapidement les publications de vos abonnés, cela révolutionne véritablement notre interaction avec une communauté numérique. Tumblr a pris la fonctionnalité de tableau de bord populaire et l'a développée dans un flux de blog personnel.
Parmi les nombreuses fonctionnalités populaires du service, il y a la possibilité de personnaliser directement l'apparence de votre page. Chaque blog a son propre thème qui est utilisé pour donner à votre page sa mise en page et ses couleurs. Il y a beaucoup de thèmes gratuits et payants, mais il est beaucoup plus facile et amusant de créer les vôtres.
Dans ce bref tutoriel, nous allons passer en revue les éléments principaux de tout thème Tumblr. Le moteur est alimenté par un code HTML / CSS direct, ainsi que par des variables in-text pour les éléments de bloc. HTML de base est tout ce qui est nécessaire pour vraiment commencer et créer votre propre thème.
Comprendre les pages
Tout thème Tumblr est simplement une seule page de code HTML avec des variables de casse conditionnelles entre les deux. Cela signifie que toutes les vues de page sont séparées par des variables de casse dans un long document.
Ainsi, par exemple, tous les messages de votre site seront divisés en catégories. Celles-ci sont basées sur le contenu multimédia tel que texte, image, vidéo, lien URL, etc. Ce sont toutes des options ou vues pour votre blog. Des options distinctes peuvent être activées en fonction du type de page demandé.
Maintenant, ces types de conditionnels sont connus comme des blocs. Celles-ci sont appelées variables de casse et affichent un contenu unique en fonction de certaines conditions. Les variables de page sont des conteneurs uniques contenant des valeurs dynamiques. Par exemple, un titre de page ou un flux RSS changera avec chaque blog afin que ces valeurs puissent être ajoutées via des variables ({Titre} et {RSS} respectivement).
Construire l'en-tête
L'en-tête est la première pièce de n'importe quel thème Tumblr. Il contient tous les détails importants sur votre blog et les méta-options définies. Vous trouverez ci-dessous un exemple de code à utiliser dans votre en-tête pour commencer.
Le document ne ressemble pas beaucoup à une page HTML standard. Vous commencez par une déclaration DOCTYPE suivie de vos balises html et head. A l'intérieur, vous remarquerez peut-être deux lignes de code délimitant un élément de bloc. L'ouverture {block: IndexPage} crée un bloc de code à afficher uniquement sur la page d'index.
À l’intérieur, nous avons un titre et une méta-description qui affichent le {Titre} variable de votre blog. Toutes les autres pages ont un titre contenant un résumé du contenu de l’article intitulé {postSummary}. Vous trouverez ces variables jonchées dans des thèmes tels que {Favicon} et {RSS} pour les classements en-tête.
Un dernier point à noter est la façon dont tous les styles CSS de mon thème sont dans des documents externes. Cela fournit un moyen beaucoup plus rapide d'accéder aux données et de traiter les actions DOM. De plus, comme Tumblr doit charger ses propres fichiers avant de charger votre thème, les styles externes vont accélérer le processus.
Articles de blog
Passez un peu de temps à examiner votre corps de document et à construire votre structure de page. Avec le temps, vous devriez atteindre votre zone de contenu principale. À l'intérieur, vous trouverez la liste de tous les articles et commentaires de votre blog. Ceci est marqué par un {block: Posts} et contient de nombreuses sous-variables.
Dans le bloc des postes, nous vérifions les différents types de supports. Il y a beaucoup de choses à parcourir et elles sont toutes relativement simples. J'ai ajouté une liste de types de bloc de message ci-dessous:
{block: Text}{block: Photo}{block: Photoset}{block: Quote}{block: Link}{block: Chat}{block: Audio}{block: Video}{block: Answer}* pour demander des messages
Celles-ci peuvent sembler un peu difficiles à comprendre au début. En vérité, la meilleure façon de comprendre est de pratiquer et de construire de nouveaux thèmes Tumblr. Si vous souhaitez obtenir des informations plus détaillées dans chaque publication, consultez la documentation thématique officielle.
Pagination fonctionnelle
Tumblr ne prévoit pas de garder tous vos messages chargés sur une seule page, ce qui pourrait devenir très intrusif. La pagination est intégrée au moteur de thème de Tumblr et prend en charge les liens suivants / précédents pour vos pages d'archive.
Le premier style de pagination guide l'utilisateur entre vos anciennes pages. Chaque page stocke généralement 7 à 10 messages, mais peut être modifiée pour en contenir davantage. Ce type de conditionnel fonctionnera sur n’importe quelle page et pourra afficher des liens tant qu’il y aura plus de pages à parcourir. Voici un exemple de ce style:
C'est un exemple très rudimentaire, même s'il illustre clairement ce point. Cela pourrait être placé n'importe où dans votre code pour générer un bloc de liens de pagination.
La deuxième option consiste à proposer des liens entre les publications. Celles-ci s'afficheront uniquement sur des pages de publication individuelles où un visiteur peut voir votre contenu et vos réponses répertoriées. Chaque fois qu'il y a une publication avant ou après dans les archives, vous pouvez afficher des liens de navigation.
Le code a exactement le même aspect que ci-dessus, sauf que les noms de variables sont légèrement différents. Le bloc initial vérifie {block: PermalinkPagination} au lieu de juste pagination. Aussi toutes les instances de Page sont remplacés par Poster comme indiqué ci-dessous.
{block: PreviousPost} {/ block: PreviousPost}{block: NextPost} {/ block: NextPost}{Post précédent}{NextPost}
JumpPage Nav
Il existe également une 3ème option pour les liens de navigation appelée page de saut. Ceux-ci offrent aux visiteurs une liste de liens numériques pointant chacun vers une page de vos archives de blog.La structure est semblable à d’autres formes de pagination, bien qu’elle présente de légères modifications.
J'ai inclus un autre exemple ci-dessous pour la pagination de saut. Le contenu est un peu plus compliqué à digérer, alors prenez le temps de regarder le code. Il n'y a pas de nouveaux concepts ici car tous les thèmes Tumblr sont directement du code HTML et des variables de base.
L'attribut length =? 5 "du premier élément compte le nombre de liens à afficher. Cela signifie que notre liste de blocage contiendra toujours 5 liens orientés vers un axe central.
Pour approfondir cette théorie, vous ne verrez que la page actuelle vers un noeud final au tout début ou à la fin de la navigation dans les pages. Le système fonctionne en définissant la page actuelle directement au milieu de toutes les pages de renvoi. Ainsi, par exemple, à la page 7 de nos archives de blog, nous devrions voir les liens des pages 5 à 9.
Lectures supplémentaires
Ce sont quelques-unes des pièces d'introduction les plus élémentaires pour développer Tumblr. Les thèmes sont un excellent moyen de personnaliser votre blog et d'ajouter votre propre créativité. Nous vous invitons à consulter la documentation officielle sur le thème de Tumblr pour des exemples et des ressources détaillés.
Parmi les pages qui pourraient vous intéresser, citons les j'aime, le nombre suivant, les requêtes de recherche et la publication de notes. Pour chaque compte Tumblr, vous recevez un thème gratuit par défaut. Passez un peu de temps à disséquer leur code officiel pour mieux comprendre le fonctionnement du système de Tumblr et comment manipuler vos propres personnalisations.
Thèmes Tumblr
Tumblr est une plate-forme de blogs gratuite, rapide et populaire. Cette série contient des conseils utiles sur l’utilisation de Tumblr, ainsi que des collections de thèmes magnifiques pour vous aider à créer un site Web unique et intéressant.