<!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."><title>Configuration</title><metaname=viewportcontent="width=device-width,initial-scale=1"><linkrel="shortcut icon"type=image/pnghref=https://quartz.jzhao.xyz//icon.png><linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap"rel=stylesheet><linkhref=https://quartz.jzhao.xyz/styles.cd61336c89ed6e03702366ce4a492b75.min.cssrel=stylesheet><scriptsrc=https://quartz.jzhao.xyz/js/darkmode.46b07878b7f5d9e26ad7a3c40f8a0605.min.js></script>
<script>vardoNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];functiongtag(){dataLayer.push(arguments)}gtag("js",newDate),gtag("config","G-XYFD95KB4J",{anonymize_ip:!1})}</script><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>
<scriptdefersrc=https://quartz.jzhao.xyz/js/search.bc849b857f2c1b822264d40635bb67b6.min.js></script><divclass=singlePage><header><h1id=page-title><ahref=https://quartz.jzhao.xyz/>🪴 Quartz 3.2</a></h1><svgtabindex="0"id="search-icon"aria-labelledby="title desc"role="img"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 19.9 19.7"><titleid="title">Search Icon</title><descid="desc">Icon to open search</desc><gclass="search-path"fill="none"><pathstroke-linecap="square"d="M18.5 18.3l-5.4-5.4"/><circlecx="8"cy="8"r="7"/></g></svg><divclass=spacer></div><divclass=darkmode><inputclass=toggleid=darkmode-toggletype=checkboxtabindex=-1>
</span></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>name</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>Your name here!</span><spanclass=w></span><spanclass=c># Shows in the footer</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>enableToc</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># Whether to show a Table of Contents</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>enableLinkPreview</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># whether to render card previews for links</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>description</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>Page description to show to search engines</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>page_title</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>Quartz Example Page</span><spanclass=w></span><spanclass=c># Default Page Title</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>links</span><spanclass=p>:</span><spanclass=w></span><spanclass=c># Links to show in footer</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><h3id=graph-view>Graph View</h3><p>To customize the Interactive Graph view, you can poke around <code>data/graphConfig.yaml</code>.</p><divclass=highlight><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></code></pre></td><tdclass=lntd><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>enableLegend</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>false</span><spanclass=w></span><spanclass=c># automatically generate a legend</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>enableDrag</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># allow dragging nodes in the graph</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>enableZoom</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># allow zooming and panning the graph</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>depth</span><spanclass=p>:</span><spanclass=w></span>-<spanclass=m>1</span><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=nt>paths</span><spanclass=p>:</span><spanclass=w></span><spanclass=c># colour specific nodes path off of their path</span><spanclass=w>
</span></span></span></code></pre></td></tr></table></div></div><h2id=styling>Styling</h2><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><h3id=partials>Partials</h3><p>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 <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/troubleshootingrel=noopenerclass=internal-linkdata-src=/notes/troubleshooting>FAQ and Troubleshooting guide</a>.</p><h2id=multilingual>Multilingual</h2><p><ahref=/notes/CJK-+-Latex-Support-%E6%B5%8B%E8%AF%95rel=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
</span></span></code></pre></td></tr></table></div></div></article><hr><divclass=page-end><divclass=backlinks-container><h3>Backlinks</h3><ulclass=backlinks><li><ahref=/notes/CJK-+-Latex-Support-%E6%B5%8B%E8%AF%95>CJK + Latex Support (测试)</a></li><li><ahref=/notes/hosting>Deploying Quartz to the Web</a></li><li><ahref=/notes/troubleshooting>Troubleshooting and FAQ</a></li></ul></div><div><scriptsrc=https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.jsintegrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="crossorigin=anonymous></script><h3>Interactive Graph</h3><divid=graph-container></div><style>:root{--g-node:var(--secondary);--g-node-active:var(--primary);--g-node-inactive:var(--visited);--g-link:var(--outlinegray);--g-link-active:#5a7282}</style><scriptsrc=https://quartz.jzhao.xyz/js/graph.27e8521c25c27c79dea35f434c486167.js></script>
