Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RCJacH/hugo-webslides
This is a Hugo template to create WebSlides presentation using markdown.
https://github.com/RCJacH/hugo-webslides
Last synced: 29 days ago
JSON representation
This is a Hugo template to create WebSlides presentation using markdown.
- Host: GitHub
- URL: https://github.com/RCJacH/hugo-webslides
- Owner: RCJacH
- License: mit
- Created: 2019-08-09T08:35:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T15:48:48.000Z (almost 3 years ago)
- Last Synced: 2024-08-03T21:02:28.752Z (4 months ago)
- Language: CSS
- Homepage: https://rcjach.github.io/hugo-webslides/
- Size: 1.09 MB
- Stars: 124
- Watchers: 6
- Forks: 34
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-robotic-tooling - Hugo-Webslides - This is a Hugo template to create WebSlides presentation using markdown. (Documentation and Presentation)
- awesome-robotic-tooling - Hugo-Webslides - This is a Hugo template to create WebSlides presentation using markdown. (Documentation and Presentation)
- awesome-robotic-tooling - Hugo-Webslides - This is a Hugo template to create WebSlides presentation using markdown. (Documentation and Presentation)
README
# Hugo-WebSlides
Hugo-WebSlides is a theme for writing beautiful [WebSlides](https://webslides.tv) presentations in markdown with [Hugo](https://gohugo.io/).
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](https://webslides.tv/demos/).
- Separate slides within the same project.
## Demo
[Checkout the latest **demo**](https://rcjach.github.io/hugo-webslides) of what you can create with this theme.
# Getting Started
## Requirements
Installation of [Hugo](https://gohugo.io/) (latest version recommended)
## Get the theme
Run from the root of your Hugo site:
```sh
$ git clone https://github.com/rcjach/hugo-webslides.git themes/hugo-webslides
```
Alternatively, you can include this repository as a [git submodule](https://git-scm.com/book/de/v1/Git-Tools-Submodule). This makes it easier to update this theme if you have your Hugo site in git as well:
```sh
$ git submodule add https://github.com/rcjach/hugo-webslides.git themes/hugo-webslides
```
## Preview the theme
Hugo-WebSlides ships with an fully configured example site. For a quick preview:
```
cd exampleSite/
hugo serve --themesDir ../..
```
Then visit `http://localhost:1313/` in your browser to view the example site.
## Configuration
The following `config.toml` is used for the example site.
```toml
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](https://github.com/webslides/WebSlides/wiki/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.
## Adding content
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 `---`.
```md
Slide 1
---
Slider 2
```
## Assign properties
Use HTML comment with a colon to add properties to a slide or an element.
### Slide properties
You can assign the following properties to each slide:
- section class
- div class
- secondary div class
- background class
- background-image
- background-image-position
~~~md
~~~
Multiple classes can be assigned.
~~~md
~~~
### Block properties
You can assign classes to blocks as well.
```md
### Header
Paragraph
```