Skip to content
This is a Hugo template to create WebSlides presentation using markdown.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
theme.toml Update homepage button to link to github repo Aug 12, 2019



Hugo-WebSlides is a theme for writing beautiful WebSlides presentations in markdown with Hugo.


  • 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.

Getting Started


Installation of Hugo (latest version recommended)

Get the theme

Run from the root of your Hugo site:

$ git clone 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 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.


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"

  author = "RCJacH"
  homepage = ""

  banner = false
  slideshow = true
  vertical = false
  autoslide = false
  changeOnClick = false
  disableLoop = false
  minWheelDelta = 40
  disableNavigateOnScroll = false
  scrollWait = 450
  slideOffset = 50
  hideIndex = false

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.

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 ---.

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
<!-- : 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 -->

Block properties

You can assign classes to blocks as well.

### <!-- : .headerClass -->Header
<!-- : .paragraphClass -->Paragraph
You can’t perform that action at this time.