Quartz4自定义

更新:09.26.2025
Article

由于本人不懂前端,以下主要参考代码来源来自quartz4.0作者jacky的数字花园

添加字体

以下以手写字体为例,也可以用同样的方式添加其他若干字体, 先上效果:
image.png

添加字体及样式

推荐一个网站先: https://www.fontsquirrel.com
先把要添加的字体文件(woff,woff2等)放到quartz/static/font目录下;
quartz/static/font/font-style.css

@font-face {
    font-family: 'biro_script_standardRgus';
    src: url('biro_script_standard_us.woff2') format('woff2'),
         url('biro_script_standard_us.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

quartz/styles/custom.scss

pre.poetry {
  font-size: 1.2rem;
  font-family: biro_script_standardRgus;
  border: none;
  padding: 0;
}

quartz/components/Head.tsx

+   const fontStylePath = joinSegments(baseDir, "static/font/font-style.css")
...
...

+   <link href={fontStylePath} rel="stylesheet" type="text/css" spa-preserve />

添加插件

quartz/plugins/transformers/poetry.ts(new)

import { QuartzTransformerPlugin } from "../types"
import { Root } from "mdast"
import { visit } from "unist-util-visit"

export const Poetry: QuartzTransformerPlugin = () => ({
  name: "Poetry",
  markdownPlugins() {
    return [() => (tree: Root, _file) => {
      visit(tree, "code", (node) => {
        if (node.lang === "poetry") {
          node.type = "html" as "code"
          node.value = `<pre class="poetry">${node.value}</pre>`
        }
      })
    }]
  },
})

quartz.config.ts


plugins: {
    transformers: [
	 ...
	 +Plugin.Poetry(),
	 ...
	 ]
}

quartz/plugins/transformers/index.ts

+export { Poetry } from "./poetry"