issue146:c_c
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
issue146:c_c [2019/07/11 08:44] – d52fr | issue146:c_c [2019/07/12 13:59] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
**This last month I’ve been looking at the hugo-reveal theme more and more often as a method to create quick and functional slide decks using Reveal.js. Google Slides and Powerpoint/ | **This last month I’ve been looking at the hugo-reveal theme more and more often as a method to create quick and functional slide decks using Reveal.js. Google Slides and Powerpoint/ | ||
- | Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer des jeux de diapositives | + | Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer |
**Project files | **Project files | ||
Ligne 9: | Ligne 9: | ||
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.** | ||
- | Fichier de projet | + | Fichiers du projet |
Tous les fichiers du projet sont sur github. https:// | Tous les fichiers du projet sont sur github. https:// | ||
- | Si vous préférez | + | Si vous préférez |
**Setup | **Setup | ||
Ligne 29: | Ligne 29: | ||
Les quelques premières étapes pour l' | Les quelques premières étapes pour l' | ||
••Installer git | ••Installer git | ||
- | ••Installer hugo (vous avez des chances de trouver une version dans vos dépôtslocaux - autrement | + | ••Installer hugo (vous avez des chances de trouver une version dans vos dépôts locaux ; autrement, regardez |
••Lancer : hugo new site nom-de-la-présentation | ••Lancer : hugo new site nom-de-la-présentation | ||
••Ensuite, | ••Ensuite, | ||
Ligne 38: | Ligne 38: | ||
There are a few things I usually do before writing any of the slides. I’ll be covering them in the next few headings. If you’re completely satisfied with the default appearance, just do the steps in the first heading.** | There are a few things I usually do before writing any of the slides. I’ll be covering them in the next few headings. If you’re completely satisfied with the default appearance, just do the steps in the first heading.** | ||
+ | |||
+ | Commencer votre présentation | ||
+ | |||
+ | Habituellement, | ||
**Configure Hugo | **Configure Hugo | ||
Ligne 47: | Ligne 51: | ||
I also highly recommend adjusting the archetypes file so you don’t need to constantly update the preamble for your files if you decide to split the slideshow up into multiple content files.** | I also highly recommend adjusting the archetypes file so you don’t need to constantly update the preamble for your files if you decide to split the slideshow up into multiple content files.** | ||
+ | |||
+ | Configuration de Hugo | ||
+ | |||
+ | 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:// | ||
+ | lignes : 5-10 | ||
+ | |||
+ | Je vous recommande fortement d' | ||
**File: https:// | **File: https:// | ||
Ligne 57: | Ligne 70: | ||
This will create a file under content/ | This will create a file under content/ | ||
+ | |||
+ | File: https:// | ||
+ | |||
+ | Dans ce fichier, je remplace « --- » par « +++ » (pour passer à un « frontmatter » TOML), puis j' | ||
+ | |||
+ | Une fois les deux étapes ci-dessus réalisées, | ||
+ | |||
+ | hugo new _index.md | ||
+ | |||
+ | Cela créera un fichier sous content/ | ||
**Image shortcode | **Image shortcode | ||
Ligne 67: | Ligne 90: | ||
The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.** | The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.** | ||
+ | |||
+ | Shortcode des images | ||
+ | |||
+ | Je préfère mettre à l' | ||
+ | |||
+ | File: https:// | ||
+ | |||
+ | Usage: {{<image file Resize 400x >}} (notez l' | ||
+ | |||
+ | Le fichier image devra être dans le même niveau de dossier de contenu que le fichier du markdown, vous appelez le « shortcode » à partir de là. | ||
**Syntax | **Syntax | ||
Ligne 83: | Ligne 116: | ||
For anyone wondering what the difference between “{{%%}}” and “{{<> | For anyone wondering what the difference between “{{%%}}” and “{{<> | ||
+ | |||
+ | Syntaxe | ||
+ | |||
+ | hugo-reveal met quelques fonctionnalités de Reveal.js derrière des shortcodes et ils sont comme ceci : | ||
+ | |||
+ | {{% fragment %>}}Le Markdown se place ici{{% /fragment %}} - Vous permet de passer des fragments un par un (par ex., pour dévoiler une liste point par point). | ||
+ | |||
+ | {{% note %}}Le texte se place ici{{% /note %}} - Crée une note pour l' | ||
+ | |||
+ | {{% section %}}Les diapos vont ici{{% section %}} - Crée une série de diapos verticales. | ||
+ | |||
+ | --- - Commence une nouvelle diapo | ||
+ | |||
+ | ~~~ - Commence/ | ||
+ | |||
+ | Pour tous ceux qui se demandent quelle est la différence entre « {{%%}} » et « {{<> | ||
**Running the slideshow | **Running the slideshow | ||
Just open a console, cd to the directory your hugo project is in, and run hugo serve. This will run the hugo site on http:// | Just open a console, cd to the directory your hugo project is in, and run hugo serve. This will run the hugo site on http:// | ||
+ | |||
+ | Lancement de la présentation | ||
+ | |||
+ | 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:// | ||
**Speaker notes | **Speaker notes | ||
Ligne 93: | Ligne 146: | ||
You can control the slideshow from the presenter view as well, and it will be synchronized between the two views.** | You can control the slideshow from the presenter view as well, and it will be synchronized between the two views.** | ||
+ | |||
+ | Notes du présentateur | ||
+ | |||
+ | Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l' | ||
**Sharing your presentation | **Sharing your presentation | ||
After you’ve presented, you may want to put the slides up for anyone to look at, or to send it to your audience. While you can share the source code, it’s never going to be quite as convenient as a PDF. To create a PDF of the slides, you can visit http:// | After you’ve presented, you may want to put the slides up for anyone to look at, or to send it to your audience. While you can share the source code, it’s never going to be quite as convenient as a PDF. To create a PDF of the slides, you can visit http:// | ||
+ | |||
+ | 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' | ||
**Conclusion | **Conclusion | ||
Hopefully this article has adequately shown why Reveal.JS should be a valid consideration when creating code-heavy slideshows. If you have already used it, feel free to let me know about any bugs or issues you’ve run into. Also, if you have any questions or requests for new articles, feel free to reach out to me at lswest34+fcm@gmail.com. ** | Hopefully this article has adequately shown why Reveal.JS should be a valid consideration when creating code-heavy slideshows. If you have already used it, feel free to let me know about any bugs or issues you’ve run into. Also, if you have any questions or requests for new articles, feel free to reach out to me at lswest34+fcm@gmail.com. ** | ||
+ | |||
+ | Conclusion | ||
+ | |||
+ | Avec un peu de chance, cet article a suffisamment montré pourquoi Reveal.JS serait une solution valable pour créer des présentations pleines de code. Si vous l'avez déjà utilisé, n' | ||
Ligne 108: | Ligne 173: | ||
https:// | https:// | ||
+ | |||
+ | Pour aller plus loin | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// |
issue146/c_c.1562827473.txt.gz · Dernière modification : 2019/07/11 08:44 de d52fr