This theme isn't maintained anymore. Please use https://github.com/loikein/hugo-tufte, note that it is has been modified quite a bit but at least it is up to date.
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. It supports mathematical typesetting via katex or MathJax. By utilizing copious partial templates the theme is largely customizable.
This is a fork of the original hugo-tufte.
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:
# this code is shell-agnostic, and should work in cmd, powershell, bash, zsh....
hugo new site <your-site-name> # create your new site with hugo in your pwd
cd <your-site-name>\themes\ # cd into the themes directory
git clone <this-git-repo> # HTTPS link @ the top of the page if you've never done this beforeAdd theme = 'hugo-tufte' to your config.toml to let your site know to actually use this theme, specifically.
Then run hugo server -D and open up localhost:1313/ or wherever it says in Firefox.
Katex or MathJax renders LaTeX written inside of markdown files. LaTeX can be written more or less as normal. Some examples:
- This
$\frac{1}{2}$will be rendered inline. - A simple displayed equation:
$$f(x, y) := e^{x^2 - y^2}.$$
There currently seems to be some weirdness with other environments,
such as the aligned environment (align* is not supported by katex). These environments will render provided
they are wrapped in <p> tags and blank lines. The snippet below should
render correctly.
Let $G$ be a finite group with exponent $2$. Then every element is
an involution, hence for any $x$, $y$ in $G$ we have:
<p>
\begin{aligned}
e &= (xy)^2 \\
&=xyxy \implies \\
y^{-1} &= xyx \implies \\
y^{-1}x^{-1} &= xy,
\end{aligned}
</p>
establishing that $G$ is abelian.The site specific parameters that this theme recognizes are:
subtitlestring: This is displayed under the main title.showPoweredByboolean: if true, display a shoutout to Hugo and this theme.copyrightHolderstring: Inserts the value in the default copyright notice.copyrightstring: Custom copyright notice.mathboolean: Site wide kill switch for Latex supportkatexboolean: if "katex" is set to true katex will be used to render LaTex, if not MathJax will be used instead. (Set totrueby default)codeBlocksDarkboolean: if true, code blocks will use a dark theme.
Socials
You can add links to your social media profile by using thoses parameters:
github: stringgitlab: stringtwitter: stringpatreon: stringyoutube: stringmedium: stringreddit: stringstackoverflow: stringinstagram: stringmastodon: stringorcid: stringgoogle_scholar: string
Please see exampleSite/config.toml to see the full implementation with exemples.
hideDateboolean: if true, do not display a page date. Whenmetais set to true,hideDatetakes greater precedence.hideReadTimeboolean: if true, do not display the page's reading time estimate. Whenmetais set to true,hideReadTimetakes greater precedence.mathboolean: if true, try to render the page's LaTeX code using MatheJax.metaboolean: if true, display page metadata such as author, date, categories provided these page parameters exist and are not overridden. Content in the/postdirectory, (i.e., pages of type "post") ignore this parameter.tocboolean: if true, display the table of contents for the page.
This theme provides the following shortcodes in an attempt to completely support all the features present in the Tufte-css project.
-
blockquote- Description: Wrap text in a blockquote and insert optional
citeorfootermetadata. - Usage: Accepts the named parameters
citeandfooter. - Example:
{{< blockquote cite="www.shawnohare.com" footer="Shawn" >}} There is nothing more beautiful than an elegant mathematical proof. {{< /blockquote >}} - Description: Wrap text in a blockquote and insert optional
-
div- Description: This shortcode is provided as a work-around for wrapping complex blocks of markdown in div tags. The wrapped text can include other shortcodes
- Usage: Identical to the
sectionshortcode. Accepts the style parametersclassandid. If only the positional argument"end"is passed, a closing tag will be inserted. - Example:
{{< div class="my-class" >}}inserts a<div class="my-class">tag, while{{<div "end" >}}inserts the closing</div>tag.
-
epigraph- Description: Create an epigraph with the wrapped text.
- Usage: To include a footer with source attribution, pass in the
optional named parameters
pre,cite,post,link. These parameters make no styling assumptions, so spacing is important. A more compactly styled epigraph will be used if thetypeparameter is set tocompact. - Example:
{{< epigraph pre="Author Writer, " cite="Math is Fun" link='https://www.google.com' >}} This is an example of an epigraph with some math $ \mathbb N \subseteq \mathbb R $ to start the beginning of a section. {{< /epigraph >}} -
marginnote- Description: Wrap text to produce a numberless margin note.
- Usage:
{{< marginnote >}}...{{< /marginnote >}} - Example:
{{< marginnote >}}Some marginnote{{< /marginnote>}} -
section- Description: This shortcode is provided as a work-around for wrapping complex blocks of markdown in section tags. The wrapped text can include other shortcodes
- Usage: Accepts the style parameters
classandid. If only the positional argument"end"is passed, a closing tag will be inserted. - Example:
{{< section class="my-class" >}}inserts a<section class="my-class">tag, while{{<section "end" >}}inserts the closing</section>tag.
-
sidenote- Description: Wrap text to produce an automatically numbered sidenote.
- Usage: identical to
marginnote{{< sidenote >}}...{{< /sidenote >}} - Example:
{{< sidenote >}}Some sidenote{{< /sidenote >}}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent