Thème du site

Le thème du site (couleur, police d’écriture …) peut être modifié à l’aide du fichier properdocs.yml et de fichiers css et javascript supplémentaires.

Modifiez le fichier properdocs.yml comme suit :

properdocs.yml

site_name: My Education Site

theme:
  name: materialx
  paelette:
    primary: custom
  topbar_style: primary
  language: 'fr'
  font:
    text: 'Roboto'
    code: 'IBM Plex Mono'
  custom_dir: 'overrides/'
  logo: 'assets/images/heiafr.png'
  favicon: 'assets/images/favicon.ico'
  features:
    - content.code.annotate
    - navigation.sections

extra_css:
  - 'stylesheets/extra.css'

extra_javascript:
  - javascripts/mathjax.js
  - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js

créez ensuite la structure de dossiers suivante:

overrides
├── assets
│   └── images
├── javascripts
└── stylesheets

Dans le dossier overrides/assets/images, copiez les images suivantes:

Puis ajoutez le fichier overrides/javascripts/mathjax.js :

overrides/javascripts/mathjax.js

window.MathJax = {
  tex: {
    inlineMath: [['\\(', '\\)']],
    displayMath: [['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true,
  },
  options: {
    ignoreHtmlClass: '.*|',
    processHtmlClass: 'arithmatex',
  },
}

document$.subscribe(() => {
  MathJax.typesetPromise()
})

et overrides/stylesheets/extra.css:

overrides/stylesheets/extra.css

:root {
  --md-primary-fg-color: #c32823;
  --md-primary-fg-color--light: #fd5e4c;
  --md-primary-fg-color--dark: #8b0000;
  --md-accent-fg-color: #007cb7;
}

.md-content a {
  text-decoration: underline;
}

Avec cette configuration, la couleur de base du site est celle de la filière ISC de la Haute école d’ingénierie et d’architecture de Fribourg (#C32823). Les variantes de teintes sont déterminées à l’aide du site https://material.io/resources/color.

Testez maintenant votre site avec la commande suivante:

uv run properdocs serve

Note

Si vous avez déjà lancé le serveur de développement, vous devez l’arrêter avec Ctrl+C et le relancer pour que les modifications soient prises en compte. Notez que l’option -t materialx n’est plus nécessaire car le thème est maintenant défini dans le fichier properdocs.yml. L’option est même interdite car elle écrase la configuration du fichier properdocs.yml et ne produit pas le résultat attendu.

Le site devrait maintenant ressembler à ça:

site avec le thème de ISC