Hugo-WebSlides is a theme for writing beautiful WebSlides presentations in markdown with Hugo.
Features:
- Based on WebSlides.js
- Create slides with Markdown.
- Assign classes to elements without html.
- Shortcodes for components.
Future Implementation:
- More component shortcodes!
- Hugo-WebSlides rendition of original demos.
- Separate slides within the same project.
Checkout the latest demo of what you can create with this theme.
Installation of Hugo (latest version recommended)
Run from the root of your Hugo site:
$ git clone https://github.com/rcjach/hugo-webslides.git themes/hugo-webslides
Alternatively, you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well:
$ git submodule add https://github.com/rcjach/hugo-webslides.git themes/hugo-webslides
Hugo-WebSlides ships with an fully configured example site. For a quick preview:
cd exampleSite/
hugo serve --themesDir ../..
Then visit https://localhost:1313/
in your browser to view the example site.
The following config.toml
is used for the example site.
baseurl = "/"
theme = "hugo-webslides"
languageCode = "en-us"
title = "A Hugo theme for creating Webslides.js presentations"
[params]
author = "RCJacH"
homepage = "RCJacH.github.io"
[params.webslides]
banner = false
slideshow = true
vertical = false
autoslide = false
changeOnClick = false
disableLoop = false
minWheelDelta = 40
disableNavigateOnScroll = false
scrollWait = 450
slideOffset = 50
hideIndex = false
[blackfriday]
extensionsmask = ["autoHeaderIds"]
Checkout WebSlides Core-API options for an explanation of what different parameters do.
Note that some parameters is inverted in this theme, for example loop -> disableLoop, navigateOnScroll -> disableNavigateOnScroll, showIndex -> hideIndex.
For minimum work, simply copy the content folder of the exampleSite to your project, and modify the existing md files to your need.
Split slides by using horizontal ruler ---
.
Slide 1
---
Slider 2
Use HTML comment with a colon to add properties to a slide or an element.
You can assign the following properties to each slide:
- section class
- div class
- secondary div class
- background class
- background-image
- background-image-position
<!-- : sectionClass .divClass ..secondaryClass bg=backgroundClass bgimage=background-image bgpos=background-image-position -->
Multiple classes can be assigned.
<!-- : .divClass1 .divClass2 ..secondaryDivClass1 ..secondaryDivClass2 bg=backgroundClass1 bg=backgroundClass2 -->
You can assign classes to blocks as well.
### <!-- : .headerClass -->Header
<!-- : .paragraphClass -->Paragraph