Configuration de notre instance Dokuwiki

L'idée, c'est de documenter brièvement notre config, au cas où ça puisse intéresser d'autres personnes…

Nous utilisons le thème (template) bootstrap3, associé au plugin bootswrapper. Celui-ci possède plusieurs “sous-thèmes” bootswatch, on utilise une version customisée de simplex. On va détailler ça juste après.

J'ai essayé de documenter un max de trucs ici, mais il y a aussi des modifs CSS qui sont directement dans userstyle.css, et qui sont un peu du coup par coup…

Nous utilisons, en plus de bootswrapper qui apporte de la syntaxe, un thème bootstrap3. J'ai voulu modifier celui-ci car j'étais insatisfaite de la taille de police (13px c'est petit), et de certaines couleurs (les éléments de type warning en violet c'était bizarre). J'ai donc cloné le git de bootswatch (version 3.4.1 car on utilise bootstrap3), voir https://bootswatch.com/3/help/. J'ai modifié le thème “simplex” en local (j'ai d'abord voulu créer un nouveau thème “apprentilab” mais ça ne voulait pas compiler (EDIT : en fait il faut modifier le fichier Gruntfile.js, ou créer un fichier qui s'appelle custom, et non apprentilab)… Il faut modifier le fichier variables.less puis compiler avec grunt swatch:simplex. J'ai récupéré le fichier bootstrap.min.css, créé un dossier de thème “apprentilab” dans /lib/tpl/bootstrap3/assets/ où j'ai mis ce fichier css, et j'ai également ajouté le nom apprentilab dans le fichier conf metadata.php (sinon le panneau de configuration ne voit pas le thème). Attention, il risque d'être écrasé par une màj du thème, il vaudrait mieux le mettre en dehors du dossier du thème, en l'hébergeant sur notre gitlab par exemple ? Ou en créant un dossier de thème ?

Modifs :

  • @font-size-base: 17px;
  • @brand-primary: #c1002a;
  • @brand-warning: #ffc107;
  • @brand-danger: #F06908;
  • @text-color: @333;
  • @btn-warning-color: @black;
  • @panel-bg: lighten(@body-bg, 3%);

Lien vers page utilisateur dans nav

Fichier /lib/tpl/bootstrap3/tpl/menu-user.php

<bdi>
  <a href="<?php echo $TPL->getUserHomePageLink() ?>" title="Page utilisateur" rel="nofollow">
    <?php echo iconify('mdi:home-account'); ?> <?php echo hsc($_SERVER['REMOTE_USER']) ?>
  </a>
</bdi>

Modification du script de redimensionnement de la table des matières

La TOC est un peu trop haute. Fichier /var/www/dokuwiki/lib/tpl/bootstrap3/script.js, ligne 704 : 'max-height': (jQuery(window).height() - 50 - jQuery('#dokuwiki__content').position().top) + 'px' → passer la valeur à -200

Table des matières à droite

Progressbar avec couleur conditionnelle

→ modification du code des progressbar pour avoir une couleur qui change selon la valeur (type “warning” uniquement).

Fichier /var/www/dokuwiki/lib/plugins/bootswrapper/syntax/progressbar.php

Modif ligne 83 :

if($type=='warning') {
  $markup = '<div class="bs-wrap bs-wrap-progress-bar progress-bar progress-bar-' . $type . ' ' . $classes . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%;' . ($showvalue ? 'min-width: 2em; background-color: hsl('.$value.', 100%, 40%);' : '') . '">';
} else {
  $markup = '<div class="bs-wrap bs-wrap-progress-bar progress-bar progress-bar-' . $type . ' ' . $classes . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%;' . ($showvalue ? 'min-width: 2em;' : '') . '">';
}

+ modif l 22 (ajout d'un type “conditional', et remplacement du type par défaut, de “info” à “conditional”).

Demo :

1%
25%
50%
75%
100%

Voir https://github.com/giterlizzi/dokuwiki-plugin-bootswrapper/issues/138

Désactiver le bouton pour modifier un panneau

Les panel et pane ont leur propre bouton de modification, c'est confus et dense quand on a aussi le bouton de fin de section. J'ai donc préféré le désactiver.

Fichier action.php

  • l24-27, comment private $section_edit_buttons = array(...
  • l.37, comment $controller->register_hook('HTML_SECEDIT_BUTTON', 'BEFORE', $this, '_secedit_button');

Fichier syntax/panel.php

  • l.96-100, comment if (defined('SEC_EDIT_PATTERN'))...
  • l.121, comment $renderer->finishSectionEdit($pos + strlen($match));

Aliastextbox

Les champs de formulaire data_aliastextbox (en combinaison avec le plugin bureaucracy), avaient le premier item sélectionné par défaut. C'est ennuyeux si on veut laisser le champ vide.

Pour arranger ça, j'ai modifié le fichier /var/www/dokuwiki/lib/plugins/data/helper/aliastextbox.php, ligne 103 (commentée) :

if(count($params['value']) === 0) {
  //$params['value'] = $params['args'][0];
}

Voir https://github.com/splitbrain/dokuwiki-plugin-data/issues/227

New output : tiles

Voir page Machines par exemple.

L'idée : on a des outputs en liste et en tableau, j'ai créer un output en tuiles (style tiles de Bootstrap 4, ça n'est pas implémenté dans BS 3 mais on peut faire une grille, voir dans test_bs_grid où j'ai fait de jolis tests).

En fait ce qui serait encore mieux serait de pouvoir définir direct dans la page dokuwiki notre sortie, avec le template d'éléments qui se répètent, et ceux qui sont au début/à la fin, donc pas en éditant le plugin et en ajoutant des fichiers php. Voir code des sorties datalist et datatable → /var/www/dokuwiki/lib/plugins/data/syntax

EDIT : 2022/03/31 09:55 ça marche :) On ne peut pas définir différentes largeurs, mais au pire il suffirait de créer des outputs différents, j'ai pas compris comment passer des arguments. Le code est là : https://code.apprentilab.cnam.fr/suzannehervouet/dokuwiki-data-tiles

L'idée c'est d'avoir une liste auto de tous les utilisateurs du wiki, avec un historique de leurs contributions.

Pour les présentations, j'ai rajouté cette catégorie dans le template de la page, mais ça pourrait aussi être un lien interwiki vers le profil sur le forum ?

https://www.dokuwiki.org/tips:homepages

Enlevé le bouton dans la toolbar de la fenêtre d'édition, car elle est déjà chargée et les usagers n'en auront pas forcément besoin.

Fichier lib/plugins/nspages/action.php, commenté la fonction insert_button l.14 + commenté le hook l.10