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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
## About Copyright
This theme is under MIT license, that means users have correspoding rights and obligations.
According to this license, you should **keep the copyright declaration of theme makers** at the footer.
Thank you for your support!
## Table of Contents
* [Change color scheme](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#change-color-scheme)
* [Change font scheme](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#change-default-font-scheme)
* [Customize sidebar](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#customize-sidebar)
* [Disable Table of Contents](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#disable-table-of-contents)
* [Disable Dark Mode](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#disable-dark-mode)
* [Add or disable comment area](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-comment-area)
* [Add Google Analytics and Site Verification](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-google-analytics)
## Change color scheme
(From *theme*'s root directory) Go to `assets/scss/journal.scss`.
And modify the color value in the first line.
```scss
$color-accent: #1976d2;
```
Then re-generate the website.
You can see the new color scheme now.
## Change default font scheme
Edit `/assets/scss/journal.scss`.
Then you can find font scheme in the first page:
```scss
$default-font-list: "Lora", "Noto Serif SC", serif;
$mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
monospace;
$sans-preferred-font-list: "Montserrat", "Roboto", "Source Sans Pro",
"Helvetica", $default-font-list;
```
And don't forget to modify `/layouts/partials/head.html`:
```html
<script>
loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Noto+Serif+SC|Material+Icons");
</script>
```
Modify your font, and don't forget to replace `Space` with `+`.
## Customize sidebar
The items in the sidebar should be added manully.
Here is an example of appeding "Categories" and "Tags" to the sidebar:
```toml
[[menu.main]]
url = "/categories"
name = "Categories"
weight = 3
[[menu.main]]
url = "/tags"
name = "Tags"
weight = 2
[[menu.main]]
url = "/posts"
name = "Archive"
weight = 1
```
Note: `weight` is the priority of each item. **The lowest the weight is, the higher the priority is.**
## Disable Table of Contents
### Globally
Add `disableToC=true` to the section of `[param]` in your `config.toml`.
Then you will not see it.
### Apply for single page
Add `disableToC: true` in the front matter of the page.
Then you will disable it in the very page.
## Disable Dark Mode
Add `disableDarkMode=true` to the section of `[param]` in your `config.toml`.
Then you will not see it.
## Enable or disable comment area
Now, this theme support these comment service:
- LiveRe
- Gitalk
- Disqus
- Valine
### Enabling
#### Gitalk
Edit your `config.toml` in the hugo website's root directory.
Add the following line to the section `[params]`
```toml
enableGitalk = true
```
Then add following lines behind:
```toml
[params.gitalk]
owner = "user"
repo = "repo name"
client_id = "your client id"
client_secret = "your client secret"
```
(Modify to suit your condition.)
Notice: Gitalk will not shown in offline preview server.(Launched by `hugo server`)
#### Disqus
Hugo originally supports Disqus, and I added the disqus to the theme.
But due to my network environment, I haven't had it tested.
To add a disqus comment service, please add a line to `config.toml` in the root directory:
```toml
disqusShortname = "Your disqus short name."
```
#### LiveRe!
Edit your `config.toml` in the hugo website's root directory.
Add the following line to the section `[params]`
```toml
livereId = "xxxx"
```
"xxxx" stands for the value of `data-uid` in your LiveRe HTML code.
#### Valine
Edit your `config.toml` in the hugo website's root directory.
Add the following line to the section `[params]`
```toml
enableValine = true
```
Then add following lines behind:
```toml
[params.valine]
appId = "Your app ID of leancloud"
appKey = "Your app key of leancloud"
avator = "avator type"
```
`avator` is optional. For details, [click here](https://valine.js.org/avatar.html).
#### Other comment service
Welcome to open an issue or Pull Request for adding a new comment service.
If I'm free then, I will add it. :P
---
### Disabling
#### Disable the comment area in one post
If you wanna to disable the comment area in a specific post, please add a line in the metadata area of the post:
```
comment : false
```
A more detailed description of the posts' meta data is [here](https://github.com/AmazingRise/hugo-theme-diary/wiki/Post's-meta-data).
#### Disable it globally
Please remove the settings item referred in "Add comment area".
The comment area will not be shown.
## Add Google Analytics
Please add this line to your site's "config.toml":
```toml
googleAnalytics = "UA-123-45"
```
UA-123-45 is your Google Analytics code. Please modify it to your own Analytics code.
## Add Google Site Verification
Please add this line to your site's "config.toml":
```toml
googleSiteVerification = "xxxx-xxxx"
```
xxxx-xxxx is your Google Site Verification code. Please modify it to your own code.
|
