quartz-research-note/content/notes/config.md

title	tags
Configuration	setup

Configuration

Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.

The majority of configuration can be be found under data/config.yaml. An annotated example configuration is shown below.

name: Your name here! # Shows in the footer
enableToc: true # Whether to show a Table of Contents
enableLinkPreview: true # whether to render card previews for links
description: Page description to show to search engines
page_title: Quartz Example Page # Default Page Title

links: # Links to show in footer
  - link_name: Twitter
    link: https://twitter.com/_jzhao
  - link_name: Github
    link: https://github.com/jackyzha0

HTML Favicons

If you would like to customize the favicons of your website, you can add them to the data/config.yaml file. The default without any set favicon key is:

<link rel="shortcut icon" href="icon.png" type="image/png">

The default can be overridden by defining a value to the favicon key in your data/config.yaml file. Here is a List[Dictionary] example format, which is equivalent to the default:

favicon:
  - { rel: "shortcut icon", href: "icon.png", type: "image/png" }

In this format, the following keys are available:

• rel: The rel attribute of the <link> tag.
• type: The type attribute of the <link> tag.
• href (optional): The href attribute of the <link> tag.
• sizes (optional): The sizes attribute of the <link> tag.

If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML:

favicon: |
  <link rel="shortcut icon" href="icon.png" type="image/png">  

Some websites that generate favicons for you (ordered alphabetically) include:

• favicon.io
• realfavicongenerator.net
• www.favicon.cc

Graph View

To customize the Interactive Graph view, you can poke around data/graphConfig.yaml.

enableLegend: false # automatically generate a legend
enableDrag: true # allow dragging nodes in the graph
enableZoom: true # allow zooming and panning the graph
depth: -1 # how many neighbours of the current node to show (-1 is all nodes)
paths: # colour specific nodes path off of their path
  - /moc: "#4388cc"

Styling

Want to go even more in-depth? You can add custom CSS styling and change existing colours through editing assets/styles/custom.scss. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in /layouts/partials.

Partials

Partials are what dictate what actually gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in /layouts.

For example, the structure of the home page can be edited through /layouts/index.html. To customize the footer, you can edit /layouts/partials/footer.html

More info about partials on Hugo's website.

Still having problems? Checkout our FAQ and Troubleshooting guide.

Multilingual

CJK + Latex Support (测试) comes out of the box with Quartz.

Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively.

Follow the steps Hugo provides here and modify your config.toml

For example:

defaultContentLanguage = 'ar'
[languages]
  [languages.ar]
    languagedirection = 'rtl'
    title = 'مدونتي'
    weight = 1