Pour un logiciel qui en analyse le contenu, un Shaarli (au sens de l'application entière) est imbitable. Rien est hiérarchisé, tout est encapsulé dans du div
, du span
, du ul
, etc. Pour un logiciel, un Shaarli apparaît comme de la bouillie, il ne sait pas déterminer où un shaarli commence et où il termine dans une liste de shaarlis.
On peut faire une légère modification : entourer le titre du Shaarli des balises HTML <h1></h1>
et entourer le titre de chaque shaarli des balises HTML <h2></h2>
. Dans le corps de mes shaarlis, je commence mes titres à la graduation Markdown ###
, ce qui créera des titres de type <h3></h3>
et inférieurs. On obtient ainsi un début de hiérarchisation de l'information. En outre, cela permet aux synthèses vocales, utilisées par les malvoyants / aveugles, d'identifier un peu la structure et de permettre à leur utilisateur⋅rice de naviguer d'un shaarli à un autre avec le raccourci clavier habituel, ainsi que d'identifier les contours d'un shaarli.
Sur ma vieille version de Shaarli avec son vieux thème, le titre du Shaarli est mis en forme dans la page tpl/page.header.html
. Je remplace les lignes suivantes (11-13) :
<span id="shaarli_title">
<a href="{$titleLink}">{$shaarlititle}</a>
</span>
Par :
<h1 id="shaarli_title">
<a href="{$titleLink}">{$shaarlititle}</a>
</h1>
La liste des shaarlis (1 shaarli est une liste contenant un seul élément ;) ) est mis en forme dans la page tpl/linklist.html
. Je remplace les lignes suivantes (86-89) :
<span class="linktitle">
<a href="{$value.real_url}">{$value.title}</a>
</span>
<br>
Par :
<h2 class="linktitle">
<a href="{$value.real_url}">{$value.title}</a>
</h2>
<!-- <br> -->
Une autre liste de shaarlis est mise en forme dans la page tpl/daily.html
. Je remplace les lignes suivantes (68-70) :
<div class="dailyEntryTitle">
<a href="{$link.real_url}">{$link.title}</a>
</div>
Par :
<h2 class="dailyEntryTitle">
<a href="{$link.real_url}">{$link.title}</a>
</h2>
Je modifie le CSS pour positionner le titre du Shaarli. Pour ce faire, je remplace les lignes suivantes (256-260) du fichier inc/shaarli.css
:
/*#shaarli_title {
font-weight: bold;
font-style: italic;
margin-top: 0;
}*/
Par :
#shaarli_title {
display: inline;
font-size: 100%;
font-style: italic;
margin: 0;
padding: 0;
}
Je modifie le même CSS afin que le titre d'un shaarli ne déborde pas. Pour ce faire, je remplace les lignes suivantes (434-437) :
.linktitle {
font-size: 14pt;
font-weight: bold;
}
Par :
.linktitle {
font-size: 14pt;
font-weight: bold;
marging: 0;
padding: 0;
}
Enfin, je modifie le même CSS afin que le titre d'un shaarli dans l'affichage "journal quotidien" conserve ses propriétés. Pour ce faire, je remplace la ligne suivante (832) :
div.dailyEntryTitle {
Par :
h2.dailyEntryTitle {