<!doctype html><htmllang=en><head><metacharset=utf-8><metaname=descriptioncontent="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."><metaproperty="og:title"content="Configuration"><metaproperty="og:description"content="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."><metaproperty="og:type"content="website"><metaproperty="og:image"content="https://ar.falsy.cat/icon.png"><metaproperty="og:url"content="https://ar.falsy.cat/notes/config/"><metaproperty="og:width"content="200"><metaproperty="og:height"content="200"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Configuration"><metaname=twitter:descriptioncontent="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."><metaname=twitter:imagecontent="https://ar.falsy.cat/icon.png"><metaname=twitter:sitecontent="_jzhao"><title>Configuration</title><metaname=viewportcontent="width=device-width,initial-scale=1"><linkrel="shortcut icon"type=image/pnghref=https://ar.falsy.cat//icon.png><linkhref=https://ar.falsy.cat/styles.b369a84b3c6e6bfd686ad1f9da65641c.min.cssrel=stylesheet><linkhref=https://ar.falsy.cat/styles/_light_syntax.86a48a52faebeaaf42158b72922b1c90.min.cssrel=stylesheetid=theme-link><scriptsrc=https://ar.falsy.cat/js/darkmode.557cde7fcc3511a3d7ca8545ecd46d77.min.js></script>
<script>window.plausible=window.plausible||function(){(window.plausible.q=window.plausible.q||[]).push(arguments)}</script></head><body><divid=search-container><divid=search-space><inputautocomplete=offid=search-barname=searchtype=textaria-label=Searchplaceholder="Search for something..."><divid=results-container></div></div></div><scriptsrc=https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.jsintegrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE="crossorigin=anonymousdefer></script>
<ahref=https://github.com/jackyzha0/quartz/tree/hugo/content/notes/config.mdrel=noopener>Edit Source</a></p><ulclass=tags><li><ahref=https://ar.falsy.cat/tags/setup/>Setup</a></li></ul><asideclass=mainTOC><details><summary>Table of Contents</summary><navid=TableOfContents><ol><li><ahref=#configuration>Configuration</a><ol><li><ahref=#code-block-titles>Code Block Titles</a></li><li><ahref=#html-favicons>HTML Favicons</a></li><li><ahref=#graph-view>Graph View</a></li></ol></li><li><ahref=#styling>Styling</a><ol><li><ahref=#partials>Partials</a></li></ol></li><li><ahref=#language-support>Language Support</a></li></ol></nav></details></aside><ahref=#configuration><h2id=configuration><spanclass=hanchorarialabel=Anchor># </span>Configuration</h2></a><p>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.</p><p>The majority of configuration can be found under <code>data/config.yaml</code>. An annotated example configuration is shown below.</p><divclass=highlighttitle=data/config.yaml><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt> 1
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=c># The name to display in the footer</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to globally show the table of contents on each page</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># this can be turned off on a per-page basis by adding this to the</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># front-matter of that note</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to by-default open or close the table of contents on each page</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to display on-hover link preview cards</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to render copy buttons for code blocks</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to enable single-page-app style rendering</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># this prevents flashes of unstyled content and improves</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># smoothness of Quartz. More info in issue #109 on GitHub</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether backlinks of pages should show the context in which</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># they were mentioned</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to show a section of recent notes on the home page</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to display an 'edit' button next to the last edited field</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># that links to github</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to use Operand to power semantic search</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># IMPORTANT: replace this API key with your own if you plan on using</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=l>Host your second brain and digital garden for free. Quartz features extremely fast full-text search,</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=l>Wikilink support, backlinks, local graph, tags, and link previews.</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><ahref=#code-block-titles><h3id=code-block-titles><spanclass=hanchorarialabel=Anchor># </span>Code Block Titles</h3></a><p>To add code block titles with Quartz:</p><ol><li><p>Ensure that code block titles are enabled in Quartz’s configuration:</p><divclass=highlighttitle=data/config.yaml><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>enableCodeBlockTitle</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w>
</span></span></span></code></pre></div></li><li><p>Add the <code>title</code> attribute to the desired
</span></span><spanclass=line><spanclass=cl> enableCodeBlockTitle: true # example from step 1
</span></span><spanclass=line><spanclass=cl> ```
</span></span></code></pre></div></li></ol><p><strong>Note</strong> that if <code>{title=<my-title>}</code> is included, and code block titles are not
enabled, no errors will occur, and the title attribute will be ignored.</p><ahref=#html-favicons><h3id=html-favicons><spanclass=hanchorarialabel=Anchor># </span>HTML Favicons</h3></a><p>If you would like to customize the favicons of your Quartz-based website, you
can add them to the <code>data/config.yaml</code> file. The <strong>default</strong> without any set
</span></span></code></pre></td></tr></table></div></div><p>The default can be overridden by defining a value to the <code>favicon</code> key in your
<code>data/config.yaml</code> file. For example, here is a <code>List[Dictionary]</code> example format, which is
equivalent to the default:</p><divclass=highlighttitle=data/config.yaml><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>favicon</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># - { ... } # Repeat for each additional favicon you want to add</span><spanclass=w>
</span></span></span></code></pre></div><p>In this format, the keys are identical to their HTML representations.</p><p>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
<strong>Apple touch icon</strong> to Quartz’s default favicon:</p><divclass=highlighttitle=data/config.yaml><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>favicon</span><spanclass=p>:</span><spanclass=w></span><spanclass=p>|</span><spanclass=sd>
</span></span></span></code></pre></div><p>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
<ahref=https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/rel=noopener>this article</a>.</p><p><strong>Note</strong> that all generated favicon paths, defined by the <code>href</code>
attribute, are relative to the <code>static/</code> directory.</p><ahref=#graph-view><h3id=graph-view><spanclass=hanchorarialabel=Anchor># </span>Graph View</h3></a><p>To customize the Interactive Graph view, you can poke around <code>data/graphConfig.yaml</code>.</p><divclass=highlighttitle=data/graphConfig.yaml><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt> 1
</span><spanclass=lnt> 2
</span><spanclass=lnt> 3
</span><spanclass=lnt> 4
</span><spanclass=lnt> 5
</span><spanclass=lnt> 6
</span><spanclass=lnt> 7
</span><spanclass=lnt> 8
</span><spanclass=lnt> 9
</span><spanclass=lnt>10
</span><spanclass=lnt>11
</span><spanclass=lnt>12
</span><spanclass=lnt>13
</span><spanclass=lnt>14
</span><spanclass=lnt>15
</span><spanclass=lnt>16
</span><spanclass=lnt>17
</span><spanclass=lnt>18
</span><spanclass=lnt>19
</span><spanclass=lnt>20
</span><spanclass=lnt>21
</span><spanclass=lnt>22
</span><spanclass=lnt>23
</span><spanclass=lnt>24
</span><spanclass=lnt>25
</span><spanclass=lnt>26
</span><spanclass=lnt>27
</span><spanclass=lnt>28
</span><spanclass=lnt>29
</span><spanclass=lnt>30
</span><spanclass=lnt>31
</span><spanclass=lnt>32
</span><spanclass=lnt>33
</span><spanclass=lnt>34
</span><spanclass=lnt>35
</span><spanclass=lnt>36
</span><spanclass=lnt>37
</span><spanclass=lnt>38
</span><spanclass=lnt>39
</span><spanclass=lnt>40
</span><spanclass=lnt>41
</span><spanclass=lnt>42
</span><spanclass=lnt>43
</span><spanclass=lnt>44
</span><spanclass=lnt>45
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=c># if true, a Global Graph will be shown on home page with full width, no backlink.</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># A different set of Local Graphs will be shown on sub pages.</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># if false, Local Graph will be default on every page as usual</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># whether to allow zooming and panning the graph</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># how many neighbours of the current node to show (-1 is all nodes)</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># how strongly should nodes be attracted to the center of gravity</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># scale at which to start fading the labes on nodes</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><ahref=#styling><h2id=styling><spanclass=hanchorarialabel=Anchor># </span>Styling</h2></a><p>Want to go even more in-depth? You can add custom CSS styling and change existing colours through editing <code>assets/styles/custom.scss</code>. If you’d like to target specific parts of the site, you can add ids and classes to the HTML partials in <code>/layouts/partials</code>.</p><ahref=#partials><h3id=partials><spanclass=hanchorarialabel=Anchor># </span>Partials</h3></a><p>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 <code>/layouts</code>.</p><p>For example, the structure of the home page can be edited through <code>/layouts/index.html</code>. To customize the footer, you can edit <code>/layouts/partials/footer.html</code></p><p>More info about partials on
<ahref=https://gohugo.io/templates/partials/rel=noopener>Hugo’s website.</a></p><p>Still having problems? Checkout our
<ahref=/notes/troubleshooting/rel=noopenerclass=internal-linkdata-src=/notes/troubleshooting/>FAQ and Troubleshooting guide</a>.</p><ahref=#language-support><h2id=language-support><spanclass=hanchorarialabel=Anchor># </span>Language Support</h2></a><p><ahref=/notes/CJK-+-Latex-Support-%E6%B5%8B%E8%AF%95/rel=noopenerclass=internal-linkdata-src=/notes/CJK-+-Latex-Support-%E6%B5%8B%E8%AF%95/>CJK + Latex Support (测试)</a> comes out of the box with Quartz.</p><p>Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively.</p><p>Follow the steps
<ahref=https://gohugo.io/content-management/multilingual/#configure-languagesrel=noopener>Hugo provides here</a> and modify your <code>config.toml</code></p><p>For example:</p><divclass=highlight><divclass=chroma><tableclass=lntable><tr><tdclass=lntd><pretabindex=0class=chroma><code><spanclass=lnt>1
