mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
67 lines
25 KiB
HTML
67 lines
25 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=description content="Here is the page description. This is an example Quartz site that details installation, setup, customization, and troubleshooting for Quartz itself."><title>Editing Content in Quartz</title><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" type=image/png href=/icon.png><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Fira+Code:wght@400;700&display=swap" rel=stylesheet><style>:root{--light:#faf8f8;--dark:#141021;--secondary:#284b63;--tertiary:#84a59d;--visited:#afbfc9;--primary:#f28482;--gray:#4e4e4e;--lightgray:#f0f0f0;--outlinegray:#dadada}[saved-theme=dark]{--light:#1e1e21 !important;--dark:#fbfffe !important;--secondary:#5b778a !important;--visited:#4a575e !important;--tertiary:#84a59d !important;--primary:#f58382 !important;--gray:#d4d4d4 !important;--lightgray:#292633 !important;--outlinegray:#343434 !important}</style><style>:root{--lt-colours-light:var(--light) !important;--lt-colours-lightgray:var(--lightgray) !important;--lt-colours-dark:var(--secondary) !important;--lt-colours-secondary:var(--tertiary) !important;--lt-colours-gray:var(--outlinegray) !important}h1,h2,h3,h4,ol,ul,thead{font-family:Inter;color:var(--dark)}p,ul,text{font-family:source sans pro,sans-serif;color:var(--gray);fill:var(--gray)}a{font-family:Inter;font-weight:700;font-size:1em;text-decoration:none;transition:all .2s ease;color:var(--secondary)}a:hover{color:var(--tertiary)!important}#TableOfContents>ol{counter-reset:section;margin-left:0;padding-left:1.5em}#TableOfContents>ol>li{counter-increment:section}#TableOfContents>ol>li>ol{counter-reset:subsection}#TableOfContents>ol>li>ol>li{counter-increment:subsection}#TableOfContents>ol>li>ol>li::marker{content:counter(section)"." counter(subsection)" "}#TableOfContents>ol>li::marker{content:counter(section)" "}#TableOfContents>ol>li::marker,#TableOfContents>ol>li>ol>li::marker{font-family:Source Sans Pro;font-weight:700}footer{margin-top:4em;text-align:center}table{width:100%}img{width:100%;border-radius:3px;margin:1em 0}p>img+em{display:block;transform:translateY(-1em)}sup{line-height:0}p,tbody,li{font-family:Source Sans Pro;color:var(--gray);line-height:1.5em}h2{opacity:.85}h3{opacity:.75}blockquote{margin-left:0;border-left:3px solid var(--secondary);padding-left:1em;transition:border-color .2s ease}blockquote:hover{border-color:var(--tertiary)}table{padding:1.5em}td,th{padding:.1em .5em}.footnotes p{margin:.5em 0}article a{font-family:Source Sans Pro;font-weight:600;text-decoration:underline;text-decoration-color:var(--tertiary);text-decoration-thickness:.15em}sup>a{text-decoration:none;padding:0 .1em 0 .2em}pre{font-family:fira code;padding:.75em;border-radius:3px;overflow-x:scroll}code{font-family:fira code;font-size:.85em;padding:.15em .3em;border-radius:5px;background:var(--lightgray)}html{scroll-behavior:smooth}body{margin:0;height:100vh;width:100vw;overflow-x:hidden;background-color:var(--light)}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}footer{margin-top:4em}footer>a{font-size:1em;color:var(--secondary);padding:0 .5em 3em}hr{width:25%;margin:4em auto;height:2px;border-radius:1px;border-width:0;color:var(--dark);background-color:var(--dark)}a[href^="/"]{text-decoration:none;background-color:#afbfc922;padding:0 .2em;border-radius:3px}.singlePage{margin:4em 30vw}@media all and (max-width:1200px){.singlePage{margin:25px 5vw}}.page-end{display:flex;flex-direction:row}.page-end>*{flex:1 0}.page-end>.backlinks-container>ul{list-style:none;padding-left:0;margin-right:2em}.page-end>.backlinks-container>ul>li{margin:.5em 0;padding:.25em 1em;border:var(--outlinegray)1px solid;border-radius:5px}.page-end #graph-container{border:var(--outlinegray)1px solid;border-radius:5px}</style><style>.darkmode{text-align:right}.darkmode>.toggle{display:none;box-sizing:border-box}.darkmode>.toggle:checked+.toggle-button:after{left:50%}.darkmode>.toggle+.toggle-button{box-sizing:border-box;outline:0;display:inline-block;width:3em;height:1.5em;position:relative;cursor:pointer;border:2px solid var(--gray);user-select:none;padding:2px;transition:all .2s ease;border-radius:2em}.darkmode>.toggle+.toggle-button:after,.darkmode>.toggle+.toggle-button:before{position:relative;display:block;box-sizing:border-box;content:"";width:50%;height:100%}.darkmode>.toggle+.toggle-button:before{display:none}.darkmode>.toggle+.toggle-button:after{left:0;transition:all .2s ease;background:var(--gray);content:"";border-radius:1em}.darkmode #dayIcon{position:relative;width:20px;height:20px;top:-1.5px;margin:0 7px;fill:var(--gray)}.darkmode #nightIcon{position:relative;width:18px;height:18px;top:-2px;margin:0 7px;fill:var(--gray)}</style><style>.chroma{color:#f8f8f2;background-color:#282a36}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .ln{margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .k{color:#ff79c6}.chroma .kc{color:#ff79c6}.chroma .kd{color:#8be9fd;font-style:italic}.chroma .kn{color:#ff79c6}.chroma .kp{color:#ff79c6}.chroma .kr{color:#ff79c6}.chroma .kt{color:#8be9fd}.chroma .na{color:#50fa7b}.chroma .nb{color:#8be9fd;font-style:italic}.chroma .nc{color:#50fa7b}.chroma .nf{color:#50fa7b}.chroma .nl{color:#8be9fd;font-style:italic}.chroma .nt{color:#ff79c6}.chroma .nv{color:#8be9fd;font-style:italic}.chroma .vc{color:#8be9fd;font-style:italic}.chroma .vg{color:#8be9fd;font-style:italic}.chroma .vi{color:#8be9fd;font-style:italic}.chroma .s{color:#f1fa8c}.chroma .sa{color:#f1fa8c}.chroma .sb{color:#f1fa8c}.chroma .sc{color:#f1fa8c}.chroma .dl{color:#f1fa8c}.chroma .sd{color:#f1fa8c}.chroma .s2{color:#f1fa8c}.chroma .se{color:#f1fa8c}.chroma .sh{color:#f1fa8c}.chroma .si{color:#f1fa8c}.chroma .sx{color:#f1fa8c}.chroma .sr{color:#f1fa8c}.chroma .s1{color:#f1fa8c}.chroma .ss{color:#f1fa8c}.chroma .m{color:#bd93f9}.chroma .mb{color:#bd93f9}.chroma .mf{color:#bd93f9}.chroma .mh{color:#bd93f9}.chroma .mi{color:#bd93f9}.chroma .il{color:#bd93f9}.chroma .mo{color:#bd93f9}.chroma .o{color:#ff79c6}.chroma .ow{color:#ff79c6}.chroma .c{color:#6272a4}.chroma .ch{color:#6272a4}.chroma .cm{color:#6272a4}.chroma .c1{color:#6272a4}.chroma .cs{color:#6272a4}.chroma .cp{color:#ff79c6}.chroma .cpf{color:#ff79c6}.chroma .gd{color:#8b080b}.chroma .ge{text-decoration:underline}.chroma .gh{font-weight:700}.chroma .gi{font-weight:700}.chroma .go{color:#44475a}.chroma .gu{font-weight:700}.chroma .gl{text-decoration:underline}.lntd:first-of-type>.chroma{padding-right:0}.chroma code{font-family:fira code!important;font-size:.85em;line-height:1em;background:0 0;padding:0}.chroma{border-radius:3px;margin:0}</style></head><script async src="https://www.googletagmanager.com/gtag/js?id=G-XYFD95KB4J"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date),gtag('config','G-XYFD95KB4J',{anonymize_ip:!1})}</script><body><div class=singlePage><div class=darkmode><label id=toggle-label-light for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="dayIcon" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35"><title>Light Mode</title><path d="M6 17.5C6 16.672 5.328 16 4.5 16h-3C.672 16 0 16.672.0 17.5S.672 19 1.5 19h3C5.328 19 6 18.328 6 17.5zM7.5 26c-.414.0-.789.168-1.061.439l-2 2C4.168 28.711 4 29.086 4 29.5 4 30.328 4.671 31 5.5 31c.414.0.789-.168 1.06-.44l2-2C8.832 28.289 9 27.914 9 27.5 9 26.672 8.329 26 7.5 26zm10-20C18.329 6 19 5.328 19 4.5v-3C19 .672 18.329.0 17.5.0S16 .672 16 1.5v3C16 5.328 16.671 6 17.5 6zm10 3c.414.0.789-.168 1.06-.439l2-2C30.832 6.289 31 5.914 31 5.5 31 4.672 30.329 4 29.5 4c-.414.0-.789.168-1.061.44l-2 2C26.168 6.711 26 7.086 26 7.5 26 8.328 26.671 9 27.5 9zM6.439 8.561C6.711 8.832 7.086 9 7.5 9 8.328 9 9 8.328 9 7.5c0-.414-.168-.789-.439-1.061l-2-2C6.289 4.168 5.914 4 5.5 4 4.672 4 4 4.672 4 5.5c0 .414.168.789.439 1.06l2 2.001zM33.5 16h-3c-.828.0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5h3c.828.0 1.5-.672 1.5-1.5S34.328 16 33.5 16zM28.561 26.439C28.289 26.168 27.914 26 27.5 26c-.828.0-1.5.672-1.5 1.5.0.414.168.789.439 1.06l2 2C28.711 30.832 29.086 31 29.5 31c.828.0 1.5-.672 1.5-1.5.0-.414-.168-.789-.439-1.061l-2-2zM17.5 29c-.829.0-1.5.672-1.5 1.5v3c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5v-3C19 29.672 18.329 29 17.5 29zm0-22C11.71 7 7 11.71 7 17.5S11.71 28 17.5 28 28 23.29 28 17.5 23.29 7 17.5 7zm0 18c-4.136.0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5 3.364 7.5 7.5S21.636 25 17.5 25z"/></svg></label><input class=toggle id=darkmode-toggle type=checkbox tabindex=-1>
|
|
<label class=toggle-button for=darkmode-toggle></label><label id=toggle-label-dark for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="nightIcon" viewBox="0 0 100 100" style="enable-background='new 0 0 100 100'"><title>Dark Mode</title><path d="M96.76 66.458c-.853-.852-2.15-1.064-3.23-.534-6.063 2.991-12.858 4.571-19.655 4.571C62.022 70.495 50.88 65.88 42.5 57.5 29.043 44.043 25.658 23.536 34.076 6.47c.532-1.08.318-2.379-.534-3.23-.851-.852-2.15-1.064-3.23-.534-4.918 2.427-9.375 5.619-13.246 9.491-9.447 9.447-14.65 22.008-14.65 35.369.0 13.36 5.203 25.921 14.65 35.368s22.008 14.65 35.368 14.65c13.361.0 25.921-5.203 35.369-14.65 3.872-3.871 7.064-8.328 9.491-13.246C97.826 68.608 97.611 67.309 96.76 66.458z"/></svg></label></div><article><h1>Editing Content in Quartz</h1><aside class=mainTOC><h3>Table of Contents</h3><nav id=TableOfContents><ol><li><a href=#editing>Editing</a><ol><li><a href=#front-matter>Front Matter</a></li><li><a href=#obsidian>Obsidian</a></li></ol></li><li><a href=#previewing-changes>Previewing Changes</a><ol><li><a href=#installing-hugo>Installing Hugo</a></li><li><a href=#install-hugo-obsidian>Install <code>hugo-obsidian</code></a></li></ol></li><li><a href=#publishing-changes>Publishing Changes</a></li></ol></nav></aside><h2 id=editing>Editing</h2><p>Quartz runs on top of
|
|
<a href=https://gohugo.io/ rel=noopener>Hugo</a>
|
|
so all notes are written in
|
|
<a href=https://www.markdownguide.org/getting-started/ rel=noopener>Markdown</a>
|
|
.</p><p><strong>All content in your garden can found in the <code>/content</code> folder.</strong> To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you’d like.</p><p><strong>To edit the main home page, open <code>/content/_index.md</code>.</strong></p><p>To create a link, just create a normal link using Markdown pointing to the document in question. Please note that <strong>all links should be relative to the root <code>/content</code> path</strong>.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-markdown data-lang=markdown>For example, I want to link this current document to <span class=sb>`config.md`</span>.
|
|
[<span class=nt>A link to the config page</span>](<span class=na>config.md</span>)
|
|
</code></pre></td></tr></table></div></div><h3 id=front-matter>Front Matter</h3><p>Hugo is picky when it comes to metadata for files. Ensure that you have a title defined at the top of your file like so:</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span><span class=lnt>3
|
|
</span><span class=lnt>4
|
|
</span><span class=lnt>5
|
|
</span><span class=lnt>6
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-markdown data-lang=markdown>---
|
|
title: "Example Title"
|
|
---
|
|
|
|
<span class=gu>## Headers should start at H2
|
|
</span><span class=gu></span>Rest of your content here...
|
|
</code></pre></td></tr></table></div></div><h3 id=obsidian>Obsidian</h3><p>I <em>strongly</em> recommend using
|
|
<a href=http://obsidian.md/ rel=noopener>Obsidian</a>
|
|
as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of my local files.</p><p><strong>🔗
|
|
<a href=/notes/obsidian rel=noopener>How to link your Obsidian Vault</a></strong></p><p>Of course, all the files are in Markdown so you could just use your favourite text editor of choice, I’m not going to stop you!</p><h2 id=previewing-changes>Previewing Changes</h2><p>This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing.</p><h3 id=installing-hugo>Installing Hugo</h3><p>Hugo is the static site generator that powers Quartz. If you’d like to preview your site locally,
|
|
<a href=https://gohugo.io/getting-started/installing/ rel=noopener>install Hugo</a>
|
|
.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
|
|
</span><span class=lnt>2
|
|
</span><span class=lnt>3
|
|
</span><span class=lnt>4
|
|
</span><span class=lnt>5
|
|
</span><span class=lnt>6
|
|
</span><span class=lnt>7
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback># Navigate to your local Quartz folder
|
|
$ cd <location-of-your-local-quartz>
|
|
|
|
# Start local server
|
|
$ hugo server
|
|
|
|
# View your site in a browser at http://localhost:1313/
|
|
</code></pre></td></tr></table></div></div><h3 id=install-hugo-obsidian>Install <code>hugo-obsidian</code></h3><p>This step is <strong>doubly optional</strong> and only applies to those who want to see their Interactive Graph and backlinks locally while previewing changes on the site.</p><p>Ensure you have Go (>= 1.16) installed.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
|
|
</span><span class=lnt> 2
|
|
</span><span class=lnt> 3
|
|
</span><span class=lnt> 4
|
|
</span><span class=lnt> 5
|
|
</span><span class=lnt> 6
|
|
</span><span class=lnt> 7
|
|
</span><span class=lnt> 8
|
|
</span><span class=lnt> 9
|
|
</span><span class=lnt>10
|
|
</span><span class=lnt>11
|
|
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-shell data-lang=shell><span class=c1># Clone the Repository</span>
|
|
$ git clone https://github.com/jackyzha0/hugo-obsidian.git
|
|
|
|
<span class=c1># Install and link `hugo-obsidian` locally</span>
|
|
$ go install .
|
|
|
|
<span class=c1># Navigate to your local Quartz folder</span>
|
|
$ <span class=nb>cd</span> <location-of-your-local-quartz>
|
|
|
|
<span class=c1># Scrape all links in your Quartz folder and generate info for Quartz</span>
|
|
$ hugo-obsidian -input<span class=o>=</span>content -output<span class=o>=</span>data
|
|
</code></pre></td></tr></table></div></div><p>Afterwards, start the Hugo server as shown above and your local backlinks and interactive graph should be populated!</p><h2 id=publishing-changes>Publishing Changes</h2><p>Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet!</p><p>🌍
|
|
<a href=/notes/hosting rel=noopener>Hosting Quartz online!</a></p><p>Having problems? Checkout our
|
|
<a href=/notes/troubleshooting rel=noopener>FAQ and Troubleshooting guide</a>
|
|
.</p></article><hr><div class=page-end><div class=backlinks-container><h3>Backlinks</h3><ul class=backlinks><li><a href=/notes/setup>/notes/setup</a></li><li><a href=/notes/troubleshooting>/notes/troubleshooting</a></li></ul></div><div><script src=https://cdn.jsdelivr.net/npm/d3@6></script><h3>Interactive Graph</h3><div id=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><script>const index={backlinks:{"/config":[{source:"/notes/editing",target:"/config",text:"A link to the config page"}],"/moc/directory":[{source:"/",target:"/moc/directory",text:"Directory"}],"/moc/showcase":[{source:"/moc/directory",target:"/moc/showcase",text:"cool community digital gardens"}],"/notes/config":[{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"}],"/notes/editing":[{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"}],"/notes/hosting":[{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"}],"/notes/obsidian":[{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"}],"/notes/setup":[{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"}],"/notes/troubleshooting":[{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"},{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}]},links:{"/":[{source:"/",target:"/moc/directory",text:"Directory"}],"/moc/directory":[{source:"/moc/directory",target:"/moc/showcase",text:"cool community digital gardens"},{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"},{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"},{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"}],"/notes/config":[{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/editing":[{source:"/notes/editing",target:"/config",text:"A link to the config page"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/hosting":[{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/setup":[{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"}],"/notes/troubleshooting":[{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"},{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"}]}},links=[{source:"/",target:"/moc/directory",text:"Directory"},{source:"/moc/directory",target:"/moc/showcase",text:"cool community digital gardens"},{source:"/moc/directory",target:"/notes/troubleshooting",text:"Troubleshooting and FAQ"},{source:"/moc/directory",target:"/notes/setup",text:"Setup your own digital garden using Quartz"},{source:"/moc/directory",target:"/notes/obsidian",text:"Linking with an Obsidian Vault"},{source:"/moc/directory",target:"/notes/config",text:"Customizing and Styling Quartz"},{source:"/moc/directory",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/config",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/editing",target:"/config",text:"A link to the config page"},{source:"/notes/editing",target:"/notes/obsidian",text:"How to link your Obsidian Vault"},{source:"/notes/editing",target:"/notes/hosting",text:"Hosting Quartz online!"},{source:"/notes/editing",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/hosting",target:"/notes/config",text:"Customizing Quarts"},{source:"/notes/hosting",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/setup",target:"/notes/editing",text:"Editing Notes in Quartz"},{source:"/notes/setup",target:"/notes/troubleshooting",text:"FAQ and Troubleshooting guide"},{source:"/notes/troubleshooting",target:"/notes/editing",text:"local editing"},{source:"/notes/troubleshooting",target:"/notes/obsidian",text:"Obsidian"},{source:"/notes/troubleshooting",target:"/notes/hosting",text:"the hosting guide"},{source:"/notes/troubleshooting",target:"/notes/config",text:"customization guide"}],curPage="/notes/editing",pathColors=[{"/moc":"#4388cc"}],parseIdsFromLinks=a=>[...new Set(a.flatMap(a=>[a.source,a.target]))],data={nodes:parseIdsFromLinks(links).map(a=>({id:a})),links},color=a=>{if(a.id===curPage||a.id==="/"&&curPage==="")return"var(--g-node-active)";for(const b of pathColors){const c=Object.keys(b)[0],d=b[c];if(a.id.startsWith(c))return d}return"var(--g-node)"},drag=c=>{function d(b,a){b.active||c.alphaTarget(1).restart(),a.fx=a.x,a.fy=a.y}function e(a,b){b.fx=a.x,b.fy=a.y}function f(b,a){b.active||c.alphaTarget(0),a.fx=null,a.fy=null}const a=!0,b=()=>{};return d3.drag().on("start",a?d:b).on("drag",a?e:b).on("end",a?f:b)},height=250,width=document.getElementById("graph-container").offsetWidth,simulation=d3.forceSimulation(data.nodes).force("charge",d3.forceManyBody().strength(-20)).force("link",d3.forceLink(data.links).id(a=>a.id)).force("center",d3.forceCenter()),svg=d3.select('#graph-container').append('svg').attr('width',width).attr('height',height).attr("viewBox",[-width/2,-height/2,width,height]),enableLegend=!1;if(enableLegend){const a=[{Current:"var(--g-node-active)"},{Note:"var(--g-node)"},...pathColors];a.forEach((a,b)=>{const c=Object.keys(a)[0],d=a[c];svg.append("circle").attr("cx",-width/2+20).attr("cy",height/2-30*(b+1)).attr("r",6).style("fill",d),svg.append("text").attr("x",-width/2+40).attr("y",height/2-30*(b+1)).text(c).style("font-size","15px").attr("alignment-baseline","middle")})}const link=svg.append("g").selectAll("line").data(data.links).join("line").attr("class","link").attr("stroke","var(--g-link)").attr("stroke-width",2).attr("data-source",a=>a.source.id).attr("data-target",a=>a.target.id),graphNode=svg.append("g").selectAll("g").data(data.nodes).enter().append("g"),node=graphNode.append("circle").attr("class","node").attr("id",a=>a.id).attr("r",a=>{const b=index.links[a.id]?.length||0,c=index.backlinks[a.id]?.length||0;return 3+(b+c)/4}).attr("fill",color).style("cursor","pointer").on("click",(b,a)=>{window.location.href=a.id}).on("mouseover",function(f,a){d3.selectAll(".node").transition().duration(100).attr("fill","var(--g-node-inactive)");const c=parseIdsFromLinks([...index.links[a.id]||[],...index.backlinks[a.id]||[]]),d=d3.selectAll(".node").filter(a=>c.includes(a.id)),b=a.id,e=d3.selectAll(".link").filter(a=>a.source.id===b||a.target.id===b);d.transition().duration(200).attr("fill",color),e.transition().duration(200).attr("stroke","var(--g-link-active)"),d3.select(this.parentNode).select("text").raise().transition().duration(200).style("opacity",1)}).on("mouseleave",function(d,b){d3.selectAll(".node").transition().duration(200).attr("fill",color);const a=b.id,c=d3.selectAll(".link").filter(b=>b.source.id===a||b.target.id===a);c.transition().duration(200).attr("stroke","var(--g-link)"),d3.select(this.parentNode).select("text").transition().duration(200).style("opacity",0)}).call(drag(simulation)),labels=graphNode.append("text").attr("dx",12).attr("dy",".35em").text(a=>a.id).style("opacity",0).style("pointer-events","none").call(drag(simulation)),enableZoom=!0;enableZoom&&svg.call(d3.zoom().extent([[0,0],[width,height]]).scaleExtent([.25,4]).on("zoom",({transform:a})=>{link.attr("transform",a),node.attr("transform",a),labels.attr("transform",a)})),simulation.on("tick",()=>{link.attr("x1",a=>a.source.x).attr("y1",a=>a.source.y).attr("x2",a=>a.target.x).attr("y2",a=>a.target.y),node.attr("cx",a=>a.x).attr("cy",a=>a.y),labels.attr("x",a=>a.x).attr("y",a=>a.y)})</script></div></div><div id=contact_buttons><footer><p>Made by Jacky Zhao using <a href=https://github.com/jackyzha0/quartz>Quartz</a>, © 2021</p><a href=/>Home</a>
|
|
<a href=https://twitter.com/_jzhao>Twitter</a><a href=https://github.com/jackyzha0>Github</a></footer></div></div><script>const toggleSwitch=document.querySelector('#darkmode-toggle'),userPref=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark',currentTheme=localStorage.getItem('theme')??userPref;currentTheme&&(document.documentElement.setAttribute('saved-theme',currentTheme),currentTheme==='dark'&&(toggleSwitch.checked=!0));const switchTheme=a=>{a.target.checked?(document.documentElement.setAttribute('saved-theme','dark'),localStorage.setItem('theme','dark')):(document.documentElement.setAttribute('saved-theme','light'),localStorage.setItem('theme','light'))};toggleSwitch.addEventListener('change',switchTheme,!1)</script></body></html> |