MyHomeLab：10-使用Quartz搭建个人知识图谱

10-使用Quartz搭建个人知识图谱

之前一直使用hexo将md文件搭建为博客，但其实我的笔记内容更多偏向于一个个的知识库，因此计划将网页从hexo的博客切到Quartz去。

Quartz官网

构建一个Quartz的标准容器

构建一个标准的Quartz容器，配置好环境，不带自定义配置的。

# node环境镜像
FROM node:22-alpine AS build-env
# 1. 安装完整的 GNU coreutils 替换 BusyBox 的 env
RUN apk add --no-cache git coreutils
# 安装 quartz
WORKDIR /usr/src/
RUN git clone https://github.com/jackyzha0/quartz.git
WORKDIR /usr/src/quartz
RUN npm i
RUN npx quartz create -X new -l absolute

docker image build -t alfredquartz:latest .

修改配置文件

在git仓库中新建一个QuartzConfig目录，用于存放个人的Quartz配置文件，后续使用这些配置来构建Quartz容器。

# node环境镜像
FROM alfredquartz:latest AS build-env
ENV LANG C.UTF-8
 
WORKDIR /usr/src/quartz/content
# 复制当前文件夹下面的文件到content中
COPY ./index.md ./index.md
#COPY other files
 
 
# 修改配置文件
WORKDIR /usr/src/quartz
COPY ./QuartzConfig/quartz.config.ts ./quartz.config.ts
COPY ./QuartzConfig/quartz.layout.ts ./quartz.layout.ts
 
# 编译为静态文件
RUN npx quartz build 
 
# 配置nginx
FROM nginx:latest
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /etc/nginx/conf.d
COPY ./QuartzConfig/quartz.nginx.conf ./quartz.nginx.conf
WORKDIR /usr/share/nginx/html
# 把上一部生成的HTML文件复制到Nginx中
COPY --from=build-env /usr/src/quartz/public /usr/share/nginx/html
EXPOSE 80 443

注意要新建个quartz.nginx.conf的文件，配置nginx，因为quartz生成的连接是不带.html后缀的，所以需要nginx配置支持下。

server {
    listen 80;
    server_name alfredty.com;
    root /;
    index index.html;
    error_page 404 /404.html;
 
    location / {
        try_files $uri $uri.html $uri/ =404;
    }
}

排序修改

默认的排序是title排序，我希望按照文件标题排序

对于索引列表界面：

需要修改quartz.config.ts

Plugin.ContentPage(),
      Plugin.FolderPage({
        sort:(a,b)=>{
          return a.slug.localeCompare(b.slug, 'zh-CN', {
            numeric: true,
            sensitivity: "base",
          });
        }
      }),

对于左侧的文件列表：

需要改quartz.layout.ts的Component.Explorer函数，注意有两个同名函数都要改

Component.Explorer({
        sortFn: (a, b) => {
        // 1. 文件夹优先
        if (a.isFolder && !b.isFolder) return -1;
        if (!a.isFolder && b.isFolder) return 1;
 
        const nameA = a.slugSegments?.length ? a.slugSegments[a.slugSegments.length - 1] : a.displayName;
        const nameB = b.slugSegments?.length ? b.slugSegments[b.slugSegments.length - 1] : b.displayName;
        
        // 2. 文件/文件夹：按名称排序
        return nameA.localeCompare(nameB, 'zh-CN', {
          numeric: true,
          sensitivity: "base",
        });
      },
    }),