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
|
## 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)
* [Add Cloudflare Web Analytics](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-cloudflare-web-analytics)
* [Add Google Analytics and Site Verification](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-google-analytics)
* [Add Google Search Box on your site](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-google-search-box-on-your-site)
* [Add Favicon](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-favicon)
* [About Highlight](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#about-highlight)
## Change color scheme
**NOTE:** The customization of color scheme **ONLY works in Hugo Extended**. Because normal Hugo cannot compile `scss` files.
> To see if your Hugo is Extended, please enter `hugo version` in command prompt, you will see `extended` in the output.
(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
**NOTE:** This customization **ONLY works in Hugo Extended**, too. The reason is [told above](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#change-color-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.**
## Add Cloudflare Web Analytics
Please add this line to your site's "config.toml":
```toml
[params]
cloudflareToken = "your cloudflare web analytics token"
```
## 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.
## Add Google Search Box on your site
Create a new custom search engine on [Google Custom Search Engine](https://cse.google.com/cse/create/new).
Add your site, e.g. `amazingrise.net/*`, then click `Create`.
You will see your search ID, as:
`https://cse.google.com/cse.js?cx=**Your Search ID**`
(If not, click modify search engine on the sidebar, then select your website.)
Finally, add it to your site's `config.toml`:
```toml
[params]
googleSearchCode = "Your Search Code"
```
If the setting is correct, you will see a Google Search box on the right side of PC view, as well as in the drawer menu in Mobile view.
If you want to remove this, just remove `googleSearchCode` from `config.toml`.
**Notice: This search box only appears in homepage.**
## Add favicon
Add it to your site's `config.toml`:
```toml
[params]
favicon = "Your Favicon Address"
```
## About Highlight
Highlight area is **generated by Hugo**, not an implementation by me. Though it is not a part of this theme, but I'll still provide some information for Hugo beginners.
Highlight is enabled by default in Hugo, with a Monokai style. To change this style, you can add some configurations in `config.toml`.
```toml
[markup]
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = "monokai"
tabWidth = 4
```
You can modify the value of `style` to your taste. Available values are listed [here](https://xyproto.github.io/splash/docs/all.html).
**NOTE:** If you have some questions about highlight, please **DO NOT post it here**. That's implemented by Hugo official, not the theme creators.
For more details, [see here](https://gohugo.io/getting-started/configuration-markup#highlight).
|
