| Les deux révisions précédentesRévision précédente | Dernière révisionLes deux révisions suivantes |
| issue146:c_c [2019/07/12 10:24] – d52fr | issue146:c_c [2019/07/12 12:15] – auntiee |
|---|
| If you prefer to download the files first, and simply follow along with the article, that’s fine.** | If you prefer to download the files first, and simply follow along with the article, that’s fine.** |
| |
| Fichiers de projet | Fichiers du projet |
| |
| Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal | Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal |
| |
| Si vous préférez d'abord télécharger les fichiers, et simplement poursuivre l'article, c'est bien. | Si vous préférez commencer par télécharger les fichiers, et simplement suivre l'article, c'est bien aussi. |
| |
| **Setup | **Setup |
| Configuration de Hugo | Configuration de Hugo |
| |
| Vous devrez vraiment définir le type de sortie et le thème à utiliser. Cette information est la même que celle que vous trouverez dans la page projet de reveal-hugo. J'ai mis le code sur GitHub, ainsi, plutôt que de coller les lignes de code, je ferai référence au lien suivant et aux numéros de ligne correspondants. | Vous devrez en fait définir le type de sortie et le thème à utiliser. Cette information est la même que celle que vous trouverez dans la page du projet reveal-hugo. J'ai mis le code sur GitHub ; ainsi, plutôt que de coller les lignes de code, je ferai référence au lien suivant et aux numéros de ligne correspondants. |
| |
| Fichier : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml | Fichier : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml |
| File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True | File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True |
| |
| Dans ce fichier, je remplace « ---- » par « +++ » (pour passer à un « frontmatter » TOML), puis j'enlève le draft = true et paramètre le format de sortie. | Dans ce fichier, je remplace « --- » par « +++ » (pour passer à un « frontmatter » TOML), puis j'enlève le draft = true et paramètre le format de sortie. |
| |
| Une fois les deux étapes ci-dessus réalisées, vous pouvez créer votre premier fichier : | Une fois les deux étapes ci-dessus réalisées, vous pouvez créer votre premier fichier : |
| hugo new _index.md | hugo new _index.md |
| |
| Ceci créera un fichier sous content/_index.md. Dans la plupart des cas, ce fichier contiendra toute votre présentation. Si vous préférez la découper, vous aurez à regarder la documentation du projet pour les détails. | Cela créera un fichier sous content/_index.md. Dans la plupart des cas, ce fichier contiendra toute votre présentation. Si vous préférez la découper, vous devrez regarder la documentation du projet pour les détails. |
| |
| **Image shortcode | **Image shortcode |
| Shortcode des images | Shortcode des images |
| |
| Je préfère mettre à l'échelle mes images directement dans le Markdown, plutôt que les redimensionner à la main. Pour ce faire, j'ai édité un exemple officiel de la page de traitement des images d'Hugo pour les présentations. | Je préfère mettre à l'échelle mes images directement dans le Markdown, plutôt que de les redimensionner à la main. Pour ce faire, j'ai édité un exemple officiel de la page de traitement des images d'Hugo pour les présentations. |
| |
| File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html | File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html |
| ~~~ - Commence/termine un fragment de code. Vous pouvez fournir un langage de programmation sur la même ligne que votre « ~~~ » d'ouverture (exemple : « ~~~python ») | ~~~ - Commence/termine un fragment de code. Vous pouvez fournir un langage de programmation sur la même ligne que votre « ~~~ » d'ouverture (exemple : « ~~~python ») |
| |
| Pour tous ceux qui se demandent quelle est la différence entre « {{%%}} » and « {{<>}} » - le symbole du pourcentage signifie que le markdown contenu dansn le shortcode sera compilé et le caractère plus petit/plus grand indique que le texte à l'intérieur n'est que du texte. | Pour tous ceux qui se demandent quelle est la différence entre « {{%%}} » and « {{<>}} » - le symbole du pourcentage signifie que le markdown contenu dans le shortcode sera compilé et le caractère plus petit/plus grand indique que le texte à l'intérieur n'est que du texte. |
| |
| **Running the slideshow | **Running the slideshow |
| Lancement de la présentation | Lancement de la présentation |
| |
| Ouvrez simplement une console, changez de répertoire pour celui où est votre projet hugo et lancez hugo serve. Ceci lancera le site d'hugo à http://localhost:1313 (par défaut, au minimum). Vous pouvez aussi construire le HTML directement avec hugo build si vous voulez que les fichiers soient hébergés quelque part. Gardez en tête que la construction du HTML et son ouverture dans un navigateur désactivera certaines fonctionnalités (telles que les notes du présentateur). | Ouvrez simplement une console, changez de répertoire pour celui de votre projet hugo et lancez hugo serve. Ceci lancera le site d'hugo à http://localhost:1313 (par défaut, du moins). Vous pouvez aussi construire le HTML directement avec hugo build si vous voulez que les fichiers soient hébergés quelque part. Gardez en tête que la construction du HTML et son ouverture dans un navigateur désactivera certaines fonctionnalités (telles que les notes du présentateur). |
| |
| **Speaker notes | **Speaker notes |
| Notes du présentateur | Notes du présentateur |
| |
| Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l'auditoire. Vous pouvez aussi faire ça en utilisant le shorcode pour les notes (Voir la section Syntaxe). Pour ouvrir la vue du présentateur, appuyez simplement sur la touche « s » de votre clavier une fois que la présentation a démarré. Ceci ouvrira une nouvelle fenêtre qui vous affiche la vue du présentateur. Je vous recommande de le faire au début de la présentation et de la déplacer sur votre écran, en laissant la présentation normale sur le projecteur. | Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l'auditoire. Vous pouvez aussi faire ça en utilisant le shorcode pour les notes (Voir la section Syntaxe). Pour ouvrir la vue du présentateur, appuyez simplement sur la touche « s » de votre clavier une fois que la présentation a démarré. Cela ouvrira une nouvelle fenêtre qui vous affiche la vue du présentateur. Je vous recommande de le faire au début de la présentation et de la déplacer sur votre écran, en laissant la présentation normale sur le projecteur. |
| |
| **Sharing your presentation | **Sharing your presentation |
| Partager votre présentation | Partager votre présentation |
| |
| Une fois la présentation faite, vous pourriez vouloir rendre disponible la présentation pour que chacun la regarde, ou l'envoyer à votre auditoire. Bien que vous puissiez partager le code source, rien n'est plus pratique qu'un PDF. Pour créer un PDF des diapos, vous pouvez visiter http://localhost:1313/?print-pdf - ceci active une feuille de style spéciale pour l'impression. Après cela, imprimez simplement la page à partir de votre navigateur et choisissez l'imprimante PDF (ou sauvegardez en PDF). Un exemple peut être trouvé ici : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf | Une fois la présentation faite, vous pourriez vouloir rendre disponible la présentation pour que chacun la regarde, ou l'envoyer à votre auditoire. Bien que vous puissiez partager le code source, rien n'est plus pratique qu'un PDF. Pour créer un PDF des diapos, vous pouvez visiter http://localhost:1313/?print-pdf - cela active une feuille de style spéciale pour l'impression. Après cela, imprimez la page à partir de votre navigateur et choisissez l'imprimante PDF (ou sauvegardez en PDF). Un exemple peut être trouvé ici : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf |
| |
| **Conclusion | **Conclusion |
