Ceci est un MOOC sur WPF (Windows Presentation Foundation), un framework d’interface utilisateur qui permet de créer des applications de bureau clientes.
Un générateur de site web, HUGO, sera utilisé pour générer le site web contenant le MOOC.
git clone --recursive https://github.com/smahot/pimo-wpf.git
Lien de la documentation : Intaller Hugo
Autrement sur Windows, pour la version 0.68.3 :
- Lancer l'
invite de commande
et se positionner sur le bureau :
cd Desktop
- Télécharger la dernière version de l'archive :
wget https://github.com/gohugoio/hugo/releases/download/v0.68.3/hugo_0.68.3_Windows-64bit.zip
Ou lancez votre navigateur préféré et allez sur le lien suivant, puis enregistrez le sur votre bureau.
- Décompresser l'archive dans un dossier appelé hugo:
Avec 7-zip :
"C:\Program Files\7-Zip\7z.exe" x hugo_*_Windows-64bit.zip -ohugo
Avec Powershell :
Expand-Archive "hugo_*_Windows-64bit.zip" "hugo"
- Déplacer le dossier
hugo
dans le dossierDocuments
par exemple :
move hugo %userprofile%\Documents
Le dossier doit contenir :
- hugo.exe (l'exécutable dont on a besoin)
- LICENSE (le fichier de license)
- README.md (le readme markdown, à ouvrir avec VS Code par exemple)
- Ajouter le dossier contenant l'executable au path
path=%path%;%userprofile%\Documents\hugo
Le programme doit maintenant pouvoir être utilisé en ligne de commande avec hugo
.
Vous pouvez supprimer l'archive zip
de votre bureau.
hugo serve
Le site est disponible à l'adresse suivante : http://localhost:1313/
hugo
Les fichiers se trouvent dans le dossier
/public
.
Le contenu du cours est rédigé en markdown.
Nous avons utilisé le thème Learn pour la mise en page.
Le site est déployé automatiquement à partir de la branche master :
Lien des documentations :
L'arborescence du site se trouve dans le dossier /content/.
Pour créer une page nommée test à la racine du site, deux solutions :
/content/test/_index.fr.md
ou
/content/test.fr.md
Ici
fr
correspond à l'id de la langue. Plus de détail sur le fonctionnement du mode multi-langue ici.
Ensuite, ouvrez le fichier markdown avec un éditeur de texte comme Visual Studio Code, Atom ou Notepad++.
Ajoutez en entête :
+++
title = "Nom du titre"
weight = 5
pre = "<b>X. </b>"
+++
- weight sert à classer les différentes pages dans l'ordre croissant dans le menu de navigation.
- title sera le nom du titre qui sera affiché dans le menu de navigation.
- pre est le préfixe du titre
Puis remplissez la page.
Un template est disponible ici.
Si la syntaxe markdown n'est pas sufisante, il est possible d'ajouter du html via les shortcodes.
Les shortcodes sont dans le dossier /layouts/shortcodes/
.
Le nom du fichier doit s'appeler de la façon suivante : nomDuShortcode.html
Puis le code html du fichier peut être appelé de la façon suivante : {{% nomDuShortcode %}}
.
Il est possible de passer des paramètres comme pour une fonction : {{% nomDuShortcode "param1" "param2" %}}
Pour plus de détails :