Quartz 업데이트 로그

Eilleen의 Quartz를 보고 영감을 얻어 나만의 Quartz를 수정하는 과정을 기록하고자 합니다. 수정 과정은 최신순으로 추가하여 Quartz 수정 타임 라인을 확인하고 Quartz를 새로 구축하는 분들에게 이정표가 되었으면 좋겠습니다.

References

Tip

처음 Quartz를 구축하시는 분들은 하단부터 올라오면서 따라하시면 갈피를 잡을 수 있습니다!
최하단 : 블로그 제목 수정

NerdFont로 변경

기존 code-block의 폰트를 FiraCode, D2Coding으로 했는데 JetbrainsMono Nerd, D2Coding 으로 수정하려고 합니다.

NerdFonts

Nerd Font는 기존 Font 파일에 오픈소스 아이콘을 넣어서 터미널이나 일반 텍스트에서 아이콘을 사용할 수 있게 만든 font 파일입니다. Nerd Fonts 로 접속하면 여러 NerdFonts를 보고 다운받을 수 있습니다.

custom.scss

@use "./base.scss";
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/pretendard/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
 
        @font-face {
            font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/paperlogy/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
 
@font-face {
    font-family: D2Coding;
    src: url('/static/fonts/d2coding/D2Coding-Ver1.3.2-20180524-ligature.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: D2Coding;
    src: url('/static/fonts/d2coding/D2CodingBold-Ver1.3.2-20180524-ligature.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMonoNerd;
    src: url('/static/fonts/jetbrains/JetBrainsMonoNerdFontMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
 
@font-face {
    font-family: SymbolsNerdFontMono;
    src: url('/static/fonts/SymbolsNerdFontMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
 
 
:root {
    --titleFont: 'Paperlogy', 'Pretendard','SymbolsNerdFontMono', sans-serif !important;
    --headerFont: 'Paperlogy', 'Pretendard', 'SymbolsNerdFontMono', sans-serif !important;
    --bodyFont: 'Pretendard', 'SymbolsNerdFontMono', sans-serif !important;
    --codeFont: 'JetBrainsMonoNerd', 'D2Coding', 'SymbolsNerdFontMono', monospace !important;
}

Recent Page 추가

주로 블로그에는 최근에 게시되거나 수정된 게시물을 표시하여 독자들에게 알려줍니다. Quartz는 Recent Page 컴포넌트가 존재하지만 기본적으로 비활성화되어 있습니다. Recent Page 컴포넌트를 활성화하는 방법입니다.

Original

quartz.layout.ts

// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.ConditionalRender({
      component: Component.Breadcrumbs(),
      condition: (page) => page.fileData.slug !== "index",
    }),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
  ],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Flex({
      components: [
        {
          Component: Component.Search(),
          grow: true,
        },
        { Component: Component.Darkmode() }
        // { Component: Component.ReaderMode() }
      ],
    }),
    Component.Explorer(),
  ],
  right: [
    Component.Graph(),
    Component.DesktopOnly(Component.TableOfContents()),
    Component.Backlinks(),
  ],
}

Updated

quartz.layout.ts

// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.ConditionalRender({
      component: Component.Breadcrumbs(),
      condition: (page) => page.fileData.slug !== "index",
    }),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
  ],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Flex({
      components: [
        {
          Component: Component.Search(),
          grow: true,
        },
        { Component: Component.Darkmode() }
        // { Component: Component.ReaderMode() }
      ],
    }),
    Component.Explorer(),
+   Component.RecentNotes({}),
  ],
  right: [
    Component.Graph(),
    Component.DesktopOnly(Component.TableOfContents()),
    Component.Backlinks(),
  ],
}

Custom Font 변경

하단에서 진행한 폰트 변경은 Google Fonts에 있는 폰트만 사용할 수 있기 때문에 제약이 존재합니다. 저는 Pretendard, Paperlogy, FiraCode 를 사용하고 싶어서 이를 적용할 방법을 찾았습니다.

1. 폰트 준비

폰트 설치
프로젝트 폴더에 폰트를 옮깁니다.
- 위치 : /quartz/static/fonts/

2. custom.scss 수정

/quartz/styles/custom.scss

@use "./base.scss";
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
 
