issue146:c_c
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
issue146:c_c [2019/07/02 11:22] – créée auntiee | 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/ |
- | Project files | + | Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer rapidement des jeux de diapositives fonctionnels en utilisant Reveal.js. Google Slides et Powerpoint ou Impress de LibreOffice (ou Keynote sur macOS) sont opérationnels, |
+ | |||
+ | **Project files | ||
All project files are on github. https:// | All project files are on github. https:// | ||
- | 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 du projet | ||
+ | |||
+ | Tous les fichiers du projet sont sur github. https:// | ||
+ | |||
+ | Si vous préférez commencer par télécharger les fichiers, et simplement suivre l' | ||
- | Setup | + | **Setup |
The first few steps to getting up and running are pretty simple: | The first few steps to getting up and running are pretty simple: | ||
Ligne 15: | Ligne 23: | ||
• Then you can do one of the following options: | • Then you can do one of the following options: | ||
• run: git init in the folder created above, followed by: git submodule add https:// | • run: git init in the folder created above, followed by: git submodule add https:// | ||
- | • Just download a zip archive from their github page (see further reading). | + | • Just download a zip archive from their github page (see further reading).** |
- | Starting your presentation | + | Paramétrage |
- | 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. | + | Les quelques premières étapes pour l' |
+ | ••Installer git | ||
+ | ••Installer hugo (vous avez des chances de trouver une version dans vos dépôts locaux ; autrement, regardez sur gohugo.io). | ||
+ | ••Lancer : hugo new site nom-de-la-présentation | ||
+ | ••Ensuite, vous pouvez prendre l'une des options suivantes : | ||
+ | ••lancer : git init dans le dossier créé ci-dessus, suivi de : git submodule add https:// | ||
+ | ••Simplement télécharger une archive zip depuis leur page github (voir Pour aller plus loin). | ||
- | Configure Hugo | + | **Starting your presentation |
+ | |||
+ | 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 | ||
You’ll need to actually define the output type and the theme to use. This is the same information as you’d find on the reveal-hugo project page. I’ve placed the code on GitHub, so instead of pasting lines of code, I will refer to the following link and the corresponding line numbers. | You’ll need to actually define the output type and the theme to use. This is the same information as you’d find on the reveal-hugo project page. I’ve placed the code on GitHub, so instead of pasting lines of code, I will refer to the following link and the corresponding line numbers. | ||
Ligne 28: | Ligne 50: | ||
lines: 5-10 | lines: 5-10 | ||
- | 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.** |
- | File: https:// | + | 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:// | ||
What I do in this file is swap out the “---” with “+++” (to switch to TOML frontmatter), | What I do in this file is swap out the “---” with “+++” (to switch to TOML frontmatter), | ||
Ligne 38: | Ligne 69: | ||
hugo new _index.md | hugo new _index.md | ||
- | This will create a file under content/ | + | This will create a file under content/ |
- | Image shortcode | + | 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 | ||
I prefer to scale my images in the Markdown itself, instead of resizing it by hand. To do this, I edited an official example from the hugo Image Processing page for slideshows. | I prefer to scale my images in the Markdown itself, instead of resizing it by hand. To do this, I edited an official example from the hugo Image Processing page for slideshows. | ||
Ligne 48: | Ligne 89: | ||
Usage: {{<image file Resize 400x >}} (note the lack of extension). | Usage: {{<image file Resize 400x >}} (note the lack of extension). | ||
- | 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.** |
- | Syntax | + | 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 | ||
Hugo-reveal puts a few of the Reveal.JS features behind shortcodes, and they are as follows: | Hugo-reveal puts a few of the Reveal.JS features behind shortcodes, and they are as follows: | ||
Ligne 64: | Ligne 115: | ||
~~~ - Start/end code fragment. You can supply a programming language on the same line as your opening “~~~” (example: “~~~python”) | ~~~ - Start/end code fragment. You can supply a programming language on the same line as your opening “~~~” (example: “~~~python”) | ||
- | For anyone wondering what the difference between “{{%%}}” and “{{<> | + | For anyone wondering what the difference between “{{%%}}” and “{{<> |
- | Running the slideshow | + | Syntaxe |
- | 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:// | + | hugo-reveal met quelques fonctionnalités de Reveal.js derrière des shortcodes et ils sont comme ceci : |
- | Speaker notes | + | {{% 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 | ||
+ | |||
+ | 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 | ||
Sometimes you want to make little notes for yourself on a slide, that aren’t visible to the audience. You can do this here as well, by using the note shortcode (see Syntax section). To open the speaker view, simply press the “s” key on your keyboard once the slideshow has started. It will open a new window and give you a presenter view. I would recommend you do this at the start of the presentation and move it to your monitor, leaving the normal slideshow on the projector. | Sometimes you want to make little notes for yourself on a slide, that aren’t visible to the audience. You can do this here as well, by using the note shortcode (see Syntax section). To open the speaker view, simply press the “s” key on your keyboard once the slideshow has started. It will open a new window and give you a presenter view. I would recommend you do this at the start of the presentation and move it to your monitor, leaving the normal slideshow on the projector. | ||
- | 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.** |
- | Sharing your presentation | + | Notes du présentateur |
- | 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:// | + | Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l' |
+ | |||
+ | **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:// | ||
+ | |||
+ | 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 | ||
+ | |||
+ | 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 | Conclusion | ||
- | Hopefully this article | + | Avec un peu de chance, cet article |
- | Further Reading | + | **Further Reading |
https:// | https:// | ||
- | https:// | + | https:// |
+ | |||
+ | Pour aller plus loin | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// |
issue146/c_c.1562059323.txt.gz · Dernière modification : 2019/07/02 11:22 de auntiee