# Utilisation du Wiki Bookstack

# Gestion de Projet IDF

### Prise de notes collaborative Seafile / Obsidian / VSCode

#### Synchronisation avec le client Seafile

- Installer le [client de synchronisation Seafile ](https://documentation.unistra.fr/Catalogue/Outils_collaboratifs/seafile/documentation_utilisateur/co/synchronisation.html)pour Windows pour un fonctionnement en mode Dropbox
- Synchroniser la bibliothèque `IHA-IDF`

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/scaled-1680-/image.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/image.png)

#### Édition dans le navigateur avec Seafile Web

- Explorer le dossier Seafile contenant les notes
- Ouvrir une note dans l'éditeur markdown intégré, voir [https://seafile.unistra.fr/help/manage\_library\_as\_wiki/](https://seafile.unistra.fr/help/manage_library_as_wiki/)

#### Édition locale asynchrone avec Obsidian  


- [Télécharger ](https://obsidian.md/download)et Installer Obsidian
- Ouvrir le dossier des notes comme coffre

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/GJRimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/GJRimage.png)

- Attention si une modification est faite sur Seafile, elle écrasera les modifications qui n'ont pas encore été remontées
- Par défaut il n'y a pas de barre d'outils dans l'éditeur, si besoin il faut installer le module complémentaire `Editing Toolbar`

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/ZQsimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/ZQsimage.png)

- Activer l'editing toolbar

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/pjzimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/pjzimage.png)

#### Édition collaborative temps-réel avec Obsidian

- Il est possible d'avoir une synchronisation en temps-réel entre 2 appareils (édition collaborative) en installant le module complémentaire `Self-hosted LiveSync`. Il faut alors configurer une [base de données couchDB ](https://github.com/YunoHost-Apps/couchdb_ynh)sur un serveur.

#### Édition en local avec Visual Studio Code et l'extension éditeur Markdown  


- Télécharger et installer Visual Studio Code
- Installer l'extension Office Viewer(Markdown Editor)

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/Sv3image.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/Sv3image.png)

- Fichier &gt; Ouvrir le Dossier de notes et faire confiance aux éditeurs
- Dans l'explorateur de fichiers intégré, ouvrir la note à éditer

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/xKwimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/xKwimage.png)

- Voici à quoi ressemble l'éditeur WYSIWYG (version sombre)

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/qLjimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/qLjimage.png)

### Utiliser Joplin en mode collaboratif

- [ Télécharger Joplin](https://joplinapp.org/download/) et installer
- Créer un nouveau profil IDF : `Fichier --> Changer de profil`

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/scaled-1680-/gsEimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/gsEimage.png)

- Synchroniser via le dossier Seafile `C:\Users\votre_user\Seafile\IHA-IDF\0_pilotage\0_Joplin_Prise_Notes` : `Outils --> Options --> Synchronisation`

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/scaled-1680-/DLEimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-01/DLEimage.png)

- Vous devriez voir apparaître les carnets et bloc-notes de Pilotage FabLab, GEII et QLIO

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/scaled-1680-/2Aximage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2023-09/2Aximage.png)

# Génération de documentation en Markdown

Pour rendre la génération de documentation la plus facile et efficace pour toutes et tous, nous fournissons ici des outils et procédures adaptés à différents profils.

Actuellement, on trouve :

- Des supports de cours
- Des TPs
- Des manuels d'opération de machines
- Des modes opératoires
- Des projets tutorés
- Des rapports de stage,...

Sous des formats aussi divers que :

- Document Word avec une organisation en Sections
- Document Word avec une organisation en tableau "Mode opératoire"
- Document PDF
- Document LibreOffice
- Page de Wiki en syntaxe DokuWiki

## Pourquoi Markdown ?

