```
### Custom CSS
```toml
[params.assets]
css = ["css/font.css", "css/color.css", "css/layout.scss"] # *.css/scss/sass
```
On user-side:
```
.
└── assets
└── css
├── color.css
└── font.css
```
`color.css` and `font.css` will be bundled into `core.css`.
_Note:_ You can use Hugo templating in these CSS assets.
### Custom JS
```toml
[params.assets]
js = ["js/font.js", "js/color.js"]
```
On user-side:
```
.
└── assets
└── js
├── color.js
└── font.js
```
`color.js` and `font.js` will be bundled into `core.js`.
### Custom header right items
Create an user-side partial: `navigation-items.html`
```
.
└── layouts
└── partials
└── navigation-items.html
```
An example navigation-items.html:
```html
{{- $nav := . -}}
{{- if or $nav.showCategories $nav.showTags $nav.custom -}}
{{- end -}}
```
Or, you can rewrite it:
```html
About Github
```
`iconfont`, `icon-*` classes are my custom CSS.
### `plist` shortcode
Syntax:
```md
{{< plist
"key1: value1"
"key2: value2"
"key3: value3"
...
"keyN: valueN"
>}}
```
Example:
```md
- `text-align`
```css
.box {
text-align: center;
}
```
Definition and Usage
The `text-align` property specifies the horizontal alignment of text in an element.
{{< plist
"Default value: `left` if direction is ltr, and `right` if direction is rtl"
"Inherited: yes"
"Animatable: no. Read about animatable"
"Version: CSS1"
"JavaScript syntax: `object.style.textAlign=\"right\"`"
>}}
```
### Custom article cover
Set `01.png` as cover, example:
```toml
+++
title = "..."
cover = "01.png"
+++
```
### Display author profile at article bottom
Global settings, Edit `config.toml`
```toml
[params.profile]
enable = true
avatar = "/img/avatar.jpg"
name = "XXX"
bio = "XXX" # support markdown syntax
twitter = "XXX" # https://twitter.com/XXX
github = "XXX" # https://github.com/XXX
docker = "XXX" # https://hub.docker.com/u/XXX
email = "XXX@mail.com" # mailto:XXX@mail.com
```
Or page-by-page, on front matter:
```toml
+++
title = "..."
date = 2020-05-01T22:20:36+08:00
[profile]
enable = true
avatar = "/img/avatar.jpg"
name = "XXX"
bio = "XXX" # support markdown syntax
twitter = "XXX" # https://twitter.com/XXX
github = "XXX" # https://github.com/XXX
docker = "XXX" # https://hub.docker.com/u/XXX
email = "XXX@mail.com" # mailto:XXX@mail.com
+++
```
### Set robots meta tag
In the front matter of any page, you can selectively enable the `robots` meta tag
and define its content:
```toml
robots = "noindex,nofollow"
```
If `noindex` is included, that page will also be hidden in `sitemap.xml`.
## Thanks
- [**Hugo**](https://gohugo.io/)
- [**HighlightJS**](https://highlightjs.org/)
- [**PrismJS**](https://prismjs.com/)
- [**MathJax**](https://www.mathjax.org/)
- [**Katex**](https://katex.org/)
- [**Disqus**](https://disqus.com/)
- Built-in Japanese language [@kofuk](https://github.com/kofuk)
## Note
For Hugo 0.62.0+ users
`` render as inline ``, like as Github's style
`` render as block ``, like as `` tag style.
