Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Organisation d'un thème

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>
Organisation d'un thème

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)

Partager cet article

Commentaires

Muche 04/04/2014 14:17

Par contre, on écrit L A N G A G E, pas language.

Gaelle 26/03/2013 11:29

Vous venez de perdre une fidèle d'overblog... sorry : j'avais envie de changement, mais la nouvelle application est trop limitative. J'étais sur l'ancienne depuis 2009. Dommage. Vous risquez l'hémorragie côté utilisateurs, réagissez vite !!!

eeiee 17/03/2013 12:19

Comment créer une bannière et un document pour permettre de s'abonnner ?

Margaux 11/08/2012 10:59

Bonjour,
Je viens de créer mon blog mais quand je clique sur thème pour en choisir un premier, cela me mets : please ait, avec une icône de chargement mais je peux rester des heures ainsi sans que sa charge..

pelossenoire 09/02/2013 13:09

Bonjour, et moi je n'utilise ni IE9, Ni Firefox mais Google Chrome, , j'ai des problèmes avec les copiés/collés et les sauts de ligne que je voudrais libres.
Merci si quelqu'un a trouvé le moyen de s'en sortir.

alexian 21/08/2012 21:49

tu utilise internet ou firefox?
si tu utilise internet et que sa ne marche pas, télécharge et instale firefox et utilise firefox a la place de internet.
je pense que sa marchera