Le code HTML des thèmes de Tumblr fonctionne avec un langage qui est propre à Tumblr et permet d'afficher le contenu du blog (tout ce que vous publiez).

Voici quelques éléments à placer dans le code HTML. Je n'indique pas à chaque fois les balises HTML courantes à ajouter (h1, h2, div, p, etc) (voir article les bases du langage HTML).

Variables et blocs

Le langage est dynamique se compose de variables et de blocs. Certaines variables sont compris dans des blocs. De même certains blocs sont inclus dans des blocs.

Règles d'écriture. Une variable s'écrit entre accolades : ex : {Title}. Un bloc s'ouvre et se ferme ainsi : {block:Posts} {/block:Posts}. Ce bloc correspond à la liste des articles.

Dans ce bloc, sera comprise le bloc {block:Text}{/block:Text} comprenant lui-même la variable {Body} (corps du post).

  • {block:Posts}
    • {block:Text}
      • ​{Body}
    • {/block:Text}
  • {/block:Posts}

Variables Blog

Voici quelques variables du blog. En les mettant directement dans le code HTML du thème, cela permet d'afficher sur le blog la valeur de la variable.

  • {Title} : titre du blog affiché
  • {Description} : description du blog
  • {RSS} : adresse du flux RSS
  • {Favicon} : adresse de l'image de l'avatar
  • {CopyrightYears} : années d'existence du blog (ex : 2012-2013)
  • {PortraitURL-16} : adresse de l'image du blog 16x16px. Idem avec 24, 30, 40, 48, 64, 96 et 128px. ex : {PortraitURL-64}
  • {TotalPages} : nombre de pages
  • {block:PostSummary}{PostSummary}{/block:PostSummary} : à utiliser pour la balise title : titre de l'article ou de la page

Exemple :

 <html> 
<body> 
<h1>{Title}</h1> 
<h2>{Description}</h2> 
</body> 
</html>  

Afficher la liste des articles

La liste des articles s'affiche avec block:posts. Voici ce que ça peut donner dans la structure du code du thème :

  <html> 
<body> 
{block:Posts} 
<!--insérer les codes de la date de l'article, des blocs texte, vidéo, photo, la liste des tags, reblog (voir ci dessous) --> 
{/block:Posts} 
</body> 
</html>  
  • Lien permanent de l'article : {Permalink}
  • Adresse courte : {ShortURL}
  • Nombre de notes : {block:NoteCount}{NoteCount}{/block:NoteCount}

Date de l'article

  • Format 1.4.12 : {DayOfMonth}.{MonthNumber}.{Year}
  • Format 01/04/2012 : {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}
  • Format Lundi 1 avril 2012 : {DayOfWeek} {DayOfMonth} {Month} {Year}

Pour afficher la date de l'article :

{block:Date} {DayOfMonth}.{MonthNumber}.{Year}
{/block:Date}

On prévoit chaque type de post : texte, photo, video, citation... avec des blocs :

  • Texte : {block:Text}
  • Photo : {block:Photo} et {block:Photoset}
  • Citation : {block:Quote}
  • Lien : {block:Link}
  • Discussion : {block:Chat}
  • Audio : {block:Audio}
  • Vidéo : {block:Video}
Tumblr - Modifier un thème - Doc
Exemple de structure (le contenu des blocs a été masqué)

Exemple de structure (le contenu des blocs a été masqué)

Bloc texte incluant titre et contenu

 {block:Text}
{block:Title}
{Title}
{/block:Title}
{Body}
{/block:Text}

Bloc photo incluant la photo et le bloc description

5 largeurs maxi possibles : 75, 100, 250, 400, 500. Ou taille originale

Résolution 75 100 250 400 500 Haute rés.
Url {PhotoURL-75sq} {PhotoURL-100} {PhotoURL-250} {PhotoURL-400} {PhotoURL-500} {PhotoURL-HighRes}
Longueur 75 {PhotoWidth-100} {PhotoWidth-250} {PhotoWidth-400} {PhotoWidth-500} {PhotoWidth-HighRes}
Hauteur 75 {PhotoHeight-100} {PhotoHeight-250} {PhotoHeight-400} {PhotoHeight-500} {PhotoHeight-HighRes}

Texte de description de la photo : {PhotoAlt}

Exemple d'utilisation

 
{block:Photo} 
<img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" alt="{PhotoAlt}"/> 
{block:Caption}
{Caption}
{/block:Caption} 
{/block:Photo}  

Bloc multi photos

 {block:Photoset}
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}  

Bloc citation incluant le texte et la source

  {block:Quote}
{Quote}
{block:Source}{Source}{/block:Source}
{block:Quote} 

Bloc lien incluant le lien et la description

 {block:Link} 
<a href="{URL}">{Name}</a>{Description}
{/block:Link}

Bloc vidéo incluant la vidéo et le bloc description (caption)

{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}  

La taille de la vidéo peut être de 250, 400 ou 500 (ex : {Video-500})

Les tags de l'article


{block:HasTags}
{block:Tags}
<a href="{TagURL}" class="tag">{Tag}</a>
{/block:Tags}
{/block:HasTags}

Le bouton like/aimer

 {LikeButton} 

Reblog

Dans le cas d'un reblog, il est important de citer la source. Parfois, le blog à partir duquel le reblog a été fait n'est pas le même que le blog qui a publié le post

  • Blog où a été fait le reblog : nom du blogueur, nom du blog et url : {ReblogParentName}, {ReblogParentTitle} et {ReblogRootURL}
  • Image du blogueur : {ReblogParentPortraitURL-16}. 16x16px. Autres valeurs possibles : 24, 30, 40, 48, 64, 96, 128
  • Blog qui a été publié le post à l'origine : nom du blogueur, nom du blog et url : {ReblogRootName}, {ReblogRootTitle} et {ReblogRootURL}
  • Image du blogueur : {ReblogRootPortraitURL-16}. 16x16px. Autres valeurs possibles : 24, 30, 40, 48, 64, 96, 128
{block:RebloggedFrom}
(Source : <a href = "{ReblogRootUrl}">{ReblogRootName}</a>)
{/block:RebloggedFrom} 

En revanche, si ce n'est pas un reblog, on peut l'indiquer :

 {block:NotReblog} 
{PostAuthorTitle}
{/block:NotReblog}

Il faut ajouter les deux blocs pour prendre en compte les deux situations.

Distinguer les différentes pages

Page article

Il est possible d'avoir un code différent selon les pages, et donc un affichage différent sur le blog.

 {block:PermalinkPage}
insérer le code pour la page article
{/block:PermalinkPage} 

Page d'accueil

 {block:IndexPage}
insérer le code pour la page accueil 
{/block:IndexPage} 

Liste des pages

{block:HasPages} 
{block:Pages} 
<li><a href="{URL}">{Label}</a></li>
{/block:Pages}
{/block:HasPages}