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
|
## 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 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)
## 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.**
## 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"
```
|