## 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).