An accessibility-friendly Hugo theme, ported from the original Cupper project.
Table of contents
- Minimum Hugo version
- Run example site
- Syntax highlighting
- Enable Table of Contents for a Blog Post
- Custom CSS and JS
- Default to Dark Theme
- Non-Git Repo
- Getting help
Minimum Hugo version
0.81.0 or higher is required. View the Hugo releases and download the binary for your OS.
From the root of your site:
git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme
From the root of your site:
git submodule update --remote --merge
Run example site
From the root of
hugo server --themesDir ../..
config.yaml from the
exampleSite, then edit as desired.
Place your SVG logo at
static/images/logo.svg. If you don't provide a logo, then the default theme logo will be used.
Upload your image to RealFaviconGenerator then copy-paste the generated favicon files under
See the full list of supported shortcodes.
By default, only a few languages are supported. If you want to add more, follow these steps:
- Select the languages you want from https://prismjs.com/download.html
- Download the JS file, then copy it to
- Download the CSS file, then copy it to
Enable Table of Contents for a Blog Post
true. For example:
--- title: "My page with a few headings" toc: true ---
The strings in the templates of this theme can be localized. Make a copy of
<YOUR_SITE_FOLDER>/i18n/<YOUR_SITE_LANGUAGE>.yaml, and translate one by one, changing the
Custom CSS and JS
You can provide an optional list of custom CSS files, which must be placed inside the
static dir. These will load after the theme CSS loads. So,
static/css/custom_01.css translates to
You can provide an optional list of custom JS files, which must be placed inside the
static dir. These will load after the theme JS loads. So,
static/js/custom_01.js translates to
See the example site config file for sample usage.
Default to Dark Theme
In the site config file set the param
defaultDarkTheme to true.
params: defaultDarkTheme: true
Note that the default of light or dark theme only applies to the first visit to a site using this theme. Once the site is visited the choice of dark or light theme is stored in 'local storage' in the browser.
To reset to a 'first visit' scenario (e.g. for testing), one needs to either browse in private mode (aka Incognito/InPrivate/etc) or delete 'local storage' for this site. The easiest way to do that, but which affects other sites as well, is to use the 'Clear History' feature of the browser.
Check your browser's help or documentation for details.
If your site is not a git repo, then set
false in your config file.
If you run into an issue that isn't answered by this documentation or the
exampleSite, then visit the Hugo forum. The folks there are helpful and friendly. Before asking your question, be sure to read the requesting help guidelines.