Here are the changes I’ve made to my Quartz setup. While I can’t promise to include everything or keep it constantly updated, this should give you a good idea of how I’ve customized this digital garden website.
The idea of document my customization comes from Quartz customization log | Eilleen’s e-Notebook.
GitHub Repository: LesleyLai/digital-garden
Disable Buggy Obsidian Comment Parsing in Quartz
quartz.config.ts
- Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
+ Plugin.ObsidianFlavoredMarkdown({
+ comments: false,
+ enableInHtmlEmbed: false,
+ }),
Make Page Titles Larger and also Capitalize Them
quartz\styles\custom.scss
.article-title {
font-size: 2rem;
text-transform: capitalize;
}
Adjust Style for the Recent Notes Component
Commit: LesleyLai/digital-garden@2f28ac3
Replaces Default Favicon and Og-image
In quartz/static
Adds robots.txt
From Robots.txt template - allowlist | DITig
The above robots.txt
does not allow access from the Internet Archive, so I add it back
# Archive
User-agent: archive.org_bot
Disallow:
TBH I don’t really expect most scrappers to respect robots.txt
, though.
An OnlyFor
Component
Copied from Quartz customization log | Eilleen’s e-Notebook.
Use OnlyFor
for RecentNotes
Components in the Index Page
quartz.layout.ts
afterBody: [
Component.OnlyFor(
{ titles: ["Home"] },
Component.RecentNotes({
showTags: false,
linkToMore: "/tags" as SimpleSlug,
limit: 10,
title: "Recently Edited Notes:",
// do not include the home page itself in the recently edited notes
filter: (f) => f.relativePath !== "index.md",
}),
),
],
Created & Modified Date
lastmod.ts
} else if (source === "frontmatter" && file.data.frontmatter) {
created ||= file.data.frontmatter.date as MaybeDate
+ created ||= file.data.frontmatter.created as MaybeDate
modified ||= file.data.frontmatter.lastmod as MaybeDate
modified ||= file.data.frontmatter.updated as MaybeDate
+ modified ||= file.data.frontmatter.modified as MaybeDate
modified ||= file.data.frontmatter["last-modified"] as MaybeDate
published ||= file.data.frontmatter.publishDate as MaybeDate
Show both created and modified date on the page
ContentMeta.tsx
if (fileData.dates) {
- segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
+ segments.push(`Created: ${formatDate(fileData.dates.created, cfg.locale)}`)
+
+ if (fileData.dates.created != fileData.dates.modified) {
+ segments.push(`Last Modified: ${formatDate(fileData.dates.modified, cfg.locale)}`)
+ }
}
Use MathJax instead of KaTex
I use certain MathJax plugins in my notes which is not supported by KaTex.
quartz.config.ts
- Plugin.Latex({ renderEngine: "katex" }),
+ Plugin.Latex({ renderEngine: "mathjax" }),
Disable Reading Time in Content Pages
quartz.layout.ts
- Component.ContentMeta(),
+ Component.ContentMeta({ showReadingTime: false }),
Adds Site name to Title
quartz/components/Head.tsx
return (
<head>
- <title>{title}</title>
+ <title>{title} | {cfg.pageTitle}</title>
Adds Comments Support
quartz.layout.ts
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
head: Component.Head(),
header: [],
afterBody: [
...
+ Component.Comments({
+ provider: "giscus",
+ options: {
+ repo: "LesleyLai/digital-garden",
+ repoId: "R_kgDOMyQ4bw",
+ category: "Announcements",
+ categoryId: "DIC_kwDOMyQ4b84CisbS",
+ },
+ }),
],
Visible Properties
See the commit
It is mostly copied from michelepapucci/quartz-visible-obsidian-property, but I also fixed some bugs and type errors, and made a few style adjustments. I also makes visible properties opt-in rather than opt-out.
Making Sidebar Narrower on Tablet
By default, the sidebar occupies too much screen space on tablets.
@media all and ($tablet) {
.page {
& > #quartz-body {
grid-template-columns: 240px auto !important;
& > .sidebar {
padding-left: 0;
padding-right: 1em;
}
}
}
}
Adds Background for Transparent Images in Dark Mode
Some images in my vault are transparent, which don’t display well in dark mode. The following CSS snippet fixes this in Quartz and also slightly darkens all images when dark mode is enabled.
quartz\styles\custom.scss
:root[saved-theme="dark"] #quartz-body img {
background-color: white;
filter: brightness(.85) contrast(1.1);
}
Before | After |
---|---|
![]() | ![]() |
Make Font Size Larger on Large Desktop Screen
quartz\styles\custom.scss
@media all and (min-width: 1440px) {
.page > #quartz-body > .center > article {
font-size: 18px;
}
}
Distinguish Internal Links to Missing Pages
Obsidian (and Wikis like MediaWiki) will signify links to missing pages.
See commit here
Add Bottom Margin to Callout Content
quartz/styles/custom.scss
.callout {
& > .callout-content {
margin-bottom: 1em;
}
}
Before | After |
---|---|
![]() | ![]() |
Change Breakpoints Width
quartz/styles/variables.scss
$breakpoints: (
mobile: 992px, // was 800
desktop: 1400px, // was 1200
);