2.个人藏书馆+观影库卡片显示

步骤

1. 目录结构

2. 新建

book

• quartz/static/book-query.js`
• quartz/static/book-styles.css`
• scripts/generate-book-index.js movie
• quartz/static/movie-query.js`
• quartz/static/movie-styles.css`
• scripts/generate-movies.js

3. 引入资源

确保quartz.config.ts中有static

export default {
  configuration: {
    // ...其他配置
  },
  plugins: {
    // ...其他插件
    emitters: [
      Plugin.ContentPage(),
      Plugin.Static(), // 确保有这个
      // ...其他插件
    ],
  },
}

`

4. Head.tsx中引入css和query.js

 
{/* 在head末尾添加图书/影视卡片 */}
 
<link rel="stylesheet" href="/static/book-styles.css" />
 
<link rel="stylesheet" href="/static/movie-styles.css" />
 
<script src="/static/book-query.js" defer></script>
 
<script src="/static/movie-query.js" defer></script>
</head>
 
return Head
 
}) satisfies QuartzComponentConstructor

5. 在 package.json 中添加脚本

{
  "scripts": {
"prebuild": "npm run generate-all",
 
"preserve": "npm run generate-all",
 
"generate-books": "node scripts/generate-book-index.js",
 
"generate-movies": "node scripts/generate-movies.js",
 
"generate-all": "npm run generate-books && npm run generate-movies",
 
"build": "npx quartz build",
 
"serve": "npx quartz build --serve"
  }
}

6.推送同步obsidian和quartz

卡片显示

在obsidian中新建一个展示卡片的文档并添加如下内容

## 正在观看
<!-- 显示正在观看的影片 -->
<div data-movie-query data-status="正在观看" data-sort="添加时间" data-order="DESC"></div>
 
## 待看
<!-- 显示想看的影片 -->
<div data-movie-query data-status="待看" data-sort="添加时间" data-order="DES"></div>
 
 
## 已看
<!-- 显示已观看的影片 -->
<div data-movie-query data-status="想看"></div>