This repository has been archived on 2024-06-06. You can view files and clone it, but cannot push or open issues or pull requests.
vitrine/themes/reveal-hugo/exampleSite/content/custom-theme-example/_index.md
2022-01-05 23:28:57 +01:00

75 lines
1.7 KiB
Markdown
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

+++
title = "Custom theme example presentation"
outputs = ["Reveal"]
[reveal_hugo]
custom_theme = "custom-theme.scss"
custom_theme_compile = true
+++
## 🖌
## Custom Themes
*with Hugo Pipes*
---
This presentation uses a custom Reveal.js theme written in SCSS that is compiled by Hugo, using [Hugo pipes](https://gohugo.io/hugo-pipes/).
---
Hugo pipes compiles the source code of the theme, located in `assets/custom-theme.scss`, into CSS.
---
## 😄
No separate build process is required, which means you can iterate on your theme and your content at the same time.
---
To set a custom theme and use Hugo to compile it:
```toml
[reveal_hugo]
custom_theme = "custom-theme.scss"
custom_theme_compile = true
```
`custom-theme.scss` must live in the `assets` folder.
---
To pass compilation options, use the `custom_theme_options` param:
```toml
[reveal_hugo.custom_theme_options]
targetPath = "css/custom-theme.css"
enableSourceMap = true
```
See all the [available options](https://gohugo.io/hugo-pipes/scss-sass/#options).
---
Note: to use a custom theme that doesn't need compilation, put it in the `static` directory and do not set the `custom_theme_compile` parameter. It will be served to the browser directly.
---
Write a custom Reveal.js theme in four steps:
```text
1. Import `mixins` and `settings` from the templates directory
2. Override variables and functions for colors, fonts and sizes
3. Import `theme` from the templates directory
4. Add any additional selectors to override the built CSS
```
---
See the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md) to learn what overrides are possible.
---
See `assets/custom-theme.scss` or any file in `assets/reveal-js/css/theme/source` for an example.