“凡是过去，皆为序章。” —— 莎士比亚
这是一个基于 Quartz v4 构建的个人知识库和博客网站，用于分享技术笔记、学习心得和生活感悟。
✨ 特性
- 🌱 数字花园: 将笔记和思考以网状结构组织，支持双向链接和图谱视图
- 📝 Markdown 支持: 完整支持 Obsidian 和 GitHub Flavored Markdown
- 🌙 深色模式: 自定义的明暗主题切换
- 🔍 全文搜索: 快速查找笔记内容
- 📱 响应式设计: 完美适配桌面端和移动端
- 🏷️ 标签系统: 灵活的分类和标签管理
- 📊 可视化图谱: 直观展示笔记之间的关联
- 🌍 中文优化: 针对中文内容进行本地化优化
🚀 快速开始
环境要求
- Node.js >= 22
- npm >= 10.9.2
安装依赖
npm install本地开发
npm run docs访问 http://localhost:8080 查看效果
构建部署
# 构建静态文件
npm run docs:build
# 部署到服务器
npm run deploy📁 项目结构
├── content/ # 笔记内容目录
├── quartz/ # Quartz 核心文件
├── quartz.config.ts # 主配置文件
├── quartz.layout.ts # 布局配置
└── static/ # 静态资源
⚙️ 主要配置
网站信息
- 标题: Quartz
- 域名: quartz.tph.fan
- 语言: 中文 (zh-CN)
- 时区: Asia/Shanghai
主题配置
- 字体:
- 标题: Schibsted Grotesk
- 正文: Source Sans Pro
- 代码: IBM Plex Mono
- 配色: 自定义的明暗主题配色方案
功能插件
- Front Matter 处理
- 语法高亮
- LaTeX 数学公式
- 目录生成
- 反向链接
- 标签页面
- RSS 订阅
🛠️ 自定义修改
个人资料卡片
在 quartz.layout.ts 中修改个人资料信息：
const profileCard = Component.ProfileCard({
profile: {
name: "Tanphoon",
avatar: "/static/avatar.jpg",
title: "软件工程师",
bio: "一个喜欢分享知识的人",
social: {
GitHub: "https://github.com/xtf0214",
Bilibili: "https://space.bilibili.com/387752793",
Email: "mailto:xtf0214@foxmail.com",
},
},
})主题色彩
在 quartz.config.ts 中自定义主题色彩：
theme: {
colors: {
lightMode: {
secondary: "#284b63", // 主色调
tertiary: "#84a59d", // 辅助色
// ...
},
darkMode: {
// 深色模式配置
}
}
}📝 写作指南
Front Matter 示例
---
title: "文章标题"
description: "文章描述"
date: "2024-01-01"
tags: ["标签1", "标签2"]
draft: false
---
文章内容...Markdown 语法
支持以下扩展语法：
- 双向链接:
[[笔记名称]] - 标签:
#标签名 - 脚注:
[^1] - 数学公式:
$行内公式$和$$块级公式$$ - 代码块: 支持语法高亮
- 表格: GitHub Flavored Markdown 表格
- 任务列表:
- [ ] 待办事项
🌐 部署
GitHub Pages
- 将代码推送到 GitHub 仓库
- 在仓库设置中启用 GitHub Pages
- 选择源分支和文件夹
自定义服务器
使用 rclone 部署到自定义服务器：
npm run deploy确保在 package.json 中正确配置了 rclone 命令。
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📄 许可证
本项目基于 MIT 许可证 开源。