Hugo theme - Susan.
Here are some screen shots.
- Responsive full image carousel (Responsive text layout on it should be improved)
- Suited for blogging and personal webpages with static profile image (avatar) and website image (faviconfile)
- Smooth scroll && hierarchical TOC Scrollspy for content (h1~h4)
- Syntax highlighting with highlightjs
- Katex for Latex
- Google Analytics
- Font Awesome 3.1.0
- Built-in Tags, Series and Categories && show recomendations of the section in the sidebar
- Built-in pagination for sections
- Previous/Next post button
- Post card list with summary (with/without an intro picture) && Series card list in the sidebar
Most features are optional and can be individually enabled/disabled in your
From the root of your Hugo site, clone the theme into
themes/Susan by running:
# Clone theme into the themes/Susan directory $ git clone https://github.com/seuite/susan-hugo-theme.git themes/Susan
Please see the sample
config.toml. The theme is built on Hugo v0.46.
If you use this as a theme of your project website (not the root directory),make sure not to use a forward slash
/ in the beginning of a
PATH in your
img in your post head and
url in your data direcotory, because Hugo will turn it into a relative URL and the
absURL function will have no effect.
Set two params in
slidesDirPath sets the directory path for hugo server to search.
slidesDirPathURL sets the rel url for the images.
Here are simple examples for quick start.
# if you want to use images in the theme (defult in the theme) slidesDirPath = "themes/Susan/static/img/header-slides" slidesDirPathURL = "img/header-slides" # if you want to use images in static/img/header-slides slidesDirPath = "static/img/header-slides" slidesDirPathURL = "img/header-slides"
Post Intro Picture
List the image path in the
YAML head of the post. For example:
--- date: "2018-08-13T00:14:19+08:00" publishdate: "2018-08-13+08:00" lastmod: "2018-08-13+08:00" draft: false title: "This is an example" tags: ["css", "blog"] series: ["Example"] categories: ["Sci"] img: "images/blog/2018-08/test5.jpg" toc: true summary: "This is an example of adding an intro picture to the post. " ---
There are three ways to add summary to each post.
By default, Hugo automatically takes the first 70 words of your content as its summary and stores it into the
.Summarypage variable for use. It is much easier with no additional work, but it might not the one you want.
If Chinese/Japanese/Korean (CJK) languages are in the content, set
config.toml, so that Hugo could auto detect CJK languages to make
.WordCountbehave correctly. See here
The length of text to show in a
.Summarycould be set as
config.toml. See here
Alternatively, you may add the <!--more--> summary divider where you want to split the article. Content that comes before the summary divider will be used as that content’s summary and stored in the
.Summarypage variable with all HTML formatting intact. The only extra work is add the <!--more--> summary divider.
You may want a specific summary for the post other than the front sentences of the content. In this case, you could but summary in the yaml head of the post with the param name
Series Intro Picture
By default, the series recommendation card list in the sidebar use
themes/Susan/static/img/default.png as intro picture. You can set
name of the series should be in lower capitals. If the series cannot be found in
default.png will be used.
Here is an example of
[[series]] name = "review repo" img = "images/blog/2018-08/test3.jpg" summary = "This is the place I write reviews" [[series]] name = "blog diary" img = "images/blog/2018-08/test5.jpg" summary = "How I build up my personal website"