presentazione-pass/themes/reveal-hugo/exampleSite/content/logo-example/_index.md

+++ title = "Logo presentation example" outputs = ["Reveal"] [logo] src = "github-logo.png" alt = "GitHub logo with Octocat" [reveal_hugo] custom_theme = "reveal-hugo/themes/robot-lung.css" margin = 0.2 +++

logo-example

This presentation shows how to add a logo to each slide, like the GitHub one you see above.

You can generalize the concept to add any additional markup to your presentations.

---

See the code for this presentation

---

First, create a partial called body.html and put it in this directory:

layouts/partials/{section}/reveal-hugo/body.html

---

Substitute {section} for home if you are adding a logo to the presentation at content/_index.md. Otherwise, substitute the name of the Hugo section where your presentation lives.

---

The presentation you're looking at right now is in content/logo-example, so the partial to add the logo lives in:

layouts/partials/logo-example/reveal-hugo/body.html

---

💡 Tip: to make the logo appear in every presentation, put it here:

layouts/partials/reveal-hugo/body.html

---

💡 Tip: In addition to body.html, you can create partials head.html and end.html in any of those directories.

---

• head.html: Add markup just before the closing </head> tag
• body.html: Add markup just before the closing </body> tag
• end.html: Add markup just before the closing of the Reveal.js div.slides container

---

Once the partial exists in body.html, we can add our image tag to it:

<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">

---

In this example, the src and alt attributes are set to values from the content's front matter or site's configuration, which you can see in logo-example/_index.md:

[logo]
src = "/images/github-logo.png"
alt = "GitHub logo with Octocat"

---

To position the logo, we can add a style tag to body.html:

<style>
  #logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 250px;
  }
</style>

💡 Depending on the theme you're using, your styles will be different.
You may also prefer to put your CSS in an external file or your Reveal.js theme.

---

🤗

That's it.

Happy Hugo-ing!