Quartz4自定义
由于本人不懂前端,以下主要参考代码来源来自quartz4.0作者jacky的数字花园
添加字体
以下以手写字体为例,也可以用同样的方式添加其他若干字体,
先上效果:
添加字体及样式
推荐一个网站先: 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"