5.2 KiB
Tufte Hugo Theme
History of this project
Hugo-Tufte is a minimalist blog-like theme for the static site generator Hugo that attempts to be a faithful implementation of the Tufte-css project. The current version supports mathematical typesetting via KaTeX.
- The original repo: shawnohare/hugo-tufte
- Second repo: slashformotion/hugo-tufte
- This (loikein/hugo-tufte) is now the de facto third repo although my original intension was only to make a few tweaks.
Quickstart
Prerequisite: Hugo Extended
You'll need to install Hugo Extended for this theme to test it locally, since this theme uses SCSS.
- On Windows:
- Using Chocolatey:
choco install hugo-extended # remember, you might need admin privs
- Using Chocolatey:
- On macOS:
- Using Homebrew:
brew install hugo
- Using Homebrew:
Check out the example site
git clone https://github.com/loikein/hugo-tufte.git
cd hugo-tufte/exampleSite
hugo server --buildDrafts --disableFastRender
Then open localhost:1313
or wherever it says in browser.
The showcase posts are:
The big old test page
Tufte CSS
For a new site
hugo new site <your-site-name>
cd <your-site-name>/themes/
git clone https://github.com/loikein/hugo-tufte.git
Add theme: 'hugo-tufte'
to your config.yaml
to let your site know to actually use this theme, specifically.
Then run hugo server --buildDrafts --disableFastRender
and open localhost:1313
or wherever it says in browser.
Features
Math
In this version, I use Yihui Xie's method to support (almost) seamless LaTeX rendering with KaTeX.
For usage and examples, refer to ./exampleSite/content/posts/tufte-features.md .
Downside: LaTeX in post title is no longer supported.
Site Parameters
params
for this theme are:
subtitle
string: If set, displayed under the main title.showPoweredBy
boolean: Iftrue
, display a shoutout to Hugo and this theme.copyrightHolder
string: Inserts the value in the default copyright notice.copyright
string: Custom copyright notice.math
boolean: Site wide kill switch for Latex supportcodeBlocksDark
boolean: Iftrue
, code blocks will use a dark theme.marginNoteInd
string: (NEW) Custom indicator for margin notes, with suggestions in comment. (Only displayed on mobile devices or insidecols
shortcode.)sansSubtitle
boolean: Iftrue
, all subtitles (h2
&h3
) will use up-right and sans-serif font. (As seen in Visual Display of Quantitative Information.)- (
centerArticle
boolean: Not implemented yet)
Socials
(The followings have not been tested for this repo, use at your own risk.)
You can add links to your social media profile by using thoses parameters:
github
: stringgitlab
: stringtwitter
: stringlinkedin
: stringpatreon
: stringyoutube
: stringmedium
: stringreddit
: stringstackoverflow
: stringinstagram
: stringmastodon
: stringorcid
: stringgoogle_scholar
: string
Please see exampleSite/config.yaml
to see the full implementation with exemples.
Page Parameters
math
boolean: Iftrue
, try to render the page's LaTeX code using KaTeX.meta
boolean: Iftrue
, display page metadata such as author, date, categories.hideDate
boolean: Iftrue
, do not display a page date in metadata.hideReadTime
boolean: iftrue
, do not display the page's reading time estimate in metadata.
toc
boolean: if true, display the table of contents for the page.- Layout parameters: (NEW)
- For more information, see Hugo's Lookup Order | Hugo.
type
string: If set tobook
, layout files in ./layouts/book/ will be prioritised.layout
string: If set, layout files with the name of this field's value will be prioritised.
Shortcodes
This theme provides the following shortcodes in an attempt to completely support all the features present in the Tufte-css project.
For usage and examples, refer to ./exampleSite/content/posts/tufte-features.md .
blockquote
div
epigraph
marginnote
sidenote