1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
# Kiera Theme for Hugo
Kiera is the theme specialized in presenting writing layout like long essay or technical writing.
## Main Features
* 4 image placements with `figure` support using shortcodes.
* Excellent code highlight support thanks to Hugo Chroma.
* Use Font Awesome for icons (Cloudflare CDN)
* Utilize normalize.css for consistent styling (Cloudflare CDN)
* Use Google Fonts: Ruda (serif) and Roboto Slab (sans-serif)
* Disqus comment loaded on demand
## Installation
Change into Hugo directory then:
```console
$ cd themes
$ git clone https://github.com/avianto/hugo-kiera.git kiera
```
More detailed instruction at [Hugo Docs](http://gohugo.io/themes/installing-and-using-themes/).
Using `git submodule` is recommended instead of `git clone` as per recommendation from [Netlify](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/#use-hugo-themes-with-netlify).
```console
$ cd themes
$ git submodule add https://github.com/avianto/hugo-kiera.git kiera
```
## Configuration
*Important*: delete or move `archetypes` folder from root unless it is necessary. Current Hugo priority lookup will look into this folder first before any other `archetypes` folder and could cause problem.
Recommended optional `config.toml`:
```toml
pygmentsCodeFences = true
disqusShortname = "" #Disqus shortname
googleAnalytics = "" #Google Analytics ID
[author]
name = "" #Author name
github = "" #Github username
gitlab = "" #Gitlab username
linkedin = "" #LinkedIn username
facebook = "" #Facebook username
twitter = "" #Twitter username
instagram = "" #Instagram username
[params]
tagline = "the tagline for this website"
```
## Main Menu
Add regular non-posts related page (eq. About page) to main menu by adding these lines to the page front matter:
TOML:
```toml
menu = "main"
meta = "false"
```
YAML:
```yml
menu: "main"
meta: "false"
```
```meta``` refers to time, categories, tags and reading time which are not necessary for this kind of page.
For posts listing page, add `_index.md` file inside `content\posts` folder with these front matter:
TOML:
+++
title = "Posts"
menu = "main"
weight = "10"
+++
```
## Categories & Tags
Both can be used, also can use only one of them or neither.
## Images
Kiera supports adding image as `img` tag with standard Markdown:
``
to wrap it with `figure` use:
`{{< figure src="/link/to/image" >}}`
The basic placement is 100% width within content and scaled accordingly in smaller screen. Recommended width for image is 600 pixels minimum.
Kiera supports different placement by adding:
* For `img`, use ``
* For `figure`, use `{{< figure src="/link/to/image" class="placement" >}}`
There are 4 configured placements
* `#full` or `class="full"` for full width.
* `#mid` or `class="mid"` for middle:
* `#float` or `class="float"` for float left:
* `#float-right` or `class="float-right"` for float right:
## Code Hightlight
Using fenced code with Chroma support.
## Font Awesome icons
For usage, refer to [Font Awesome](https://fontawesome.io).
## Disqus On Demand
Disqus comments are loaded on demand, by clicking <kbd>View Comments</kbd> button.
## Support and Pull Requests
Please use GitHub issues to file bugs. If you can help fixing bugs, optimize the theme or adding features, please do pull requests, I really love to see what others can come up with.
## TO DO
* /layout/_default/terms.html needs some works, it functions now, barely.
* Adding some user-oriented behavior using JavaScripts.
* Lazyload images.
* i18n support
|
