Contre-Attaque: Plusieurs formes de commentaires

Cette astuce a de nouveau été trouvée en cherchant dans l'aide de Google (Blogger help), C'est en fait une astuce crée par un blogger dont voici l'adresse du billet pour ceux qui voudraient les codes originaux.

Le but de ces modifications est d'utiliser les Cookies afin de distinguer les messages lus des non lus

C'est pour l'instant, de loin l'astuce la plus difficile que je propose...
En fait oui et non puisqu'elle va consister à copier/coller trois codes, mais à des endroits tres précis.
Elle est bien plus dure à expliquer qu'à réaliser (=D

Je préfère donc mettre en garde ceux d'entre vous qui tenteraient la mise en place de ce système, ne souhaitant pas être tenu comme responsable de tout dysfonctionnement, c'est pourquoi je préconise, plusieurs actions

La première, qui me semble évidente, mais que je préfère préciser, c'est de faire une sauvegarde de votre thème actuel, afin de pouvoir restaurer un thème fonctionnel dans le cas d'erreurs dans l'ajout du script...(cliquer ici pour ceux qui se demandent comment sauvegarder son thème)

une fois ceci fait, renommer votre thème par exemple en "mon Theme_test commentaires.html" à l'aide du Notepad++, que l'on peut télécharger ici, ou sur le coté de cet espace, ce qui va être le document sur lequel on va travailler...

Annoter de commentaires clairs et explicatifs, afin de se souvenir des modifications apportées, ansi que de pouvoir rendre inactif l'ajout du code comme expliqué sur ce billet, en cas de dysfonctionnement

Voyons maintenant les modifications
Elles consistent à ajouter (voir remplacer) les lignes suivantes dans 3 parties du thème, le premier code s'ajoutera dans la partie Css, c'est à dire entre les balises de style, le second code est en javascript, il se trouve dans l'en-tete du thème, c'est à dire entre les balises Head et enfin c'est là que l'identification peut être compliquée, il va falloir remplacer un morceau de code dans le corps de la page, c'est à dire entre les balises Body

Voici donc le code, pour aider à une meilleur identification des différentes parties du thème, je vais ajouter les balises de mise en forme (html, head, style et body) et les colorer, mais elles sont juste là comme repère, elle ne devront pas être comprises dans les parties à copier/coller pour les modifications

<Html>

<Head>

<Style>
.commenthidden {display:none}
.commentshown {display:inline}
</Style>

<script type="text/Javascript">
function togglecomments (postid,commentcount) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
createCommentCookie(postid,commentcount);
}
}

function createCommentCookie(postid,commentcount) {
domain = "<$BlogURL$>";
domain = domain.split("/");
domain = domain[2];
document.cookie = postid + "=" +
commentcount +
"; domain=" + domain +
"; expires=Thu, 01-Jan-40 00:00:01 GMT; ";
}

function getCommentCookie(postid) {
postid += "=";
startpos = document.cookie.indexOf(postid);
if(startpos == -1)
return 0;

startpos = startpos + postid.length;
if(document.cookie.indexOf(";", startpos) != -1)
endpos = document.cookie.indexOf(";", startpos);
else
endpos = document.cookie.length;

return document.cookie.substring(startpos, endpos);
}
</script>

</head>

<Body>

<blogger>

</blogger>

</Body>

</Html>

Le Code est incomplet puisqu'il va falloir faire des modifications à l'intérieur des balises Blogger et remplacer des morceaux du code.
Utiliser l'expression ci dessus comme schéma pour identifier les différentes parties et pour ajouter les deux premiers codes qui sont le Css et le Javascript...
J'insiste sur le fait que le javascript, délimité par les balises <script type="text/Javascript"> et </script> se trouve a l'intérieur de la balise <head>, mais a l'extrieur des balises de <style> (ce peut être une source de dysfonctionnement)

Voyons maintenant les modifications à apporter à l'intérieur des balises <Blogger> qui sont les balises délimitant le Billet + les commentaires
Je rappelle l'existence du thème "dot" traduit et annoté qui sera toujours le thème auquel je ferai référence, me permettant ainsi de pouvoir indiquer les numeros de lignes sur lesquelles portent les modifications ( il est disponible ici ), ainsi il ne suffit plus à chacun que de retrouver la ligne correspondante dans son thème pour y apporter les changements...
(Pour que cela puisse fonctionner, il est claire que je considère le thème pris comme référence comme étant vierge de toute modification...)

Trouver et remplacer (milieu de la ligne 507 jusqu'au premier tiers de la ligne 510)

<BlogItemCommentsEnabled>
<a href="<$BlogItemPermalinkURL$>#comments">
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>

Au passage, on peut constater que l'expression n'est pas tout à fait identique, tout simplement parce que chaque "concepteur" de thème le fait à sa façon, ce qu'il est important de retenir, c'est que les modifications portent sur le contenu de la balise <BlogItemCommentsEnabled>, il se peut même que dans VOTRE code, l'expression soit encore différente

Donc remplacer l'expression précédante par

<BlogItemCommentsEnabled>
<a class="comment-link" href="javascript:togglecomments('c<$BlogItemNumber$>',<$BlogItemCommentCount$>)">
<script type="text/Javascript">
numNewComments = <$BlogItemCommentCount$>-getCommentCookie('c<$BlogItemNumber$>');
if(<$BlogItemCommentCount$> == 0)
document.write("Ecrire le premier commentaire!");
else if(numNewComments == 0)
document.write(<$BlogItemCommentCount$> + " commentaires");
else
document.write(numNewComments + " nouveaux commentaires ajoutés!");
</script>
</a>
</BlogItemCommentsEnabled>

Ce code va permettre d'afficher les notifications de nouveaux commentaires et créer des liens pour afficher/masquer les commentaires.
Le texte en français (écrire le 1er commentaire, commentaire et nouveaux commentaires ajoutés) peut évidemment être personnalisé a votre gout...(note: avec Notepad++, leur emplacement est facilement identifiable)

Il ne nous reste plus qu'à modifier une derniére section pour prendre en compte le Css qui va nous permettre de definir l'état initial du commentaire (Affiché ou Masqué)

Cette modification se porte sur l'expression suivante (ligne 519), remplacer

<ItemPage>
par
<span class="commenthidden" id="c<$BlogItemNumber$>">

puis (ligne 568)

</ItemPage>
par
</span>

A titre indicatif, je vous propose de voir la façon dont Jorge Sierra l'exprime

remplacer

<itempage>
<blogitemcommentsenabled>
[ ... Plein de codes de commentaires ici ... ]
</blogitemcommentsenabled>
</itempage>

par

<span class="commenthidden" id="c<$BlogItemNumber$>">
<blogitemcommentsenabled>
[ ... Plein de codes de commentaires ici ... ]
</blogitemcommentsenabled>
</span>

Ce qui revient au même

Voila l'histoire est jouée, il ne reste plus qu'à faire le test et pour ceux qui comprennent l'anglais, je vous conseil d'aller voir la façon dont Jorge l'exprime, car elle est certainement beaucoup plus simple, mais ne prend pas en compte le fait de pouvoir atteindre des néophytes...

La partie suivante va etre consacrée aux améliorations de ce code, proposées comme commentaires par des visiteurs, qui consisteront d'une part à prendre en compte le nombre de commentaires afin de ne pas écrire "1 Commentaires", ensuite d'améliorer le systeme pour ajouter le premier commentaire...