Around C# and WPF

Table des matières

• Introduction
• Construire le projet
  • Cloner le projet
  • Installer Hugo
  • Exécution en local
  • Construction du site statique
• Tutoriel
  • Ajouter une page
  • Ajouter du html personnalisé

Introduction

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.

Construire le projet

Cloner le projet

git clone --recursive https://github.com/smahot/pimo-wpf.git

Installer Hugo

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 dossier Documents 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.

Exécution en local

hugo serve

Le site est disponible à l'adresse suivante : http://localhost:1313/

Construction du site statique

hugo

Les fichiers se trouvent dans le dossier /public.

Tutoriel

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 :

• Netlify
• Render

Lien des documentations :

• Hugo
• Learn theme

Ajouter une page

L'arborescence du site se trouve dans le dossier /content/.

Explication de l'arborescence

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.

Ajouter du html personnalisé

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 :

• Exemples du thème
• Documentation hugo