DCBJ

部署 Quartz

3 min read

Official Guide

Quartz requires at least Node v22 and npm v10.9.2 to function correctly. Ensure you have this installed on your machine before continuing.

Then, in your terminal of choice, enter the following commands line by line:

git clone https://github.com/jackyzha0/quartz.git # 需要注意网络连接，有时候即使能访问github网页但是在clone时也会很卡
cd quartz
npm i
npx quartz create

This will guide you through initializing your Quartz with content. Once you’ve done so, see how to:

  1. Writing content in Quartz
  2. Configure Quartz’s behaviour
  3. Change Quartz’s layout
  4. Build and preview Quartz
  5. Sync your changes with GitHub
  6. Host Quartz online

If you prefer instructions in a video format you can try following Nicole van der Hoeven’s video guide on how to set up Quartz!

关键点：网络通畅！！！

Basic Custom Settings

关于界面样式

初步修改字体和名称 quartz.config.ts 中

pageTitle: "DCBJ",  // line 11
body: "Noto Serif SC",  // line 27

访问 github 速度还是很慢，切换 ip 完成后续步骤，GPT 建议添加 CNAME 文件到根目录，并添加 www 二级域名解析到 pridewood.github.io，不知是否是这部分内容生效，目前可以访问，浏览器提示不安全，手机 Safari 可访问，还需要等待证书生效

还需修改

  • quartz-static 里的图标，要保持名称与原来一致
  • 添加到 iOS 桌面自动生成图标代码、全屏显示，在 quartz-components-head.tsx 中

下方代码添加在 const iconPath = joinSegments(baseDir, "static/icon.png") 下一行

const appleIconPath = joinSegments(baseDir, "static/apple-touch-icon.png")

下方代码添加在  <meta name="generator" content="Quartz" /> 之后

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content={title} />
  • 页脚内容在 layout.ts footer 部分
links: {
  GitHub: "https://github.com/PrideWood",
  "douban": "https://www.douban.com/people/PW2018",
  "bilibili": "https://space.bilibili.com/28065777",
  • 更改 index 显示的标题，在 yaml 中写入
---
title: Welcome to DCBJ
description: 分享我的学习笔记与探索
publish: true
---
  • 更改字体颜色也在 quartz.config.ts 中，不过要搞清楚 color 下面各种颜色的命名分别对应哪部分文字，需要在 quartz-styles-base.scss 中搞清楚，可以在初期进行测试，如果已经部署好了不要轻易改变

Graph View