3.9 KiB
Cupper
An accessibility-friendly Hugo theme, ported from the original Cupper project.
Table of contents
- Demo
- Minimum Hugo version
- Installation
- Updating
- Run example site
- Configuration
- Logo
- Favicons
- Shortcodes
- Syntax highlighting
- Disable toc for a blog post
- Localization
- Custom CSS and JS
- Getting help
- Credits
Demo
https://cupper-hugo-theme.netlify.com/
Minimum Hugo version
Hugo version 0.60.1 or higher is required. View the Hugo releases and download the binary for your OS.
Installation
From the root of your site:
git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme
Updating
From the root of your site:
git submodule update --remote --merge
Run example site
From the root of themes/cupper-hugo-theme/exampleSite:
hugo server --themesDir ../..
Configuration
Copy config.yaml from the exampleSite, then edit as desired.
Logo
Place your SVG logo at static/images/logo.svg. If you don't provide a logo, then the default theme logo will be used.
Favicons
Upload your image to RealFaviconGenerator then copy-paste the generated favicon files under static.
Shortcodes
See the full list of supported shortcodes.
Syntax highlighting
Syntax highlighting is provided by Prism. See this markdown code fences example.
Disable toc for a blog post
Blog posts that have two or more subheadings (<h2>s) automatically get a table of contents. To disable this set toc to false. For example:
---
title: "My page with a few headings"
toc: false
---
Localization
The strings in the templates of this theme can be localized. Make a copy of <THEME_BASE_FOLDER>/i18n/en.yaml to <YOUR_SITE_FOLDER>/i18n/<YOUR_SITE_LANGUAGE>.yaml, and translate one by one, changing the translation field.
Here is a tutorial that goes more in depth about this.
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 css/custom_01.css.
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 js/custom_01.js.
See the example site config file for sample usage.
Getting help
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.
Credits
Thank you to Heydon Pickering and The Paciello Group for creating the original Cupper project.