Skip to content

Customization

Jump to bottom
Rise edited this page Feb 1, 2023 · 29 revisions

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

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.

$color-accent: #1976d2;

Then re-generate the website.

You can see the new color scheme now.

Customize sidebar

The items in the sidebar should be added manully. Here is an example of appeding "Categories" and "Tags" to the sidebar:

[[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":

[params]
cloudflareToken = "your cloudflare web analytics token"

Add Google Analytics

Please add this line to your site's "config.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":

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.

Add your site, e.g. risehere.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:

[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:

[params]
favicon = "Your Favicon Address"

About Highlight

Highlighting is implemented by Hugo. Though it is not a part of this theme, but I'll still provide some useful information for Hugo beginners.

Here is an example configuration of highlighting in config.toml:

[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4

Available highlighting styles are listed here.

For more details, please visit Hugo documentation.

Clone this wiki locally