Monochrome
Table of contents

Theme Configuration

These values are inside your toml config file.

HTML is available.

[params]
navbar_title = "Monochrome" # default: site's `title`

HTML is available.

[params]
footer = "Copyright © 2021 by kaiiiz" # default: None

Table of Contents

TOC global settings.

[params]
enable_toc = true # default: true

Collapsible Menu

Collapsible global settings.

[params]
enable_collapsible_toc = false # default: false
enable_collapsible_changelogs = false # default: false

Monochrome uses built-in menu system supported by hugo itself. (Checkout document for more deatil.) By default, the menu called navbar is used to decide which item need to be rendered on the navbar.

So you can simply add the following code to your page front-matter, and the menu info will be handled by hugo out of the box. (simple method mentioned in document)

---
menu: navbar
---

Also, weighted value is supported out of the box, you can explicit assign the weight of the navbar entry, hugo will first sort the menu using weight, if there has two entries shared the same weight, the default order will be applied.

---
menu:
  navbar:
    weight: -99
---

If you try to put entry that aren’t attached to a piece of content, or you want to organize your navbar into a single file, checkout Add Non-content Entries to a Menu or Configuration file of demo site and set these values in your toml settings file.

toml example:

[[menu.navbar]]
identifier = "about"
name = "about"
title = "about"
url = "/about/"
weight = 100

[[menu.navbar]]
identifier = "series"
name = "series"
url = "/series/"
weight = -100

[[menu.navbar]]
identifier = "categories"
name = "categories"
url = "/categories/"
weight = 80

yaml example:

menu:
  navbar:
  - identifier: about
    name: about
    title: about
    url: /about/
    weight: 100
  - identifier: series
    name: series
    url: /series/
    weight: -100
  - identifier: categories
    name: categories
    url: /categories/
    weight: 80

List Layout 

[params]
  [params.list_layout]
  enable_group_by_year = true # default: true
  enable_show_date = true # default: true
  enable_pagination = false # default: false

Render an anchor link next to the header element.

[params]
enable_header_anchor = false # default: true

External Library

MathJax

Use $ … $ or \( … \) to create inline result, $$ … $$ or \\[ … \\] to create block result.

You may also want to setup the Goldmark passthrough extension.

Besides, double-escape the $ delimiter (\\$) if you encounter rendering issue outside the math context.

[params]
enable_math = true # default: false

Zooming.js

Zooming.js global setting.

[params]
enable_zooming_js = false # default: true

Add the following settings to config.toml:

[outputs]
home = ["HTML", "RSS", "JSON"]

Enable site search

[params]
enable_site_search = true # default: false

Syntax Highlighting

Using Chroma (server-side)

See Syntax Highlighting for more details.

[param]
  [param.syntax_highlight]
  lib = "builtin" # "builtin" | "prism.js" (default: "builtin")
    [param.syntax_highlight.builtin]
    enable_code_copy = true # default: true

Using Prism.js (client-side)

Disable markup highlight feature

[markup.highlight]
codeFences = false
lineNos = false

Enable Prism.js

[param]
  [params.syntax_highlight]
  lib = "prism.js" # "builtin" | "prism.js" (default: "builtin")
    [params.syntax_highlight.prism]
    enable_code_copy = true # default: true
    enable_line_no = true # default: true

SEO

Author 

[params]
author = "kaiiiz" # default: no author `meta` tag

Open Graph

A flag to render open graph internal template. See Open Graph for additional settings.

[params]
enable_open_graph = false # default: true

Twitter Cards

A flag to render open twitter cards template. See Twitter Cards for additional settings.

[params]
enable_twitter_cards = false # default: true

Custom CSS

You can override the default styles by creating a new /static/user.css file.

Default Color Scheme

You can set the default color scheme for your website

[params]
color_scheme = "dark" # "light" or "dark"

default: “light”

Custom head

You can insert your custom code in <head> section using the /layouts/partials/user_head.html file.

This is useful for inject third-partiy libraries (e.g. Google Ads) or your custom script.