For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
Take a look inside the [`exampleSite`](https://github.com/nodejh/hugo-theme-cactus-plus/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml).
To use it, copy the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change strings as you like to customize your website.
For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
## Example Site
## Example Site
There is an example site with config file and markdown files in [`exampleSite`](https://github.com/nodejh/hugo-theme-cactus-plus/tree/master/exampleSite) directory.
## Posts Summary
## The config file
Summary will show follow the post title title in home page.
Take a look inside the [`exampleSite`](https://github.com/nodejh/hugo-theme-cactus-plus/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml).
And if you want to use description property that in post's fromt matter to instated of post's content summary, set `useDescriptionReplaceSummary = true`.
To use it, copy the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change strings as you like to customize your website.
To use the content summary, you may add the `<!--more-->` summary divider where you want to split the article alternatively. For org content, use # more where you want to split the article. Content that comes before the summary divider will be used as that content’s summary.By default, Hugo automatically takes the first 70 words of your content as its summary. See also [https://gohugo.io/content-management/summaries/](https://gohugo.io/content-management/summaries/).
## About page
## About page
Use the about page to introduce yourself to your visitors. You can customize the content as you like in the `/content/about/_index.md`.
Use the about page to introduce yourself to your visitors. You can customize the content as you like in the `/content/about/_index.md`.
## Tags page
Use the tags page to show all post's tags. You can create the file `/content/tags/_index.md` and set `hidden = true` so that the page does not show on your home page or other lists of pages.
For example:
```markdown
+++
date = "2015-06-20T14:02:37+02:00"
title = "Tags"
hidden = true
+++
```
## Avatar
## Avatar
Furthermore, you should replace the [avatar placeholder](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/static/images/) with a great image of yourself.
Furthermore, you should replace the [avatar placeholder](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/static/images/) with a great image of yourself.
@ -103,26 +87,6 @@ Pages can be hidden and don't appear in the post list on the homepage if you add
This theme features a comment system powered by Disqus. Just add your Disqus-shortname to the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) and set `enableDisqus = true`, then let readers respond to your blog posts.
This theme features a comment system powered by Disqus. Just add your Disqus-shortname to the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) and set `enableDisqus = true`, then let readers respond to your blog posts.
## Duoshuo
This theme features a comment system powered by Duoshuo too. Duoshuo is mainly provide for Chinese users. Just add your Duoshuo-shortname to the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) and set `enableDuoshuo = true`.
## Disable Comment
Just set both `enableDisqus = false` and `enableDuoshuo = false` if you want to disable comment.
## Google Analytics
This theme use Google Analytics by default. If you want to disable Google Analytics, just set `enableGoogleAnalytics = false` in [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml).
## Baidu Tongji
This theme alse features Baidu Tongji for Chinese users. To use Baidu Tongji you should set `enableBaiduAnalytics = true` and set `baiduAnalytics` to your `Baidu Tongji Code` which looks like `39843ea392201290bd6f76173d2e0000` in [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml).
## Social link icons
## Social link icons
You can add a social link panel in the footer by adding entries to the `social` block in the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml). You can choose between two icon fonts:
You can add a social link panel in the footer by adding entries to the `social` block in the [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml). You can choose between two icon fonts:
@ -144,14 +108,6 @@ $ hugo server
Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
## License
## License
This theme is released under the MIT license. For more information read the [license](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/LICENSE.md).
This theme is released under the MIT license. For more information read the [license](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/LICENSE.md).
该主题默认使用了 Google Analytics。如果要禁用 Google Analytics，只需要设置 [`config.toml`](https://github.com/nodejh/hugo-theme-cactus-plus/blob/master/exampleSite/config.toml) 中的 `enableGoogleAnalytics = false`。
description: This tutorial will show you how to create a simple theme in Hugo.
description: This tutorial will show you how to create a simple theme in Hugo.
weight: 10
weight: 10
---
---
### **Introduction**
### **Introduction**
This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.
This tutorial will show you how to create a simple theme in Hugo.
<!--more-->
I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.
We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.
We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.
Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there.
Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output.
<!--more-->
Hugo keeps all static content under `static`. You should therefore move it all there.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ullam earum dolorum! Sed, perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
***
### Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dicta corporis ad inventore itaque impedit dolor atque amet exercitationem! Veniam qui voluptas maiores vel laudantium necessitatibus, velit ducimus! Iste hic facere, accusamus fugiat enim facilis.
nodejh
7 years ago