Search

# Configuration

Last updated Jul 31, 2022 Edit Source

## # 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 found under data/config.yaml. An annotated example configuration is shown below.

### # Code Block Titles

To add code block titles with Quartz:

1. Ensure that code block titles are enabled in Quartz’s configuration:

enableCodeBlockTitle: true

2. Add the title attribute to the desired code block fence:

yaml {title="data/config.yaml"}
enableCodeBlockTitle: true  # example from step 1


Note that if {title=<my-title>} is included, and code block titles are not enabled, no errors will occur, and the title attribute will be ignored.

### # HTML Favicons

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

 15

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

favicon:
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
#  - { ... } # Repeat for each additional favicon you want to add

In this format, the keys are identical to their HTML representations.

If you plan to add multiple favicons generated by a website (see list below), it may be easier to define it as HTML. Here is an example which appends the Apple touch icon to Quartz’s default favicon:

favicon: |

This second favicon will now be used as a web page icon when someone adds your webpage to the home screen of their Apple device. If you are interested in more information about the current and past standards of favicons, you can read this article.

Note that all generated favicon paths, defined by the href attribute, are relative to the static/ directory.

### # Graph View

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

 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 # if true, a Global Graph will be shown on home page with full width, no backlink. # A different set of Local Graphs will be shown on sub pages. # if false, Local Graph will be default on every page as usual enableGlobalGraph: false ### Local Graph ### localGraph: # whether automatically generate a legend enableLegend: false # whether to allow dragging nodes in the graph enableDrag: true # whether to allow zooming and panning the graph enableZoom: true # how many neighbours of the current node to show (-1 is all nodes) depth: 1 # initial zoom factor of the graph scale: 1.2 # how strongly nodes should repel each other repelForce: 2 # how strongly should nodes be attracted to the center of gravity centerForce: 1 # what the default link length should be linkDistance: 1 # how big the node labels should be fontSize: 0.6 # scale at which to start fading the labes on nodes opacityScale: 3 ### Global Graph ### globalGraph: # same settings as above ### For all graphs ### # colour specific nodes path off of their path paths: - /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 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

Still having problems? Checkout our FAQ and Troubleshooting guide.

## # Language Support

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.