Si pour compléter le site, on a besoin d’un wiki, on peut le créer à l’aide du CMS DokuWiki.Page d’accueil du site officiel dokuwiki.org.
DokuWiki est très prisé.Jeff Mcneill, Dokuwiki – The Canonical Wiki, 26/06/2018.
Ce qui s’annonçait comme une simple formalité a finalement nécessité de nombreux aménagements, à commencer par la suppression du « doku.php/ » dans les URL, suivant les instructions fournies en ligne.Remove doku.php from URL, DokuWiki User Forum, 07/08/2009.
Configuration
un deux trois quatre cinq six sept huit neuf dix onze.
Chemin d’installation
Un wiki conçu comme un complément peut être installé à la racine d’un sous-domaine « wiki. » du même domaine. Si WordPress n'est pas à la racine mais dans « /blog/ », DokuWiki peut être dans un sous-répertoire, par exemple « /wiki/ » ou « /documentation/ ».
Désactiver le login
Les attaques par force brute multiplient les tentatives de login automatisées. Un plugin permet de bloquer ces multiples tentatives, comme dans WordPress. Or comme l’utilisateur n’est pas déconnecté automatiquement comme dans WordPress,Session timeout, DokuWiki forum, 14/11/2016.
et que le fichier de configuration est facile d’accès, on peut simplement désactiver le login.Disable Login, DokuWiki forum, 11/02/2011.
Pour désactiver le login, ajouter « login » dans le champ libre de « disableactions » du panneau de configuration, et enregistrer. Cela fait disparaître le bouton « Se connecter » en haut à droite des pages – et aussi le bouton « Se déconnecter » –, et quand un visiteur cherche à charger la page de login manuellement (en ajoutant « ?do=login » dans la barre d’adresse du navigateur), le CMS ne donne pas suite et affiche « Action disabled: login ».
Pour réautoriser le login alors qu’on est déconnecté, ouvrir « /conf/local.php », rechercher « $conf['disableactions'] », supprimer « login », enregistrer,Disable Login, réponse 3, DokuWiki forum, 12/02/2011.
et recharger ou ouvrir le site.
Corriger les adresses des pages
D’origine, les URL des pages comportent la chaîne « doku », compliquant inutilement les addresses, d’une manière non-francophone qui plus est. Or la solution, faute d’être déjà mise en œuvre, est fournie avec le CMS et attend qu’un administrateur édite le « .htaccess ».
Le fichier « .htaccess.dist » contient les quelques lignes à ajouter dans le « ,htaccess ».Voir aussi : URL Rewriting, DokuWiki, 03/07/2006–28/05/2020.
Si ce fichier n’existe pas encore, on peut simplement renommer « .htaccess.dist » en « .htaccess ». Les lignes nécessaires à la réécriture des URL restent encore à décommenter.
Dans la configuration, accessible (à l’administrateur logué) par le lien « Administrer » dans l’en-tête des pages, puis « Paramètres de configuration », il faut alors choisir « .htaccess » dans la section « Paramètres avancés » à la ligne « Utiliser des URL esthétiques ». Choisir aussi le tiret à utiliser comme « Séparateur de mots dans les noms de page », et cocher « Utiliser « / » comme séparateur de catégories dans les URL », aux deux lignes suivantes.
En-tête et pied de page
L’en-tête de page a plusieurs problèmes, l’un par rapport aux standards du web, un autre par rapport à l’adaptation culturelle et linguistique. L’ajout d’un menu personnalisé est proposé à la place de la barre latérale fournie. Les balises meta dans l’élément <head> sont complétées au passage.
Dans la suite, des fichiers autres que des fichiers de configuration vont être édités directement. Peut-être y aurait-il moyen de dériver un thème enfant comme dans WordPress. Faire simple dans un premier temps conduit à désactiver, dans les paramètres avancés, les mises à jour automatiques, afin d’avoir le contrôle sur le moment où il faut refaire ces modifications sur les fichiers de la prochaine version.
Licence
Le pied de page indique la licence, choisie dans les « Paramètres de base ». La phrase introductoire peut être aménagée à la ligne 191 du fichier de traduction française « lang.php » situé, depuis la racine de l’installation, dans « /inc/lang/fr/ ».
Par exemple, si la phrase d’origine est : « Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : », et la licence choisie est CC‑BY 4.0, la phrase peut devenir : « Sauf mention contraire, le contenu de ce wiki est librement réutilisable sous licence ».
DokuWiki a fait le choix judicieux du format PHP aussi pour les traductions de chaînes, plutôt que de fournir celles-ci dans le format compilé courant (par exemple « fr.po » pour la source, « fr.mo » pour la machine). Ainsi les adaptations peuvent se faire directement sur le site au lieu d’être faites localement, compilées et téléversées.
Mentions légales
Une fois qu’elle existe, la page « Mentions légales » est certes accessible via le plan du site, dont le lien figure en haut de page, mais la coutume est de mettre un lien direct dans le pied de page. Dans une instance de DokuWiki, il peut être ajouté à la main avant ou après la note sur les droits d’auteur dont on vient de s’occuper. Idéalement ce sera sur la même ligne, à gauche ou à droite, avec un séparateur simple comme « | » entre les deux éléments.
Dans un exemple concret, où le wiki est dans le sous-domaine « covid.sunsite.fr », un pointeur aux mentions légales du site « sunsite.fr » a été ajouté dans « /inc/template.php ». En général, les informations de contact peuvent être intégrées aux mentions légales, de sorte qu’il s’agit d’ajouter un hyperlien dont le texte est « Mentions légales et contact », l’URL est « https://sunsite.fr/mentions-legales/ », et pour que le lien s’ouvre dans un nouvel onglet, la cible est spécifiée en fonction.
À gauche
Admettons que le lien doive être ajouté en début de ligne. Dans ce cas, la ligne à modifier est la ligne 1537. Voici la ligne d’origine :
if($wrap) $out .= '<div class="license">';Après l’ajout, la ligne est devenue :
if($wrap) $out .= '<div class="license"><a href="https://sunsite.fr/mentions-legales/" target="_blank">Mentions légales et contact</a> | ';À la fin du lien ajouté, on voit la barre verticale entourée d’espaces cadratins pour une présentation plus aérée. Si la disposition de clavier utilisée n’a pas ces espaces, on peut les insérer dans le code par leur référence de caractère hexadécimale «   » ou «   ».
À droite
Il paraît plus intuitif d’ajouter le lien à la suite de celui de la licence. Dans ce cas, on peut modifier la ligne 1551. Voici la ligne d’origine :
if($wrap) $out .= '</div>';Le code est ajouté avant la balise fermante, et le séparateur passe au début :
if($wrap) $out .= ' | <a href="https://sunsite.fr/mentions-legales/" target="_blank">Mentions légales et contact</a></div>';Le contexte de ces lignes est la fonction PHP « tpl_license », qui occupe les lignes 1517 à 1556 de ce fichier « template.php », et qui est appelée à la ligne 12 du modèle de pied de page « /lib/tpl/dokuwiki/tpl_footer.php » :
<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
<?php tpl_license(''); // license text ?>Mettre en conformité l’élément du titre du site
Un site aux normes doit avoir une seule instance de titre de niveau 1, non plusieurs. Or le premier <h1> marque seulement le titre du wiki. Il doit être remplacé par un paragraphe ou par un div identifié comme titre de site, en suivant l’exemple de WordPress. Cela se fait dans « /lib/tpl/dokuwiki/tpl_header.php ». La balise doublonne s’y trouve aux lignes 20 (ouvrante) et 31 (fermante).
Analyser les styles mis en jeu
À la suite, il faudra adapter la feuille de style pour rétablir l’aspect de ce titre. Les règles sont dans « /lib/tpl/dokuwiki/css/basic.less », mais c’est dans un nouveau fichier « userstyle.css » dans « conf/ » que les nouvelles règles sont ajoutées de préférence. Comme il y a d’autres feuilles de style, afin de s’assurer de ne rien manquer, la méthode consiste à d’abord relever, dans la console du navigateur, les règles appliquables à cet élément.
Ce h1 est inclus dans la division unique nommée « dokuwiki__header », au sein de laquelle le texte du titre constitue un « span », tandis que l’image logo qui le précède fait partie du h1. Cela fait que ce texte est soumis à la règle suivante :
#dokuwiki__header h1 span {
display: block;
padding-top: 10px;
}Ensuite, au titre de l’hyperlien qui entoure le tout, ce titre est soumis à ces règles supplémentaires :
#dokuwiki__header h1 a {
text-decoration: none;
color: #333;
background-color: inherit;
}Ces règles font qu’il n’est pas souligné et ne devient pas bleu comme les liens ordinaires. La couleur #333; est un gris anthracite. De plus, il a la particularité de ne pas être en gras et d’être plus petit que le titre 1 de la page généré à partir du wikicode à 6 signes égal : « ======Titre de la page====== »
#dokuwiki__header h1 {
margin: 0;
font-size: 1.5em;
font-weight: normal;
}Ensuite, l’absence de marge telle qu’indiquée ci-dessus contredit normalement la règle plus générale « margin: 0 0 .444em; » (qui équivaut à « margin-bottom: .444em; »), selon le principe que les sélecteurs plus spécifiques l’emportent sur les sélecteurs plus génériques. Par contre, la hauteur de ligne « line-height: 1.2; » appliquée à tous les éléments titres, de h1 à h6, reste valable, de même que « padding: 0; » et surtout, « clear: left; »
Modifier des règles de style dans DokuWiki
Deux moyens s’offrent pour corriger des règles de style :
- La feuille de style externe personnelle « conf/userstyle.css » ;
- Une feuille de style interne à ajouter dans « lib/tpl/dokuwiki/main.php » avant la balise fermante « </head> » :
<style type="text/css">
/* règles de style */
</style>
La feuille de style interne est efficiente immédiatement, tandis que la feuille de style externe est compilée avec les autres feuilles de style puis mise en cache. Pour rafraîchir le cache ponctuellement, il faut réenregistrer la page des réglages « Gestionnaire de configuration ».
La méthode la plus légère en ressources, qui évite de réenregistrer les réglages et de tout recompiler, quand ce n’est peut-être que pour évaluer l’effet d’une petite modification d’une règle de style, comporte quatre étapes :
- Mettre au point les nouvelles règles dans la feuille de style interne ;
- Copier les nouvelles règles et les coller au pied de la feuille de style externe, où elles prévaudront sur les règles pour les mêmes sélecteurs plus haut ;
- Réenregister la page « Gestionnaire de configuration » ;
- Effacer la feuille de style interne.
Ajouter une feuille de style
Ces règles additionnelles sont placées dans le fichier « userstyle.css » à créer dans le dossier « /conf/ ».La feuille de style « userstyle.css » utilisée sur covid.sunsite.fr est disponible aussi ici.
On peut dresser notre feuille de style à ajouter avant de toucher à la qualité de h1 de ce titre de site en remplaçant <h1></h1> par <div id="site-title"></div>. Pour faciliter la sélection en CSS, un identifiant est ajouté, par exemple « site-title » comme dans WordPress . Pour que le tout fonctionne, il a fallu ajouter deux règles pour l’image-logo. Enfin, sauf sur les mobiles, il faut agrandir la police.
#dokuwiki__header #site-title span {
display: block;
padding-top: 10px;
}
#dokuwiki__header #site-title a {
text-decoration: none;
color: #333;
background-color: inherit;
}
#dokuwiki__header #site-title {
margin: 0;
font-size: 1.5em;
font-weight: normal;
}
#site-title {
padding: 0;
line-height: 1.2;
clear: left;
}
#dokuwiki__header img {
float: left;
margin-right: 1em;
}
@media (min-device-width:900px) {
#site-title span {
font-size: 34px;
}
#dokuwiki__header p.claim {
font-size: 20px;
}
}Corriger le code HTML
À la place de ce <h1></h1>, on va maintenant pouvoir mettre un <div id="site-title"></div> :
<div id="site-title"><?php
// get logo either out of the template images folder or data/media folder
$logoSize = array();
$logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
// display logo and wiki title in a link to the home page
tpl_link(
wl(),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="[H]"'
);
?></div>Rectifier le lien du titre
Un autre problème se cache dans la mise en œuvre de la fonction qui ajoute un hyperlien autour du logo et du titre du site, « tpl_link() », définie dans « /inc/template.php(421) ». Son premier paramètre, qui fournit l’URL, est ici généré par une autre fonction, « wl() », définie quant à elle dans « /inc/common.php(485) ». Elle prend comme premier paramètre l’identifiant de la page, par défaut – comme ici – le deuxième paramètre du panneau de configuration : « Nom de la page d'accueil à utiliser pour toutes les catégories ». À l’installation, c’est « start ». Cela est basé sur l’usage anglosaxon où l’accueil peut aussi être appelé « startpage ». Chaque page doit avoir un nom, même la page d’accueil, qui ne peut être à la racine du site. Les catégories sont les dossiers, séparés par un deux-points. Dans les URL, le deux-points est remplacé par une oblique si l’option « useslash » dans le panneau de configuration est cochée.
La question à se poser est ce qu’on veut à la racine des catégories, et ce qu’on veut comme page d’accueil du site. Celle-ci sera probablement « accueil », tandis que pour les catégories, on optera pour « categorie » (dans l’URL), « dossier », « index » ou autre chose, mais probablement pas « accueil ». Ce champ sert par conséquent à définir cette chaîne, tandis que pour l’accueil, on crée une page « accueil » et on ajoute ceci dans le « .htaccess » :
RedirectMatch ^/$ /accueilReste à adapter le code de l’en-tête de page en renseignant « wl() » avec ce paramètre. On peut aussi supprimer l’infobulle « [H] » car cela ne fonctionne pas toujours, ou mettre « Accueil » à la place. Voici la fonction « wl() » (pour « wikilink ») à cet endroit, mise à jour :
tpl_link(
wl('accueil'),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="Accueil"'
);Ajouter le logo
Cette partie du modèle montre à son tour ce qui est écrit au bas de la page « Paramètres de style du thème » du panneau de configuration : Il faut téléverser un fichier « logo.png » pour que le logo par défaut soit automatiquement remplacé.
Comme écrit dans le code, l’image doit être appelée « logo.png » et être téléversée à la racine ou dans le dossier « wiki » du gestionnaire multimédia, accessible par lien direct en tête de page. Sa taille peut par exemple être de 128 × 128 pixels.
Une version réduite du logo de 16 × 16 pixels au format bitmap, renommée en « favicon.ico », doit aussi être versée pour l’usage dans les onglets et signets des navigateurs.
Fil d’Ariane
DokuWiki offre la fonctionnalité du fil d’Ariane.Fil d’Ariane (ergonomie), Wikipédia ; lien reçu d’un ami le 25/10/2016.
La seule chose dommage est que le titre a été mal adapté en français. Il est appelé par la fonction « tpl_breadcrumbs() » utilisée dans « /lib/tpl/dokuwiki/tpl_header.php(78) » et définie dans « /inc/template.php(724) », où il figure par sa chaîne « breadcrumb » à la ligne 741. Celle-ci est traduite à la ligne 243 de « /inc/lang/fr/lang.php » par « Piste: » ; cela pourrait aller si le deux-points était à la française.
Dans le fichier langue, on peut remplacer « Piste: » par « Fil d’Ariane : », et dans le modèle à la ligne 746, on peut ajouter « Piste : » en infobulle :
$out .= '<span class="bchead" title="Trace :">' . $lang['breadcrumb'] . '</span>';La traduction française des chaînes de DokuWiki est l’œuvre de plus de quarante auteurs, situés en France pour beaucoup d’entre eux. L’espacement du deux-points est requis aussi au Canada, mais en Suisse seulement depuis 2015. Dans ce fichier, le deux-points n’est pas espacé 19 fois, 8 fois il est avec espace insécable justifiante (vieille école), et 9 fois avec espace simple pour être renvoyé à la ligne à la fin de chaînes assez longues. L’apostrophe est aussi la mauvaise (plus de 80 fois « \' »). On peut corriger tout cela en passant (« (\w):([^\/\w]) » par « $1 :$2 »).
Ajouter un menu
Une barre latérale est disponible, générée à partir de la page « sidebar » si elle existe. Mais pour éviter trop de distraction et un vide inutile à gauche, on peut ajouter à la place un menu simple consistant en une énumération de liens directs dans le style du fil d’Ariane au-dessus de celui-ci, par exemple en réutilisant des éléments du fil d’Ariane pour avoir le même style.
Pour maintenir la visibilité sur mobile et pour éviter trop de lignes horizontales, il faut remplacer la classe « breadcrumbs » par une autre comme « quickaccess », dans « /lib/tpl/dokuwiki/tpl_header.php(78) », Les coupures de ligne à l’intérieur des éléments de menu sont évitées en remplaçant le tiret du 6 par un trait d’union insécable U+2011, et l’espace par une espace insécable U+00A0.
Ce qui suit est un exemple de comment mettre quelques liens dans un menu sans ajouter le panneau latéral :
<!-- MENU -->
<div class="quickaccess">
<div class="trace">
<span class="bchead" title="Sur ce site">Liens directs :</span>
<span class="curid"><a href="/vegan">Végan</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/lait">Lait</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/yaourt">Yaourt</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/sucre">Sucre</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/fromage">Fromage</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/viande">Viande</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/guerison">Guérison</a></span>
<span class="bcsep">•</span>
<span class="curid"><a href="/recettes/cocktail">Cocktail</a></span>
</div>
</div>
<!-- BREADCRUMBS -->À cette nouvelle classe, il faut donner dans « /conf/userstyle.css », des règles CSS prises sur celles de « breadcrumbs ». À cause de l’infobulle sur « Liens directs », la forme du curseur est aussi adaptée :
.dokuwiki div.quickaccess {
border-top: 1px solid #ccc;
padding:.2em;
font-size: 0.875em;
clear: both;
}
.bchead {
cursor: help;
}Ajuster les métadonnées
Rectifier l’onglet de navigation
Le titre de la page dans l’onglet de navigation, qui est l’élément <title>, peut être automatiquement le titre de niveau 1 de la page, écrit dans le formulaire de rédaction entouré de 6 signes égal, et unique pour chaque page selon le standard. C’est le paramètre « useheading » dans les paramètres d’affichage du panneau de configuration (Administrer > Paramètres de configuration).
Le souci est que le titre du site, qui normalement suit après un tiret long (cadratin), figure entre crochets. Cela peut être ajusté dans « /lib/tpl/dokuwiki/main.php(19) » :
<title><?php tpl_pagetitle() ?> [<?php echo strip_tags($conf['title']) ?>]</title>Il s’agit de supprimer le crochet fermant, et de remplacer l’ouvrant par un tiret suivi d’une autre espace. Comme le code source est en Unicode («< meta charset="utf-8" /> »), on peut saisir un tiret directement, ou mettre sa référence de caractère, hexadécimale pour l’intuitivité :
<title><?php tpl_pagetitle() ?> — <?php echo strip_tags($conf['title']) ?></title>Corriger les métadonnées en pied de page
Sous la fiche, DokuWiki indique le nom du fichier texte avant la date de dernière modification et son auteur.
Titre de la page
À la place, on peut préférer de nom de la page tel qu’il apparaît dans l’onglet du navigateur si DokuWiki est configuré pour y utiliser le titre de premier niveau. De fait, on peut y mettre exactement le code entre les balises <title> ci-dessus. Le code d’origine dans « /inc/template.php(854) » :
// prepare date and path
$fn = $INFO['filepath'];
if(!$conf['fullpath']) {
if($INFO['rev']) {
$fn = str_replace($conf['olddir'].'/', '', $fn);
} else {
$fn = str_replace($conf['datadir'].'/', '', $fn);
}
}
$fn = utf8_decodeFN($fn);
$date = dformat($INFO['lastmod']);… peut rester en place mais ne servira plus que pour la date, car le reste sera généré dans la suite dont l’original est :
// print it
if($INFO['exists']) {
$out = '';
$out .= '<a href=""><bdi>' . $fn . '</bdi></a>';
$out .= ' · ';
$out .= $lang['lastmod'];
$out .= ' ';
$out .= $date;
[…]Faute d’avoir l’hyperlien de la page, on laisse vide, et le navigateur y mettra l’adresse de la page.
// print it
if($INFO['exists']) {
$out = '';
$out .= '<bdi>';
$out .= substr(tpl_pagetitle(), 0, -1);
$out .= ' <a href="">';
$out .= '— ';
$out .= strip_tags($conf['title']);
$out .= '</a>';
$out .= '</bdi>';
$out .= ' · ';
$out .= $lang['lastmod'];
$out .= ' ';
$out .= $date;
[…]La fonction « tpl_pagetitle() » est programmée pour assurer l’unicité des titres de page, et ajoute un chiffre ici. Il faut supprimer ce chiffre :
substr(tpl_pagetitle(), 0, -1)Date de mise à jour
La traduction indique : « Dernière modification: » (sans espace devant le deux-points). On peut préférer « mis à jour le », dans « /inc/lang/fr/lang.php(245) » :
//$lang['lastmod'] = 'Dernière modification:';
$lang['lastmod'] = 'mis à jour le';Cela oblige à la rigueur à vérifier l’adaptation partout. Ici dans « /inc/template.php(882) » suit la date, d’où le nouveau libellé.
Mais à l’autre endroit d’utilisation, dans « /inc/Ui/Search.php(590) », cela donne des choses comme « 19 Occurrences trouvées, mis à jour le il y a 2 jours ». Il faut pour cela ajouter une autre chaîne dans « /inc/lang/fr/lang.php » :
$lang['lastmodrel'] = 'dernière modification';Et mettre à jour la ligne 590 de « Search.php » :
$lastMod = '<span class="lastmod">' . $lang['lastmodrel'] . '</span> ';Attribution
Dernière adaptation, la particule de l’attribution change de « de » en « par » dans le fichier des traductions de chaînes (/inc/lang/fr/lang.php), à la ligne 246 :
//$lang['by'] = 'de';
$lang['by'] = 'par';Compléter les balises meta
Normalement, l’élément <head> des pages web contient la date de publication et la date de mise à jour sous forme de balises meta. Dans DokuWiki, ces éléments font défaut. Mais il s’avère qu’on peut assez rapidement les ajouter.
Balise meta date de mise à jour
La date de mise à jour est déjà visible sous la fiche wiki de la page, dans le div de classe « docInfo ». Pour la retrouver, il faut chercher ce div, qui se trouve dans « lib/tpl/dokuwiki/main.php(63) ». Son contenu est généré par la fonction « tpl_pageinfo() », définie dans « /inc/template.php(854) », où la date est préparée ainsi à la ligne 875 :
$date = dformat($INFO['lastmod']);La fonction « dformat() » présente la date sous la forme définie par l’utilisateur pour l’affichage dans la page. En-dessous de l’endroit où elle est définie dans « /inc/common.php(1612) », à la ligne 1632, se trouve la fonction « date_iso8601() », à utiliser pour les dates dans les balises meta.
Balise meta date de création
Pour avoir la date de création, l’appel est un peu plus compliqué que « $INFO['lastmod'] ». Avec la bonne fonction de formatage, il faut écrire :
date_iso8601($INFO['meta']['date']['created'])Insertion des balises meta
Pour ajouter des balises meta, il faut aller voir dans l’ossature du code source des pages, avec le début et la fin, qui est dans « /lib/tpl/dokuwiki/main.php ». On y voit que la plupart des balises meta sont générées par la fonction « tpl_metaheaders() », utilisée à la ligne 21, et définie dans « /inc/template.php(206) ». C’est à ce dernier endroit que les balises supplémentaires peuvent être insérées, par exemple après la ligne 236 :
$head['meta'][] = array('name' => 'date', 'content' => date_iso8601($INFO['meta']['date']['created']));$head['meta'][] = array('name' => 'last-modified', 'content' => date_iso8601($INFO['lastmod']));Une fois les informations réunies, le code des balises est généré par la fonction « _tpl_metaheaders_action() », invoquée à la ligne 364 et définie un peu plus bas.
Mise en page du code source
Il se trouve qu’il y manque une tabulation en début de ligne, et une espace avant la fin des balises autofermantes, faciles à ajouter en remplaçant « '<' » par « "\t<" » à la ligne 389, et à la ligne 398, « '/>' » par « ' />' ».
Par contre il faut supprimer la tabulation de trop au début de la ligne 21 de « /lib/tpl/dokuwiki/main.php », avant la balise PHP ouvrante précédant l’invocation du générateur de balises meta :
<?php tpl_metaheaders() ?>Voici ensuite le début des balises générées, avec les heures en UTC :
<meta name="generator" content="DokuWiki" />
<meta name="date" content="2020-09-25T13:52:27+00:00" />
<meta name="last-modified" content="2020-09-25T23:29:30+00:00" />
<meta name="theme-color" content="#008800" />
<meta name="robots" content="noindex,nofollow" />Balise meta noindex temporaire
L’administrateur du wiki peut fixer le laps de temps (paramètre « indexdelay ») pendant lequel les moteurs de recherche sont invités à attendre avant d’îndexer les pages fraîchement modifiées. Ce paramètre est global. Par défaut, il est de 5 jours, le temps que les responsables du wiki vérifient les nouvelles modifications.
Les pages fréquemment mises à jour sont de fait soustraites à l’indexation si ce délai n’est pas ramené à quelques heures (voire à zéro).
Attention à ne pas laisser ce champ vide, car il ne serait pas validé. Pour ouvrir toutes les pages à l’indexation sans délai, inscrire « 0 » et enregistrer.
Liens de titre
Comme dans Wikipédia, la table des matières permet de copier l’adresse d’un titre, qui est l’URL de la page avec l’identifiant de fragment du titre. Pour faciliter cette action, les titres ont couramment soit un hyperlien à leur adresse sur eux-mêmes, soit un graphisme ajouté avant ou après, avec cet hyperlien, souvent caché par défaut et qui s’affiche quand le titre est pointé.
Si l’on considère que l’hyperlien sur toute la longueur du titre offre la meilleure ergonomie, on peut partir sur ce système et styler les titres pour que leur aspect reste normal et que le souligné n’apparaisse qu’au survol du pointeur.
Le système recommandé pour WordPress vaut aussi pour DokuWiki, concernant le décalage des ancres vers le haut afin que les titres ne se collent pas contre le bord de l’écran.
Partie HTML
Le générateur des titres dans les fiches du wiki est codé entre les lignes 200 et 250 de « /inc/parser/xhtml.php ». Les endroits à compléter sont avant la balise ouvrante du titre (ligne 236) et après sa balise fermante (ligne 247). Voici le code aux lignes 235–247 sans la partie concernant la modification des sections. On voit le début de balise « '<h' . $level » qui devient par exemple « <h1 », et la balise fermante « "</h$level>" ».
// write the header
$this->doc .= DOKU_LF . '<h' . $level;
[…]
$this->doc .= ' id="' . $hid . '">';
$this->doc .= $this->_xmlEntities($text);
$this->doc .= "</h$level>" . DOKU_LF;On voit la variable « $hid » qui est l’identifiant de fragment du titre (heading ID) utilisé dans l’ancre, qu’il faut sortir du titre et le déplacer dans un span afin de pouvoir le décaler vers le haut. Pour ce faire, il faut l’envelopper dans un deuxième span par rapport auquel il sera décalé, ce afin d’éviter de le décaler par rapport à l’élément de titre lui-même (en l’y incluant), car si la position des titres est définie comme relative, les blocs de titre rendraient incliquables les éléments placés à la même hauteur, notamment dans la table des matières. (Il faudrait alors changer l’affichage des titres de bloc en table.)
Et désormais, cette variable « $hid » servira aussi à faire générer la partie URL de l’hyperlien. (On peut en passant ajouter un deuxième saut de ligne avant, car il y a des lignes vides un peu partout dans la source des pages sauf entre le bouton « Modifier » d’une section et le titre suivant.)
// write the heading
$this->doc .= DOKU_LF . DOKU_LF . '<span class="offset-base"><span class="offset-anchor" id="' . $hid . '"></span></span><a href="#' . $hid . '"><h' . $level;
[…]
$this->doc .= '>';
$this->doc .= $this->_xmlEntities($text);
$this->doc .= "</h$level></a>" . DOKU_LF;Partie CSS
Les titres sont devenus bleus, mais pas soulignés, car le style par défaut des hyperliens dans DokuWiki affiche déjà le soulignement seulement au pointage. Le bleu des titres est assez joli. On peut néanmoins souhaiter les garder en noir, ou en anthracite (#333333) qui était leur couleur, tout comme celle du texte. Le souci de la lisibilité impose d’opter pour le noir, dans « /conf/userstyle.css » :
h1,h2,h3,h4,h5,h6,p {
color: black;
}
.offset-base {
position: relative;
}
.offset-anchor {
position: absolute;
top: -15vh;
/*border: 5px solid blue;*/
}Rectifier les identifiants de fragment
La fonction « _headerToLink() » (« heading to ID », titre en identifiant) responsable de la génération de l’identifiant de fragment « $hid » nécessite une mise à jour afin qu’elle supprime aussi l’espace fine insécable, en plus des ponctuations, faute de quoi des titres se terminant par un point d’interrogation se voient attribuer des identifiants finissant en « %E2%80%AF ».
Cette fonction est définie dans « /inc/parser/renderer.php(802) ». Elle consiste essentiellement à appeler la fonction « sectionID() », définie quant à elle dans « /inc/pageutils.php(234) ». Il s’avère que la fonction à mettre à jour est « cleanID() », définie dans le même fichier à la ligne 114. À la ligne 144, elle appelle une curieuse méthode pour débarrasser les chaînes des caractères spéciaux :
//remove specials
$id = \dokuwiki\Utf8\Clean::stripspecials($id,$sepchar,'\*');Les caractères ciblés sont définis un par un (plutôt que par plages) dans « /inc/Utf8/tables/specials.php », dont l’en-tête avertit que la liste n’est pas complète, ni parfaite, mais devrait couvrir la plupart des cas de caractères spéciaux.
C’est après la ligne 185 qu’on va insérer l’espace fine insécable, ici au milieu :
0x2026, // …
0x202f, //
0x2030, // ‰Pour que cela devienne effectif, il faut vider le cache en ré-enregistrant la page « Préférences » du panneau de configuration.
Table des matières
La table des matières incluse est encastrée à droite et rétractable dans le thème par défaut. Elle peut se trouver dans le « panneau latéral (si le thème utilise cette fonctionnalité) », mentionné dans le 6ᵉ paramètre de base du panneau de configuration. Sur les mobiles, la table des matières est masquée par défaut.
Pour l’adaptation culturelle et linguistique, le titre de la table des matières devrait être paramétrable dans le panneau de configuration, mais il y manque. Si dans une langue déjà traduite, il doit être changé par exemple en « Accès rapide », il faut éditer le fichier de la langue.
Modifier le titre
Le titre de la table des matières peut être modifié en français dans « /inc/lang/fr/lang.php ». Exemple :
//$lang['toc'] = 'Table des matières';
$lang['toc'] = 'Accès rapide';Wikiliens et liens interwiki
Un utilisateur habitué à MediaWiki peut regretter dans DokuWiki un certain nombre de différences concernant le texte des liens, les wikiliens dans les sous-pages, et les liens interwiki générés.
Texte des liens
Le comportement diffère selon qu’il s’agit de liens internes ou externes.
Wikiliens
Dokuwiki met les wikiliens en majuscule initiale. Ainsi, « [[titre]] » s’affiche comme « Titre » avec hyperlien vers la fiche wiki « Titre ».
Le débogage des wikiliens est inutile, car le problème n’affecte que les auteurs, et trop difficile, car malgré la refactorisation récente, le code reste difficile à comprendre, à maintenir, à documenter et à supporter.Par exemple : Any solution to get “the current URL” ?, 25/09/2009.
On peut contourner le problème en écrivant les wikiliens sous la forme [[titre|titre]]. Cela s’affiche « titre », et non « Titre » comme quand le wikilien est « [[titre]] ». On a de toute manière souvent besoin d’écrire en clair ce que DokuWiki doit afficher comme texte du lien, car contrairement à MediaWiki, il n’étend pas le lien jusqu’à la fin du mot quand on écrit « [[titre]]s ». Il faut alors de toute manière écrire « [[titre|titres]] ».
Liens interwiki
Ce bug n’apparaît pas dans les liens interwiki. Ainsi « [[wpfr>article]] » s’affiche bien comme « article » avec hyperlien vers l’article de Wikipédia, dont la première lettre n’est pas sensible à la casse. En revanche, DokuWiki ne la met pas en majuscule dans l’infobulle. Pour avoir la même infobulle que sur Wikipédia, il faut écrire : « [[wpfr>Article|article]] si le mot est dans le texte et doit être en minuscule.
Relativité des wikiliens
Dans une page « catégorie1/titre1 » ou « catégorie1:titre1 »,((Les deux syntaxes sont synonymes dans le wikicode, car le paramètre « useslash » dans les paramètres avancés du panneau de configuration ne concerne que les URL, et donc la saisie dans la barre d’URL, et l’aspect, qui apparaît notamment au partage. Les URL sont plus familières quand elles contiennent des obliques plutôt que des deux-points. D’autre part, Wikipédia nous a habitués aux catégories suivies d’un deux-points.)) un wikilien « [[titre]] » sera affublé d’un hyperlien vers « catégorie1/titre », alors que dans MediaWiki, le wikicode pour cela est « [[catégorie1:titre]] ». Dans DokuWiki, les wikiliens sont relatifs au lieu d’être absolus.
L’oblique au début du wikicode des cibles de wikiliens peut être utilisée systématiquement, même dans les pages principales, afin d’éviter la charge mentale inutile ainsi que les conversions contre-productives quand du wikicode d’une page principale est transféré vers une sous-page.
Wikiliens absolus
Les URL des wikiliens sont par contre absolues au sens où le moteur de rendu les code avec l’URL du site dans la source des pages, alors que sur Wikipédia/MediaWiki, les liens internes sont relatifs dans la source des pages. Mais vu que de bonnes raisons sont citéesRuth Burr Reedy, Should I Use Relative or Absolute URLs?, Moz, 05/06/2015.
, il n’est pas nécessaire de modifier DokuWikî pour cela.
Interprétation culturelle et linguistique
DokuWiki est un CMS d’origine allemande, où les substantifs s’écrivent toujours avec majuscule. La version installée le 23/08/2020 date du 29/07/2020 et s’appelle « Hogfather » selon une figure d’un roman de fantasy.
Corriger les liens interwiki
DokuWiki prend en charge des liens externes vers des wikis ou d’autres sites par du wikicode et avec icônes, mais il manque le Wiktionnaire.
Les liens externes automatisés sont configurés dans « /conf/interwiki.conf », et les icônes sont dans « /lib/images/interwiki ». Les icônes ajoutées sont prises en compte après que la page de configuration a été réenregistrée.
Corriger l’existant
Il s’agit d’abréger « wpfr » en « w » pour Wikipédia, et « doku » en « dw » selon l’abréviation usuelle de DokuWiki (figurant dans le logo) :
# Wikipedia
w https://fr.wikipedia.org/wiki/{NAME}
# Others
dw https://www.dokuwiki.org/Les définitions de Google et d’Amazon nécessitent des rectifications pour /fonctionner correctement :
go https://www.google.com/search?q={URL}&btnI=lucky
# This URL parameter enables redirects, and must therefore be disabled.
# e.g. instead of results for "whatsapp", Google displays a redirect attempt alert.
go https://www.google.com/search?q={URL}
google https://www.google.com/search?q={QUERY}
amazon https://www.amazon.com/{NAME}Ajouter ce qui manque
Il faut ajouter la prise en charge pour les liens vers le Wiktionnaire, selon l’abréviation utilisée sur Wikipédia, la convention Dokuwiki, et une abréviation :
# Wiktionary
wikt https://en.wiktionary.org/wiki/{NAME}
wiktfr https://fr.wiktionary.org/wiki/{NAME}
wn https://fr.wiktionary.org/wiki/{NAME}Afin d’éviter de se dépanner avec l’icône de Wikipédia, on peut télécharger l’icône du Wiktionnaire, disponible dans les mêmes conditions que celle de Wikipédia. Dans la collection sur Wikimedia Commons, « Wiktionary-ico-de.png 32 × 32 ; 2 Kio » semble convenir.Category:Wiktionary icons contient 34 icônes ; la 29ᵉ est Wiktionary-ico-de.png (taille : 32 × 32, 2 ko ; le menu contextuel de l’image « File:Wiktionary-ico-de.png » permet d’enregistrer l’image).
Pour s’afficher correctement, les icônes dans ce répertoire doivent avoir une taille de 16 ×16 pixels. Il faut réduire la nouvelle dans un éditeur d’images comme Pinta.
Après l’avoir téléversée dans ce répertoire sous l’un des noms (« wikt.png »), il reste à la dupliquer sous les autres (« wiktfr.png » et « wn.png »).
Infobulles d’abbréviations
DokuWiki dispose d’un automatisme qui ajoute une infobulle à toute abbréviation répertoriée dans « /conf/acronyms.conf », liste conçue pour l’anglais. Il y a moyen d’en ajouter, mais aussi de désactiver les infobulles trop nombreuses.
Ajouter des infobulles
Les compléments, notamment en français, peuvent être ajoutés dans un nouveau fichier « /conf/acronyms.local.conf ». Pour le faire prendre en compte, il faut ré-enregistrer le panneau de configuration, afin d’effacer le cache.Problem with custom abbreviations, forum DokuWiki, 22/08/2014.
Le format de la liste d’abbréviations est une chaîne sans espaces suivie d’un ou plusieurs espaces, puis du texte de l’infobulle, par exemple :
LPO Ligue de protection des oiseauxLa définition n’est pas limitée en longueur, mais le terme à définir doit être d’un seul tenant. S’il est composé de plusieurs mots, d’autres espaces peuvent être utilisées comme l’espace insécale, ou l’espace quart de cadratin pour une espace sécable, ou une espace insécable suivie d’une espace nulle pour une espace justifiante sécable (mais le texte des fiches wiki n’est pas justifié). En cas de doublons, la dernière occurrence l’emporte.
Rendre les infobulles optionnelles
DokuWiki ne tient pas compte de la fréquence des sigles. Si une même fiche utilise beaucoup le sigle « LPO », par exemple parce que c’est la fiche consacrée à la LPO, voir chaque fois le souligné pointillé est ennuyeux. Dans la liste anglaise, même des unités comme « GHz » sont prises en charge. Dans les fiches techniques en lien avec les ondes électromagnétiques, une telle abondance d’infobulles serait tout aussi inacceptable pour au moins une partie du public.
Pour une solution simple, on peut ajouter un antiliant sans chasse au sigle dans le fichier de configuration, afin que l’infobulle ne soit présente que sur les occurrences avec un antiliant sans chasse à la suite du sigle. L’antiliant sans chasse est couramment utilisé en typographie informatique au point qu’il est sur la nouvelle disposition de clavier allemande.
Compléter les feuilles de style
Pour l’affichage
Quelle que soit la mise en page – avec ou sans volet latéral, avec une marge supplémentaire sauf sur les mobiles –, quelques éléments semblent pouvoir être ajustés afin de rendre la visite plus agréable.
Couleur du texte
À l’affichage, le texte est anthracite par défaut et ne noircit que pour l’impression. Afin d’offrir le meilleur contraste, l’affichage s’aligne :
h1,h2,h3,h4,h5,h6,p {
color: black;
}Ces règles et les suivantes sont ajoutées dans « /conf/userstyle.css ».
Couleurs des liens
Les hyperliens sont trop clairs, ne font aucune différence entre visité et non visité, et restent impassibles au pointage sauf à se souligner.
Pour régler ces couleurs, plusieurs classes virtuelles ou « pseudo-classes » s’offrent : « link » pour non-visité, « visited », et « hover » pour répondre au pointeur de la souris, « active » pendant que le bouton gauche de la souris est pressé.Deron Eriksson, How do I format unvisited and visited links?, AVAJAVA Web Tutorials, 2014.
Dans cet exemple, les liens visités et non visités ne sont pas trop différents afin d’éviter le patchwork et rassurer sur les intentions : Il ne s’agit pas de pousser à la consultation, mais d’offrir un aide-mémoire discret.
Il semble approprié que pendant le pointage, un lien prenne la couleur du reste du texte, car il reste reconnaissable par le soulignement qui apparaît, et par la forme du pointeur, qui passe de « texte » ou flèche à « pointeur », alors que pendant la pression sur le bouton gauche de la souris, les liens peuvent reprendre une couleur égale ou proche de celle qu’ils avaient avant, plutôt que de rougir ou de verdir.
a:visited {
color: #5522ee;
}
a:link {
color: #0000aa;
}
a:hover,
a.wikilink1:hover {
color: black;
}
a:active {
color: #0000aa;
}
a.wikilink1:active {
color: #008800;
}Pour être effective, la règle pour « :hover » doit figurer après celles pour « :link » et « :visited », afin d’avoir précédence. Si elle vient en première, elle n’a aucun effet. En seconde, elle n’affecte que les liens visités. Il en va de même de la classe virtuelle « :active », qui vient en dernière.
Taille du texte
Le texte est perçu comme beaucoup trop petit et trop difficile à lire. Cette petite taille était de bon ton par le passé, mais aujourd’hui ce style est de plus en plus délaissé au profit d’une meilleure lisibilité. Cela tient aussi à un contexte d’actualité où les alertes et autres informations importantes prennent le dessus et ne s’accommodent plus de cet effet de tapis de lettres minuscules.
Il faut alors aussi ajuster l’interligne :
/*fix font size*/
.dokuwiki div.page p, ul, ol, .footnotes {
font-size: 22px;
}
@media (min-device-width: 900px) {
.dokuwiki div.page p, ul, ol, .footnotes {
line-height: 1.9em;
}
}Taille des titres
Les titres sont trop petits à l’écran. C’est le même problème qu’avec le texte, surtout quand celui-ci est agrandi. Pour régler cela, on peut donner aux titres de section presque la même taille qu’au titre de la page. Aucun risque de confusion. Puis agrandir chaque niveau en-dessous pour les avoir seulement un peu plus petits les uns que les autres, et surtout, toujours plus grands que le texte.
h2 {
font-size:32px;
}
h3 {
font-size:27px;
}
h4 {
font-size:23px;
}
h5 {
font-size:20px;
}
h6 {
font-size:18px;
}Espacements
Dans la mise en page, il faut éviter qu’il y ait trop d’espace entre les alinéas, ou pas assez d’espace entre les éléments de liste. Quant aux titres, ils doivent être plus éloignés de l’alinéa précédent que du suivant, sans être trop près de celui-ci.
La suite est un exemple ; vu que les styles par défaut de DokuWiki ne sont pas satisfaisants, ce qui est proposé ici risque fort de ne pas l’être non plus.
.dokuwiki div.page h2,h3,h4,h5,h6 {
margin-top: 50px;
}
.dokuwiki div.page p {
margin-bottom: 15px;
}
/*list items spacing*/
li {
margin-bottom: 10px;
}
li.level2 {
margin-top: 10px;
}Marge intérieure gauche
Pour ajouter de la marge à gauche sans panneau latéral, la vraie marge intérieure est évitée à cause des couleurs de fond et des encadrés :
@media (min-device-width: 900px) {
h1,h2,h3,h4,h5,h6,p,ul,ol {
margin-left:11%;
}
h1 {
margin-top: 40px;
}
}
ul {
margin-left: -45px;
}
ul ul {
margin-left: -20px;
}Pour l’impression
À l’impression, seule la feuille de style dédiée « /lib/tpl/dokuwiki/css/print.css » est prise en compte. Malgré tout ce qui a été écrit, aucun moyen d’externaliser des règles dans « /conf/printstyle.css » ou « /conf/userprint.css » n’a été mis en place.Printing customization with userprint.css, DokuWiki forum, 26/02/2011. Comme indiqué dans le fil, le nom du fichier n’est pas « userprint.css » mais « printstyle.css ». Toutefois, ce dernier nom de fichier ne fonctionne pas non plus.
L’en-tête de « print.css » indique :
/**
* This file provides the styles for printing.
*
* @todo: improve and finish
*/« Tàf : améliorer et finir ».
Pour la finir, il faut au minimum :
- Choisir peut-être une autre police, la même qu’à l’affichage ;
- Ajouter un peu plus de marge à gauche ;
- Surtout prendre en charge les notes de fin en répliquant leurs règles prises dans « basic.less » ;
- Réduire le logo et ajuster les titre et sous-titre de site ;
- Ajouter aux éléments cachés à l’impression, le menu ajouté plus haut si un tel menu a été ajouté ;
- Ajuster l’espace autour des titres ;
- Répliquer certaines règles ajoutées dans « userstyle.css ».
Choix de la police
Dans « /lib/tpl/dokuwiki/css/basic.less », la police est « Arial, sans-serif ». Pour l’avoir aussi à l’impression, il faut ajouter cela à la tête de la pile de polices dans « /lib/tpl/dokuwiki/css/print.css », devant « Garamond, Baskerville, "Hoefler Text", "Nimbus Roman No9 L", serif ».
Marge gauche
Pour une bonne présentation, il faut éviter les marges trop réduites à gauche, où le lecteur s’attend à pouvoir tenir la feuille, et où des annotations sont parfois ajoutées. Pour cela, une marge à droite comme sur les copies d’élèves est plus pratique, mais l’avantage de la marge à gauche est qu’on peut continuer d’écrire entre les lignes au lieu de buter sur le bord de la feuille. Les annotations ne sont pas systématiques, et il faut aussi penser à économiser le papier.
Le tout est dans les styles de la balise <body>. La couleur, anthracite (#333333) à l’affichage, est déjà noircie, comme elle devrait l’être aussi à l’affichage, et on voit aussi qu’un éventuel fond coloré est neutralisé en blanc (« #fff ») :
body {
font: normal 87.5%/1.3 Arial, sans-serif, Garamond, Baskerville, "Hoefler Text", "Nimbus Roman No9 L", serif;
background-color: #fff;
color: #000;
margin-left: 7%;
}Notes de fin
Il faut commencer par copier-coller les styles de « basic.less » (l’extension « .less » désignant une sorte de langage CSS 2.0 permettant des raccourcis et converti en CSS par un utilitaire en JavaScript) :
/*____________ footnotes inside the text ____________*/
/* link to footnote inside the text */
.dokuwiki sup a.fn_top {
}
/* JSpopup */
div.insitu-footnote {
max-width: 40%;
min-width: 5em;
}
/*____________ footnotes at the bottom of the page ____________*/
.dokuwiki div.footnotes {
border-top: 1px solid @ini_border;
padding: .5em 0 0 0;
margin: 1em 0 0 0;
clear: both;
}
.dokuwiki div.footnotes div.fn {
}
.dokuwiki div.footnotes div.fn div.content {
display: inline;
}
.dokuwiki div.footnotes div.fn sup a.fn_bot {
font-weight: bold;
}Ensuite il faut reprendre les ajustements destinés à éviter que les indicateurs de notes soient complètement alignés avec le texte des notes :
/*footnotes*/
div.fn {
margin-left: 20px;
text-indent: -20px;
}Titre et logo
Pour le titre du site et le logo, on aura les règles détaillées plus haut, et en plus, ce qu’il faut pour réduire le logo de moitié et ajuster le texte à côté :
#site-title img { /* le logo */
width:70px;
height:70px;
}
div#site-title { /* le nom du site */
margin-bottom:0;
}
p.claim { /* la devise */
margin-top:0;
}Éléments cachés
Ce qui ne doit pas être imprimé, comme les menus, figure dans la liste après la balise <body>. La liste est ici abrégée et complétée par le menu ajouté, de classe « quickaccess ». Pour que la règle devienne effective sur cet élément, le div inclus, de classe « trace », doit lui aussi figurer comme sélecteur :
/* hide certain sections */
[…]
#dokuwiki__footer,
.quickaccess .trace {
display: none;
}Règles communes
La prise en charge des émojis se fait comme dans WordPress – où les scripts peuvent faillir – par l’intégration d’images dans le texte. Le code d’intégration pour DokuWiki est par exemple pour ![ℹ [i]](/svg/2139.svg "U+2139-Twemoji")
, ![1⃣ [1]](/svg/31-20e3.svg "U+0031,U+20E3-Twemoji")
, ![2⃣ [2]](/svg/32-20e3.svg "U+0032,U+20E3-Twemoji")
et ![3⃣ [3]](/svg/33-20e3.svg "U+0033,U+20E3-Twemoji")
:
<html><img class="emoji" alt="ℹ [i]" src="/svg/2139.svg" title="U+2139-Twemoji"></html>
<html><img class="emoji" alt="1⃣ [1]" src="/svg/31-20e3.svg" title="U+0031,U+20E3-Twemoji"></html>
<html><img class="emoji" alt="2⃣ [2]" src="/svg/32-20e3.svg" title="U+0032,U+20E3-Twemoji"></html>
<html><img class="emoji" alt="3⃣ [3]" src="/svg/33-20e3.svg" title="U+0033,U+20E3-Twemoji"></html>
Ces émoji Twemoji nécessitent les règles CSS suivantes, à ajouter aussi bien dans « /conf/userstyle.css » que dans « /lib/tpl/dokuwiki/css/print.css » :
/* for Twemoji */
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}Dernière modification :