@font-face {
    font-family: Pretendard;
    src: url('/static/fonts/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-1Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-2ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-3Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-4Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-5Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-6SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-7Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-8ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
 
@font-face {
    font-family: Paperlogy;
    src: url('/static/fonts/Paperlogy-9Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
 
@font-face {
    font-family: D2Coding;
    src: url('/static/fonts/D2Coding.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: FiraCode;
    src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: JetBrainsMono;
    src: url('/static/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
 
:root {
    --titleFont: 'Paperlogy', 'Pretendard', sans-serif !important;
    --headerFont: 'Paperlogy', 'Pretendard', sans-serif !important;
    --bodyFont: 'Pretendard', sans-serif !important;
    --codeFont: 'FiraCode', 'D2Coding', monospace !important;
}

Tip

저는 모든 font-weight을 설정해서 코드가 좀 긴데 일반적으로 400, 700만 설정해도 충분합니다.

기존 footer에 있는 GitHub와 Discord 주소를 나만의 주소로 수정합니다.

Original

quartz.layout.ts

// components shared across all pages
export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  afterBody: [],
  footer: Component.Footer({
    links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
    },
  }),
}

Updated

quartz.layout.ts

// components shared across all pages
export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  afterBody: [],
  footer: Component.Footer({
    links: {
+      GitHub: "https://github.com/junbeom-cho/quartz-blog",
+      "Uptime Kuma": "https://kuma.junbeom.work/status/obsidian-blog"
    },
  }),
}

ReaderMode 제거

ReaderMode란 문서 읽기에 더욱 집중할 수 있도록 그래프 뷰와 목차를 안보이도록 숨기는 기능입니다. 굳이 필요없는 기능이라 제거합니다.

Original

quartz.layout.ts

left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Flex({
      components: [
        {
          Component: Component.Search(),
          grow: true,
        },
-        { Component: Component.Darkmode() },
-        { Component: Component.ReaderMode() },
      ],
    }),
    Component.Explorer(),
  ],

Updated

quartz.layout.ts

  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Flex({
      components: [
        {
          Component: Component.Search(),
          grow: true,
        },
+        { Component: Component.Darkmode() }
+        //{ Component: Component.ReaderMode() },
      ],
    }),
    Component.Explorer(),
  ],
  right: [
    Component.Graph(),
    Component.DesktopOnly(Component.TableOfContents()),
    Component.Backlinks(),
  ],

ExplicitPublish 플러그인 적용

Quartz는 기본적으로 RemoveDrafts라는 플러그인을 사용합니다. RemoveDrafts는 FrontMatter에 draft: true를 통해 노트를 게시하지 않을 수 있습니다. 하지만 기본적으로 게시하지 않고 선택한 노트만 게시하고 싶은 저는 ExplicitPublish 플러그인을 통해 publish: true가 적용된 노트만 게시되도록 수정했습니다.

Original

quartz.config.ts

- filters: [Plugin.RemoveDrafts()],

Updated

quartz.config.ts

+ //filters: [Plugin.RemoveDrafts()],
+ filters: [Plugin.ExplicitPublish()],

폰트 변경

기본적으로 Quartz는 Google Fonts를 지원하기 때문에 원하는 폰트를 찾아서 원하는 폰트로 변경합니다.

Original

quartz.config.ts

- header: "Schibsted Grotesk",
- body: "Source Sans Pro",
- code: "IBM Plex Mono",

Updated

+ header: "Noso Sans KR",
+ body: "Noto Sans KR",
+ code: "JetBrains Mono",

baseUrl 수정

baseUrl은 sitemap.xml이나 rss.xml 생성에 사용되므로 본인의 도메인을 연결합니다.

Original

quartz.config.ts

- baseUrl: "quartz.jzhao.xyz"

Updated

quartz.config.ts

+ baseUrl: "obsidian.junbeom.work"

Locale 변경

Locale은 사용자 인터페이스에 사용되는 언어, 지역 설정, 출력 형식 등을 정의하는 문자열로 블로그에 표출되는 언어를 변경합니다.

Original

quartz.config.ts

- locale: "en-US"

Updated

quartz.config.ts

+ locale: "ko-KR"

블로그 제목 수정

왼쪽 navBar 위에 표시되는 블로그 제목을 나만의 제목으로 수정합니다.

Original

quartz.config.ts

- pageTitle: "Quartz 4"

Updated

quartz.config.ts

+ pageTitle: "Junbeom Docs"

Junbeom Docs

탐색기

최근 게시글

Cloud Computing

Oracle Cloud 회원가입

CloudBeaver Installation

Quartz 업데이트 로그

References

NerdFont로 변경

Recent Page 추가

Custom Font 변경

1. 폰트 준비

2. custom.scss 수정

footer 링크 변경

ReaderMode 제거

ExplicitPublish 플러그인 적용

폰트 변경

baseUrl 수정

Locale 변경

블로그 제목 수정

그래프 뷰

목차

백링크