Différences

Ci-dessous, les différences entre deux révisions de la page.

--- utilisateurs:fabux:emeht [Le 23/02/2018, 17:54] – Retrait FIXME pour useLocalBootswatch Fabux
+++ utilisateurs:fabux:emeht [Le 05/03/2018, 09:36] (Version actuelle) – [Discussion] Fabux
@@ Ligne 1: / Ligne 1: @@
+FIXME tag
+----
+====== Modification du thème de la documentation Ubuntu-fr ======
+Cette page fait partie du [[:utilisateurs/aldian/chantier_responsive_design|Chantier de refonte du design]] relancé en 2017 et sert de guide aux administrateurs qui ont pris le parti de repartir de zéro.
+Une fois en place tous les éléments notés ici feront parti intégrante de l'installation en locale et la page servira ensuite uniquement d'aide-mémoire pour eux.
+Il s'agit ici de compléter [[:utilisateurs/fabux/brouillons/ikiwllatsinubfr|l'installation de la documentation en locale]] par la mise en place de son thème et sa personnalisation.
+<note important>Pour facilité la lecture, les chemins des fichiers indiqués partent du dossier où vous avez installé votre documentation. Il s'agira donc ici de **/var/www/html/ubuntu-fr/ubuntu-fr-doc/**</note>
+===== Installation du thème =====
+  * Installer le [[https://www.dokuwiki.org/template:bootstrap3|plugin bootstrap3]] depuis le gestionnaire d'extensions.
+<note tip>Celà correspondra, après l'avoir téléchargée, à l'[[:wiki/mini-tutoriels#extraire_une_archive|extraire]] avec le nom **boostrap3** dans le dossier **lib/tpl** et à ajouter dans le fichier **conf/local.protected.php** la ligne suivante
+<file>$conf['template']    = 'bootstrap3';</file>
+</note>
+  * Activer le thème //[[https://bootswatch.com/united/|United]]// depuis les paramètres de configuration
+<note tip>Celà correspondra à [[:tutoriel:comment_modifier_un_fichier|modifier dans le fichier]] **local.protected.php** les lignes comme suit
+<file>
+$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
+$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'united';
+</file>
+</note>
+Après enregistrement de ces modifications, actualiser le navigateur: vous devriez être sur le thème United :)
+===== Personnalisation des feuilles de style =====
+Il est tout à fait possible de partir d'un thème existant pour l'adapter à vos envies.
+==== Récupérer un thème ====
+Vous pouvez créer votre propre thème en vous basant et adaptant le fichier **bootstrap.min.css** d'un des thèmes qui se trouve dans **/lib/tpl/bootstrap3/assets/bootstrap/**.
+<note tip>D'autres [[:navigateurs]] le font mais [[:Firefox]] avec ses outils de développement web déjà présent par défaut, permet également de récupérer une feuille de style basé sur bootstrap.</note>
+Pour la suite ce fichier **bootstrap.min.css** sera placé dans un dossier dédié de notre documentation local : **lib/tpl/bootstrap3/assets/bootstrap/themeperso1/**.
+[[:tutoriel:comment_modifier_un_fichier|Modifiez le fichier]] **bootstrap.min.css** à votre convenance pour en faire un thème à votre goût.
+<note tip>C'est le nom de votre dossier qui défini celui de votre thème. Ne renommez en aucun cas le fichier **bootstrap.min.css** sans quoi il ne sera pas reconnu.</note>
+==== Activation d'un thème personnel ====
+Pour activer votre thème il faudra :
+  * Modifier dans le fichier **lib/tpl/bootstrap3/conf/metadata.php** la ligne suivante <file>
+$meta['bootswatchTheme']     = array('multichoice', '_choices' => array( 'darkly', 'united', 'themeperso1'));</file> C'est d'ailleurs cette même ligne qui défini la liste des thèmes que vous rendez disponible.
+Ensuite depuis les paramètres de configuration :
+  * activer le menu pour les thèmes de bootswatch.com
+  * activer le répertoire local de Bootswatch
+ <note tip>Celà correspondra à ajouter dans **conf/local.protected.php** les lignes
+<file>
+$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;
+$conf['tpl']['bootstrap3']['useLocalBootswatch'] = 1;
+</file>
+</note>
+Actualiser la page du navigateur. Vous devriez avoir une icône supplémentaire vous permettant de choisir votre thème.
+===== Barre de navigation =====
+<note> La suite fonctionne pour le moment mais des tests sont fait -02/2017- avec les [[https://fontawesome.com/|font awesome]] plus pratique et fourni avec bootstrap</note>
+Dans le fichier **lib/tpl/bootstrap3/tpl_navbar.php** remplacer les lignes 33 à 53 par le contenu suivant:
+<file php>
+      <?php
+	$logo_accueil=tpl_getMediaFile(array(':wiki:accueil.png', ':accueil.png', 'images/accueil.png'), false, $logoSize);
+	$logo_forum=tpl_getMediaFile(array(':wiki:forum.png', ':forum.png', 'images/forum.png'), false, $logoSize);
+	$logo_planet=tpl_getMediaFile(array(':wiki:planet.png', ':planet.png', 'images/planet.png'), false, $logoSize);
+        // 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);
+        $title     = $conf['title'];
+        $tagline   = ($conf['tagline']) ? '<span id="dw__tagline">'.$conf['tagline'].'</span>' : '';
+        $logo_size = 'height="20"';
+        if ($tagline) {
+          $logo_size = 'height="32" style="margin-top:-5px"';
+        }
+        // display logo and wiki title in a link to the home page
+        tpl_link(
+            '//www.ubuntu-fr.org',
+            '<img src="'.$logo_accueil.'" alt="Accueil" class="pull-left" id="dw__accueil" '.$logo_size.' /> ',
+            'accesskey="a" title="[A]" class="navbar-brand"'
+        );
+	tpl_link(
+            wl(),
+            '<img src="'.$logo.'" alt="'.$title.'" class="pull-left" id="dw__logo" '.$logo_size.' /> ',
+            'accesskey="h" title="[H]" class="navbar-brand"'
+        );
+	tpl_link(
+            '//forum.ubuntu-fr.org',
+            '<img src="'.$logo_forum.'" alt="Forum" class="pull-left" id="dw__forum" '.$logo_size.' /> ',
+            'accesskey="f" title="[F]" class="navbar-brand"'
+        );
+	tpl_link(
+            '//planet.ubuntu-fr.org',
+            '<img src="'.$logo_planet.'" alt="Planet" class="pull-left" id="dw__planet" '.$logo_size.' /> ',
+            'accesskey="p" title="[P]" class="navbar-brand"'
+        );
+	tpl_link(
+            wl(),
+            '<span id="dw__title" '.($tagline ? 'style="margin-top:-5px"': '').'>'. $title . $tagline .'</span>',
+            'accesskey="t" title="[T]" class="navbar-brand"'
+        );
+      ?>
+</file>
+Il vous faudra mettre les icônes suivantes: FIXME  lien provisoire et chemin exact à remplacer
+  * [[https://pixabay.com/fr/ic%C3%B4ne-accueil-maison-1289758/|accueil.png]] : dans les dossiers data/wiki/ , data/ , images/
+  * [[https://pixabay.com/fr/phylactères-conversation-black-310399/|forum.png]] : dans les dossiers data/wiki/ , data/ , images/
+  * [[https://pixabay.com/fr/terre-planet-ic%C3%B4ne-boule-globe-1341377/|planet.png]] : dans les dossiers data/wiki/ , data/ , images/
+  * [[https://commons.wikimedia.org/wiki/File:Book_designed_by_Benny_Forsberg_from_the_Noun_Project.svg|guide.png]] : dans les dossiers data/wiki/ , data/ , images/
+===== Logo et favicon ====
+Pour mettre en place le logo et le favicon FIXME
+===== Plugins utilisés / tentés / à tester =====
+Pour avoir les liens sous la main :)
+==== Template ====
+  * [[https://www.dokuwiki.org/template:bootstrap3|Boostrap3]] avec thème united
+==== Numérotation titre / tdm ====
+  * [[https://www.dokuwiki.org/fr:tips:numbered_headings|Modif dans conf/userstyle.css]]
+  * [[https://www.dokuwiki.org/plugin:numberedheadings|numberedheadings]]
+==== Discussion ====
+  * [[https://www.dokuwiki.org/plugin:discussion|discussion]] : ajoute une section en bas ou  en haut
+  * [[https://www.dokuwiki.org/plugin:talkpage|talkpage]] : créé une page dédiée
+  * Voir le mode discussion intégré à bootstrap
+  * dans bootstrap activer l'option discussion. ''$conf['tpl']['bootstrap3']['showDiscussion'] = 1;''
+  * dans plugin discussion: ne pas activer sur toutes les pages et ajouter dans exclude_ns /discussion/.\\ ''$conf['plugin']['discussion']['excluded_ns'] = '/discussion/';''
+Piste: https://www.dokuwiki.org/plugin:newpagetemplate
+==== Onglet ====
+  * [[https://www.dokuwiki.org/plugin:tabinclude|tabinclude]]
+==== WYISWYG ====
+  * [[https://www.dokuwiki.org/plugin:ckgedit|CKGedit]]
+==== Scriptage ====
+  * [[https://www.dokuwiki.org/plugin:batchedit|batchedit]]
+==== Multi-composents ====
+  * [[https://www.dokuwiki.org/plugin:bootswrapper|bootswrapper]]
+===== Autres liens =====
+[[:utilisateurs/aldian/chantier_responsive_design|Chantier du design]] chez aldian
+===== DIVERS =====
+FIXME voir si c'est utile ou pas de noter ça:
+Option sur bootswatch
+  * //open in jsfiddle// : Permet de FIXME
+  * //bootstrap.min.css// : FIXME semble être la version non indenté de bootstrap.css
+  * //bootstrap.css// : FIXME le fichier [[wpfr>Feuilles_de_style_en_cascade|de feuilles de style]]
+  * //_variable.scss// : FIXME
+  * //_bootswatch.scss// : FIXME
+FIXME Je garde la suite ça sous le coude pour le moment
+Autre Installer le Plugin [[https://www.dokuwiki.org/%3Aplugin%3Abootswrapper|Bootswrapper]]
+<note tip>Celà correspondra à ajouter dans **conf/local.protected.php** la ligne suivante :
+<file>$conf['loadBootstrap'] = 1;</file>
+</note>
+<note important>Cette extension nécessite le module SimpleXML pour php. Vérifier que vous l'avez bien
+<code>php -m | grep -i simplexml</code>devrait vous répondre <code>SimpleXML</code>
+Sinon installez-le
+</note>
+Activer le module navbar en modifiant dans **lib/tpl/bootstrap3/conf/default.php** la ligne suivante
+<file>$conf['useLegacyNavbar']             = 1;</file>
+<file php>
+<nav type="tabs">
+  * [[:start]]
+  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
+  * [[playground:playground]]
+  * DokuWiki
+    * [[:wiki:welcome]]
+    * [[:wiki:syntax]]
+</nav>
+</file>
+===== Local.protected.php =====
+ <file php 20180302_local.protected.php>
+<?php
+    /*
+     * Paramètres de configuration propres à votre serveur de travail
+     * Attention les options principales sont dans local.php qu'il ne faut pas modifier
+     * Penser à en faire une sauvegarde avant une màj
+    */
+    //Le fichier userscripts.js sert pour les bouton en mode édition (exemple modifier un fichier, installer un paquet)
+    //https://www.dokuwiki.org/fr:rewrite pour pas avoir doku.php?id=nompage
+    //https://www.dokuwiki.org/rewrite#discussion pour php
+    //0: pas de rewrite / 1:passe par lighttpd.conf/ 2:interne à dokuwiki
+    //dans local.php ->= 1 car rewrite fait sur le serveur. Risque 404-not found en localhost
+    // donc:
+$conf['userewrite'] = 2;
+    //passer en dev sinon ???
+$conf['is_dev'] = 1;
+    //Gestion du thème
+    //Choix du template
+ //$conf['template']    = 'adoradark';
+//$conf['template']    = 'dokuwiki';
+$conf['template']    = 'bootstrap3';
+$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;
+$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
+//barre de navigation fixe
+$conf['tpl']['bootstrap3']['fixedTopNavbar'] = 1;
+//$conf['loadBootstrap'] = 1;
+     //Reactive toutes les actions
+$conf['disableactions']='';
+    //* Gestion de connexion utilisateur pour le serveur de DEV.
+$conf['authtype']='authplain'; //pour la connexion sans la base du forum
+    //remplir users.auth.php en faisant un sha1 sur le net.
+    //par exemple le login+mdp y on été mis à testeur/testeur avec
+    //testeur:0dd3d8466da1d1b581d8b1036f24ef43d37c7974:Moi:moi@nawak.og:members
+    //pour être admin et pas simple user
+$conf['superuser']= 'testeur';
+    // Suivi des modifications non nécessaires en DEV
+$conf['notify'] = '';
+// Lieu des données. Ici Lien symbolique
+$conf['savedir']= './data';
+</file>

Différences

Outils pour utilisateurs

Outils du site

Outils de la page

Divers