Personaliser le MkDocs

mkdocs.yml

theme:
  name: material
  palette:
    primary: "teal" # posibilité de mettre code HEX "#03F34"
    accent: "orange"
  font:
    text: "Roboto"
    code: "Roboto Mono"

liste de couleur disponible : - red, pink, purple, deep purple, indigo, blue, light blue - cyan, teal, green, light green, lime, yellow, amber - orange, deep orange, brown, grey, blue grey, white, black

theme:
  name: material
  logo: images/logo.png  # Chemin vers ton logo
  favicon: images/favicon.ico  # Chemin vers ta favicon

le logo dois être dans le fichier Docs et dans notre cas docs/images/logo.png

option facile a ajouter

theme:
  features:
    - navigation.top      # Remonte en haut de la page avec un bouton
    - navigation.footer   # Ajoute une navigation en bas des pages
    - navigation.tabs     # Ajoute des onglets de navigation
    - navigation.tabs.sticky # Garde les onglets visibles en haut
    - content.code.copy # Ajoute un bouton pour copier du code
    - content.code.annotate # Permet d'ajouter des annotations sur le code 
    - content.code.select # Permet de sélectionner du code interactif
    - toc.integrate  # Affiche la table des matières latéralement
    - navigation.instant # Charge les pages plus rapidement (désactive le reflesh)
    - navigation.instant.progress # Ajoute une barre de chargement lors de la navigation 
    - navigation.sections # Active les sections dans la navigation latérale
    - search.suggest  # Suggestion instantanée
    - search.highlight  # Surlignage des termes trouvés
    - search.share  # Partage des résultats

passer en mode sombre

theme:
  palette:
    - scheme: default # Mode Clair
      primary: indigo
      accent: cyan 
      toggle:
        icon: material/weather-night # icon lune
        name: "Mode sombre"
    - scheme: slate # Mode Sombre
      primary: blue-grey
      accent: cyan
      toggle:
        icon: material/weather-sunny # icon soleil
        name: "Mode clair"

Ajouter du css

nano docs/styles.css

body {
    background-color: #f5f5f5;  /* Change la couleur de fond */
}
h1, h2, h3 {
    font-family: "Arial", sans-serif;  /* Change la police des titres */
}

extra_css:
  - styles.css

faire en sorte que le mkdocs prennent toute la largeur possible

.md-grid {
    max-width: 100% !important;
}

Ajouter du Java

nano docs/scripts.js

document.addEventListener("DOMContentLoaded", function() {
    console.log("Site MkDocs chargé !");
});

extra_javascript:
  - scripts.js

document$.subscribe(function() {
    const searchInput = document.querySelector('input[placeholder="Search"]');

    if (searchInput) {
        searchInput.setAttribute("placeholder", "Rechercher un fichier .md...");
    }

    const searchIndex = window.search;

    if (searchIndex) {
        searchIndex.pipeline.reset(); // Désactive la recherche par contenu
        searchIndex.addField('title'); // Recherche uniquement les titres des fichiers
        searchIndex.addField('filename'); // Ajoute la recherche par nom de fichier
    }
});

mkdocs.yml

``` site_name: "Mon Wiki"

theme:

name: material # thème de base (enregistrer sur le machine)

logo: images/logo.png # Chemin vers ton logo

favicon: images/favicon.ico # Chemin vers la favicon

features: # ajoute des option - navigation.top # bouton Page UP - palette: # couleur primary: "teal" # couleur des lien et des barre de navigation accent: "orange" # couleur des lien survolé

font: # police des texte text: "Roboto" # police du texte code: "Roboto Mono" # police du code

extra_css: - styles.css - extra_javascript: - scripts.js

nav: # navigation des fichier md - Accueil: index.md - Tutoriels: - "Installation MkDocs": tuto1.md - "Utilisation avancée": tuto2.md - Linux: - "Commandes de base": sous-dossier/linux.md - "Tuto avancé": sous-dossier/tuto_avancé.md