Organisation d'un thème

04/04/2014 14:17

Un thème regroupe tous les langages utilisables sur overblog. Il permet d'afficher le blog, de le mettre en page.

Chaque language a "sa" place :

Le HTML définit l'architecture de la page.
On trouve la partie "head" qui définit les éléments invisibles (favicon, titre de l'onglet...)
Dans cette partie head, on trouve des "meta" qui définissent les options du thème.
Dans la partie head elle-même, on trouve la partie style, qui contient tout le CSS.
Le body affiche le contenu du blog : il est constitué en grande partie de HTML et de méta langage.

Certains éléments peuvent être trouvés à plusieurs endroits : le javascript est souvent placé dans le head, mais peut aussi être ajouté tout en bas (pour accélerer l'affichage du blog)

<html>
    <head>
    	<title>{{ Blog.Title }}</title>
		<meta name="description" content="{{ Blog.Description }}" />
		<script src="http://monserveuramoi.com/monscript.js"></script>
		
		<meta name="constant:displayArticlesLimit" content="10" />
		<meta name="string:maChaineDeTest:saisissez une chaine" group="Settings" />

		<style>
			body {
                margin: 0;
                background : #006699;
            }
            div {
                margin: auto;
                width: 900px;
            }
			p {
				margin : 10px;
				color : red; 
			}
			a {
				color : white;
			}
			a:hover {
				color : #ff9900; 
			}
		</style>		
	</head>
	<body>
		<div>
		<h1>{{Custom('maChaineDeTest')}}</h1>
		{% list Blog.Posts %}
			<p>
				<strong>{{ Post.Title }}</strong>
				<a href="{{Post.Permalink}}">Lire la suite</a>
			</p>
		{% endlist %}
		</div>
	</body>
</html>

Détaillons un peu ce que fait quelle partie du code :

Lignes 2 à 30 : la partie head.
Ligne 3 : le titre de l'onglet aura pour valeur Blog.Title (le titre que l'on peut changer dans les options de l'administration)
Ligne 7 : cela définit le nombre d'article par page (ce nombre sera utilisé sur l'accueil du blog, dans les résultats de recherche...)
Ligne 8 : ajout d'une option qui apparait dans la colonne de gauche de l'admin.
Lignes 10 à 29 : le CSS qui définit l'affichage : couleurs, tailles...
Lignes 31 à 41 : la partie qui s'affiche.
Ligne 33 : le titre (h1) affiche le contenu de la variable 'maChaineDeTest' que j'ai sauvé dans les options
Lignes 34 à 39 : affichage de la liste des articles (titre + lien pour voir la suite)