Certains d'entre vous ont peut-être déjà contribué à Wikipedia, au Wiki de l'innovation à l'IUT, ou au wiki d'une autre communauté ouverte. [La syntaxe Wiki](https://wiki.fablab.sorbonne-universite.fr/wiki/doku.php?id=wiki:tutoutilisation) est inspirée de la syntaxe du code HTML, mais simplifiée pour la rendre lisible et éditable par des contributeurs qui ne sont pas webmaster. Cela permet d'éditer un wiki directement dans le navigateur sans avoir besoin d'un moteur d'édition lourd "WYSIWYG". On clique sur les boutons de l'interface d'édition du wiki pour mettre en forme notre texte. Mais la syntaxe est en fait trop compliquée pour être éditée à la main.

Markdown est le standard de la documentation Open Source. Il est utilisé sur GitHub, GitHub Pages, GitLab pour documenter les projets de logiciel. Il est également supporté par la plupart des Wiki par l'intermédiaire d'Extensions, ainsi que par de nombreux moteurs de sites Web (CMS) tel que Grav. Sa syntaxe est bien plus simple à retenir et rapide à écrire, ce qui permet d'écrire sans cliquer sur des boutons de mise en forme pour plus d'efficacité. De plus, son aspect standard permet de transférer facilement d'un site web vers un wiki ou une forge logicielle, et de l'éditer directement sur son ordinateur pour pouvoir l'imprimer pour générer une documentation papier.

### Les différents standards markdown

Il existe une syntaxe standard Markdown, dont les fonctionnalités de mise-en-forme sont limitées, et des dérivés qui supportent le standard et y ajoutent des fonctionnalités non-standard, qui ne seront donc pas correctement mises en forme sur tout site web :

- Markdown 
    - [Traditional Markdown](https://daringfireball.net/projects/markdown/syntax)
    - [Markdown Extra](https://michelf.ca/projects/php-markdown/extra/)
- [syntaxe Extended](https://www.markdownguide.org/extended-syntax/)
    - dsg
        
        
        - [GitHub-Flavored Markdown](https://github.github.com/gfm/#tables-extension-)
        - 
        -
- [Syntaxe Markdown DokuWiki via le plugin mdpage](https://www.dokuwiki.org/plugin:mdpage#syntax)

### Le Markdown dans Bookstack

Bookstack possède sa [propre syntaxe markdown](https://www.bookstackapp.com/docs/user/markdown-editor/) qui permet de faire par exemple plus de choses avec les tableaux.

### YesWiki Markdown

YesWiki était un autre wiki envisagé pour le wiki de l'IUT, on a finalement opté pour Bookstack.

- Ne supporte a priori que la [syntaxe Extended](https://www.markdownguide.org/extended-syntax/) [https://yeswiki.net/?DocMarkdown](https://yeswiki.net/?DocMarkdown)

### Wiki.js

Wiki.js était un autre wiki envisagé pour le wiki de l'IUT, on a finalement opté pour Bookstack.

- https://docs.requarks.io/guide/intro

## Astuces de syntaxe markdown

- [Créer un retour à la ligne dans une cellule de tableau](https://stackoverflow.com/questions/11700487/how-do-i-add-a-newline-in-a-markdown-table)
    - [Hack avec syntaxe extended](https://www.markdownguide.org/hacks/#line-breaks-within-table-cells) = extra?
    - [Bug `<br />`](https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br)

## Conversion format Word (.docx) vers Markdown (.md)

Si le document Word reste suffisamment simple, il est possible de convertir automatiquement le contenu en Markdown avec une mise en forme correcte sans post-traitement.

### Prérequis

#### Organisation en Sections

Si la syntaxe du document Word reste simple :

- Des Titres et des paragraphes de texte
- De la mise en forme **gras**, *italique*, `code machine`
- Puces et puces numérotées
- Seulement des images, pas de formes ou graphiques Office
- Pas de sommaire

#### Organisation en Tableau

Les tableaux sont supportés de manière limitée par la syntaxe Markdown de base.

1. Veiller à ce que une case d'un tableau ne contienne pas de puces
2. Sauvegarder et Supprimer les images qui devront être réimportées dans le site de destination
3. 

### Installation des outils

Installation de l'outil de conversion universel [Pandoc](https://stackoverflow.com/questions/16383237/how-can-doc-docx-files-be-converted-to-markdown-or-structured-text/33149947#33149947)

#### Linux

- sur [Ubuntu](https://doc.ubuntu-fr.org/pandoc)
- `sudo apt install pandoc`

#### Windows

- Page de la [dernière version de pandoc](https://github.com/jgm/pandoc/releases/latest)
- Télécharger le fichier `.msi`, par exemple `pandoc-3.1.13-windows-x86_64.msi`

### Procédure

- Ouvrir un Terminal de ligne de commande et se placer dans le dossier du fichier `.docx` à convertir
- Conversion vers [GitHub-Flavored Markdown](https://github.github.com/gfm/#tables-extension-)
- `pandoc -f docx -t gfm APAS_mode_operatoire.docx -o apas_mode_operatoire.md`
- Copier le contenu dans l'éditeur Mardown de Bookstack
- Eventuellement copier les images une-à-une manuellement

## Markdown -&gt; Wiki

La plupart des sites de Wiki supportent une ou plusieurs syntaxe Markdown via des Extensions. Pas besoin donc de traduire le code source d'une syntaxe vers l'autre.

- [Syntaxe Markdown DokuWiki via le plugin mdpage](https://www.dokuwiki.org/plugin:mdpage#syntax)
    - Pour écrire du markdown dans une page, il faut : 
        - déclarer toute la page comme markdown`<!doctype markdown>`
        - OU envelopper une partie du texte dans les balises suivantes `<markdown>` `</markdown>`
    - https://github.com/mizunashi-mana/dokuwiki-plugin-mdpage/issues/77

## DokuWiki -&gt; Markdown

Il existe un plugin dokuwiki pour exporter en markdown :

- [https://www.dokuwiki.org/plugin:dw2markdown](https://www.dokuwiki.org/plugin:dw2markdown)

## Impression de documentation

### Markdown -&gt; PDF -&gt; Impression

Installation de Visual Studio Code avec l'extension Office Viewer(Markdown Editor)

- Dans Windows ouvrir l'application `Microsoft Store`
- Installer Visual Studio Code
- Ouvrir Visual Studio Code
- Dans le menu latéral gauche cliquer sur le dernier bouton `Extensions`
- Rechercher et installer l'extension Office Viewer(Markdown Editor)
- Ouvrir son fichier Markdown
- Exporter au format PDF

[![](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-04/scaled-1680-/image-1714055832610.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-04/image-1714055832610.png)

- Noter que cette extension inclut https://github.com/zaaack/vscode-markdown-editor et est basée sur https://github.com/Vanessa219/vditor

### BookStack -&gt; PDF -&gt; Impression

- Export d'une page au format PDF [![](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-04/scaled-1680-/image-1714055966233.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2024-04/image-1714055966233.png)

# Administration Bookstack

<p class="callout info">La documentation complète de Bookstack est disponible directement sur [le site du produit](https://www.bookstackapp.com/docs/ "Bookstack").</p>

### Serveur Plesk

Notre instance Bookstack est hébergée sur un serveur de l'IUT de Haguenau via le gestionnaire d'applications Plesk.

- On peut directement éditer le fichier de configuration `.env` depuis la webadmin :

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2025-03/scaled-1680-/Wwcimage.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2025-03/Wwcimage.png)

- Se connecter en ligne de commande *Websites &amp; Domains &gt; innovation.iha.unistra.fr &gt; Dashboard &gt; Dev Tools &gt; SSH Terminal*

[![image.png](https://innovation.iha.unistra.fr/uploads/images/gallery/2025-03/scaled-1680-/z86image.png)](https://innovation.iha.unistra.fr/uploads/images/gallery/2025-03/z86image.png)

- Recharger la config `.env` : `php artisan config:cache`

### Gestion des droits

<p class="callout warning">Bookstack vous permet d'afficher les rôles et utilisateur·trice·s de votre wiki, néanmoins la gestion des droits doit être gérer directement via l'interface de gestion des groupes disponible sur l'intranet de l'UNIL</p>

Au moment de la création de votre wiki, 3 groupes majeurs sont créés, ces groupes permettent de gérer les différents types d'utilisateurs (administrateurs, éditeurs et lecteurs) :

<div class="page-content clearfix" component="page-display" id="bkmrk-wiki-wikiname-resp-w" option:page-display:page-id="1712"><div class="page-content clearfix" component="page-display" option:page-display:page-id="1712"><div dir="auto">- wiki-WikiName-resp
- wiki-WikiName-editor
- wiki-WikiName-viewer

</div></div></div>*\*il faut remplacer "WikiName" par le nom de votre Wiki.*

[https://www.bookstackapp.com/docs/user/roles-and-permissions/](https://www.bookstackapp.com/docs/user/roles-and-permissions/ "https://www.bookstackapp.com/docs/user/roles-and-permissions/")

### Récupérer une page supprimée  


Les administrateur·trice·s ont la possibilité de récupérer (sous 30 jours) des pages supprimées par les éditeur·trice·s. Pour accéder à la récupération des pages :

<div class="page-content clearfix" component="page-display" id="bkmrk-cliquer-sur-%22setting" option:page-display:page-id="1712"><div class="page-content clearfix" component="page-display" option:page-display:page-id="1712"><div dir="auto">1. Cliquer sur "Settings"
2. Cliquer sur l'onglet "Maintenance"
3. Cliquer sur le bouton "OPEN RECYCLE BIN" pour récupérer

</div></div></div>[![capture 1 - récupérer pages](https://wiki.unil.ch/ci/uploads/images/gallery/2024-04/scaled-1680-/capture-1-recuprer-fichiers.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2024-04/capture-1-recuprer-fichiers.png)

La liste des fichiers apparait sur cette page. Le bouton "Actions" vous permet d'utiliser la fonction "Restore" pour récupérer l'élément supprimé.

<div class="page-content clearfix" component="page-display" id="bkmrk--3" option:page-display:page-id="1712"><div class="page-content clearfix" component="page-display" option:page-display:page-id="1712"><div dir="auto"><div aria-label="Options de section de page" class="pointer-container" id="bkmrk--4" refs="pointer@pointer" style="display: block; left: 808.5px; top: 197.683px;" tabindex="-1"><div class="pointer flex-container-row items-center justify-space-between p-s anim "><div class="flex-container-row items-center gap-s" refs="pointer@mode-section"><div class="input-group"></div></div></div></div></div></div></div>[![Capture 2 - récupérer fichiers.png](https://wiki.unil.ch/ci/uploads/images/gallery/2024-04/scaled-1680-/capture-2-recuperer-fichiers.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2024-04/capture-2-recuperer-fichiers.png)

### Source :

[https://wiki.unil.ch/ci/books/wiki-bookstack-pour-documentation/page/administrer-bookstack](https://wiki.unil.ch/ci/books/wiki-bookstack-pour-documentation/page/administrer-bookstack)

# Débuter avec Bookstack

<p class="callout info">La documentation complète de Bookstack est disponible directement sur [le site du produit](https://www.bookstackapp.com/docs/ "Bookstack").</p>

BookStack est un système de wiki pour gérer et organiser de la documentation. L'organisation du contenu se base sur la métaphore d'une bibliothèque: une étagère contient des livres, qui contiennent des chapites, qui eux-mêmes contiennent des pages. Le contenu figure dans les pages.

L'édition s'effectue avec une interface WISIWYG, un peu à la manière d'un traitement de texte simplifié. On peut structurer le contenu d'une page avec plusieurs niveaux d'intertitres, mettre du texte important en évidence, et y ajouter des images et des documents.

Un système de droits d'accès permet de choisir quels contenus doivent être visibles par tout le monde, ou au contraire uniquement visibles par un groupe restreint.

BookStack est une application open source, une description de ses fonctionnalités est disponible sur [le site du projet](https://www.bookstackapp.com/).

### Bases de l'interface d'édition

#### Création de page et importation par copier/coller

On peut enregistrer une page comme brouillon ou la publier immédiatement. Lors de l'importation de texte par copier/coller, on peut nettoyer les styles importés.

[![creation.png](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/scaled-1680-/creation.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/creation.png)

#### Structure du document

Plusieurs niveaux d'intertitres permettent de structurer le document, ils sont représentés sous forme de sommaire cliquable latéral. Notre conseil: si possible éviter le niveau "header large", très volumineux sur le plan typographique et visuellement peu différenciable du titre de la page.

[![image-1604071719588.png](https://wiki.unil.ch/ci/uploads/images/gallery/2020-10/scaled-1680-/image-1604071719588.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2020-10/image-1604071719588.png)

#### Mise en évidence de messages importants

Plusieurs styles sont proposés.

[![image-1604071738080.png](https://wiki.unil.ch/ci/uploads/images/gallery/2020-10/scaled-1680-/image-1604071738080.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2020-10/image-1604071738080.png)

### Organisation et tri des contenus

Voir la documentation officielle: [Content Overview](https://www.bookstackapp.com/docs/user/content-overview/) et [Organising Content](https://www.bookstackapp.com/docs/user/organising-content/).

### Ajout de documents

#### Ajouter un document PDF

Pour ajouter un document PDF à une page, voici comment procéder:

[![pdf.png](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/scaled-1680-/pdf.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/pdf.png)

#### Ajouter dans la page un lien vers ce document

Avec le simple ajout par défaut comme illustré ci-dessus, la présence du document associé à la page sera peu visible pour les personnes qui la consultent. Il est donc conseillé d'utiliser l'option d'ajout de lien vers le document dans la page:

<div aria-label="Options de section de page" class="pointer-container" id="bkmrk--5" refs="pointer@pointer" style="display: block; left: 1187.5px; top: 194.767px;" tabindex="-1"><div class="pointer flex-container-row items-center justify-space-between p-s anim "><div class="flex-container-row items-center gap-s" refs="pointer@mode-section"><div class="input-group"></div></div></div></div>[![lien-pdf.png](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/scaled-1680-/lien-pdf.png)](https://wiki.unil.ch/ci/uploads/images/gallery/2022-12/lien-pdf.png)

Documentations intéressantes :

- [https://www.bookstackapp.com/docs/user/markdown-editor/](https://www.bookstackapp.com/docs/user/markdown-editor/ "https://www.bookstackapp.com/docs/user/markdown-editor/")
- [https://www.bookstackapp.com/docs/user/reusing-page-content/](https://www.bookstackapp.com/docs/user/reusing-page-content/ "https://www.bookstackapp.com/docs/user/reusing-page-content/")
- [https://www.bookstackapp.com/blog/bookstack-release-v22-09/#page-include-parse-logical-theme-event](https://www.bookstackapp.com/blog/bookstack-release-v22-09/#page-include-parse-logical-theme-event "https://www.bookstackapp.com/blog/bookstack-release-v22-09/#page-include-parse-logical-theme-event")

Source adaptée : [https://wiki.unil.ch/ci/books/wiki-bookstack-pour-documentation/page/d%C3%A9buter-avec-bookstack](https://wiki.unil.ch/ci/books/wiki-bookstack-pour-documentation/page/d%C3%A9buter-avec-bookstack)