zhengzangw/hugo-theme-ztyblog

This Hugo theme provides many functions which can help you build a well-organized personal site.

ZTY-Blog Theme

General inforamtions

This theme was highly inspired by the doowzs.com. This theme provides many functions which can help you build a well-organized personal site.

Demo under building. You can see this site for a referrence.

Features

We provide specific rendering for following modules, for each you can find examples in archetypes:

• Blog: This is the place where you can organize your posts in timeline.

  • group by month
  • banner: constume banners and preview image can be customed
  • comments: you can enable comments with disquz
  • math render: you can open or close katex render in global as well as in specific post

• Notes: This is the place where you can organize your notes for class.

  • group by lessons
  • sidebar: a sidebar listing all your notes
  • print all: one button to print all your notes for one lesson

• Slides/Resources: This is the place where you can post your md-slides with remarkjs and other resources

  • remarkjs auto-rendered with qrcode
  • add other resources such as .pptx and .pdf to the list

• Bangumi: This is the place where you can share your watched bangumi with others

  • group by year/seaon

• Friends: you can add your friend links here

• About: you can add your infomation here

• Search: search the whole site

• Portal: a portal for your favourite links

How to start

You can download the theme manually by going to https://github.com/zhengzangw/hugo-theme-ztyblog and pasting it to themes/ztyblog in your root directory.

You can also clone it directly to your Hugo folder:

$ git clone https://github.com/zhengzangw/hugo-theme-ztyblog

If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:

$ git submodule add https://github.com/zhengzangw/hugo-theme-ztyblog themes/ztyblog

Favicon

Use RealFaviconGenerator to generate these files, put them into your site's static/icons:

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png
• favicon-32x32.png
• favicon.ico
• mstile-150x150.png
• safari-pinned-tab.svg
• site.webmanifest

How to configure

The theme doesn't require any advanced configuration. You can refer to the file config.toml.example.

If you choose CDN for third-part function, which is recommended, you only need to set useCDN=true in your setting. Otherwise, you have to run npm install and use ./load to add dependency.

To auto generate information of git commit, add following line to your deploy.sh

gsed -i "/localcommithash/c \\\tlocalcommithash = \"$(git rev-parse HEAD)\"" config.toml
gsed -i "/localcommitdate/c \\\tlocalcommitdate = \"$(git log --pretty=format:"%cd" $(git rev-parse HEAD) -1)\"" config.toml
gsed -i "/localcommitcomment/c \\\tlocalcommitcomment = \"$(git log --pretty=format:"%s" $(git rev-parse HEAD) -1)\"" config.toml
cd public
gsed -i "/binarycommitdate/c \\\tbinarycommitdate = \"$(git log --pretty=format:"%cd" $(git rev-parse HEAD) -1)\"" ../config.toml
cd ..

Available Social Icons

• email
• github

If you need another one, just open an issue or create a pull request with your wished icon. :)

How to contribute

If you spot any bugs, please use Issue Tracker or if you want to add a new feature directly please create a new Pull Request.

Third Party

• Animate.css, MIT License
• Bootstrap 4, MIT License
• Bootswatch, MIT License
• Fuse.js, Apache License
• Iconfont, Iconfont 法律声明
• jQuery, jQuery License
• KaTeX, MIT License
• Leonsans, MIT License
• Mark.js, MIT License
• Normalize.css, MIT License
• qrcode.js, MIT License
• Remark, MIT License

License

The theme is released under the MIT License.

hugo-theme-ztyblog's Issues

hugo serve启动错误

当我执行hugo serve后出现如下错误：
Error: Error building site: TOCSS: failed to transform "sass/main.scss" (text/x-scss): resource "scss/sass/main.scss_c7d65b6eceb0fea0354886e96cfa417e" not found in file cache

请问我该如何解决？

typo and suggestion on useCDN in config

hugo-theme-ztyblog/config.toml.example

Line 84 in fa2e182

useCDN = true # whether use CDN for css/js, true Recommended, if not, use npm and ./load.js to add static file

It should be ./load.sh instead of ./load.js.

Meanwhile, the whole process seems to be:

cd themes/ztyblog
npm install
npm i fuse.js
npm i mark.js
./load.sh

Though it is quite easy, I hope these lines may help someone.

Refactor the config file

#6 and #9 requires more features and more parameters to be put in the config file.

This requires a config file that is easier to maintain.

• Some variables are not compatible with the Hugo document (e.g. Site.Author).
• Divide variables into different sections for a better readability.
• The config file should be put in config.suffix.example, not in readme.md.

Structured Display for Notes

Format Note's Front Matter.

table rendered incorrectly

Tables in markdown such as:

A|B|C
|:---:|:---:|---
A1|B1|C1

A	B	C
A1	B1	C1

is rendered to be:

<table>
<thead>
<tr>
<th align="center">A</th>
<th align="center">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">A1</td>
<td align="center">B1</td>
<td>C1</td>
</tr>
</tbody>
</table>

However, although both the markdown and html seems to be all right above, they don't appear to be right in hugo. Actually, they look like this:

May be it's because that align="center" has been abandoned.

KaTeX fonts not included

The included KaTeX library is not complete. Suggestions:

1. Include all files needed, or
2. Use a CDN.

Considering that users may host their blog on GitHub Pages, using CDN would be better.

Hugo markdown generator cannot support deep nested list

Nested list with two space indent more than 3 will be rendered flattened .

Does this theme support banner?

such as the examlpe as here: gohugo.io

missing images/boat.jpg

It seems that boat.jpg which is used in the homepage is not contained in the theme.

Some KaTeX funciton not supported

Below Functions may not be supported

• change line by \\

Now you can change line by \newline or \\\\

More choice for style of image on first page

More choices for style on first page

• no style
• different colors

Printer media support with notes(docs) section

Make notes(docs) pages printer-friendly by using @media(print) in plain SCSS, or d-print in Bootstrap to control the layout of pages when being printed.

Examples are available at https://doowzs.com/docs/.

How to use the template "friends/" ?

I used the command hugo new friends/ and fetched the _index.md as below:

+++
title = "Friend's Links"
+++

Example
[[friends]]
    name = "Fancy Pei"
    icon = "fancypei.jpg"
    url = "https://fancypei.github.io"

However, I got the page without being rendered as shown below:(I know how to set time correctly already)

I'm new to hugo (though I used to use Jekyll and Hexo), so I'm quite curious about how to use the templates correctly.

Thanks anyway.

KaTeX incompatible with goldmark

In current Hugo version, goldmark cannot correctly render '_' in math environment.

See Hugo Issue #6544

suggestions on more paras

1. It's better to be able to add a url on the copyright in order to meet the standard of ICP Accreditation;
2. Is it possible to not to show the git commit icon when enableGitInfo=false?
   3. How can I link one of the menu to a absoluteURL?(just set url to a absoluteURL!)
3. How can I specify the navbar-brand?

Thanks again!