上一个主题可以在博客首部设置一张自定义的图片，也一直觉得这样的设计很漂亮，在 quartz 中没有这样的默认主题，所以在这里手动添加了这样的设计~

步骤

plugins 结构

在quartz/plugins中，定义了文章中各种内容转换的工具（transformers）、生成资源的工具（Emitters）以及发布逻辑（Fliters）。

在本次实现中，我们需要从markdown文章中读取传参featuredImage，然后将参数内容作为加载图片的 url，将图片渲染在页面上，所以我们需要像这样先给原frontmatter.ts添加一个可以识别的参数：

1
/* existing codes */
2
declare module "vfile" {
3
  interface DataMap {
4
    aliases: FullSlug[];
5
    frontmatter: { [key: string]: unknown } & {
6
      title: string;
7
    } & Partial<{
8
        tags: string[];
9
        aliases: string[];
10
        modified: string;
11
        created: string;
12
        published: string;
13
        description: string;
14
        socialDescription: string;
15
        publish: boolean | string;
16
        draft: boolean | string;
17
        lang: string;
18
        enableToc: string;
19
        cssclasses: string[];
20
        socialImage: string;
21
        featuredImage: string;
22
        comments: boolean | string;
23
      }>;
24
  }
25
}
26
/* existing codes */

components 结构

quartz 的所有主题都在quartz/components下，以此为根目录，index.ts中总结了导出的所有组件的类型，将在quartz.layout.ts中以import * as Component from "./quartz/components"的形式导入，并以Component.ArticleTitle()这样的形式使用。

所以，我们模仿相同的文件结构，在quartz/components下新建一个tsx文件FeaturedImage.tsx，内容像这样：

1
import {
2
  QuartzComponent,
3
  QuartzComponentConstructor,
4
  QuartzComponentProps,
5
} from "./types";
6
import { classNames } from "../util/lang";
7

8
const FeaturedImage: QuartzComponent = ({
9
  fileData,
10
  displayClass,
11
}: QuartzComponentProps) => {
12
  const featuredImage = fileData.frontmatter?.featuredImage;
13
  if (featuredImage) {
14
    return (
15
      <div class={classNames(displayClass, "featured-image")}>
16
        <img src={featuredImage} alt="Featured" />
17
      </div>
18
    );
19
  } else {
20
    return null;
21
  }
22
};
23

24
FeaturedImage.css = `
25
.featured-image {
26
  margin: 0.5rem 0;
27
  height: 200px;
28
  overflow: hidden;
29
}
30
.featured-image img {
31
  width: 100%;
32
  height: 100%;
33
  object-fit: cover;
34
  border-radius: 8px;
35
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
36
}
37
`;
38

39
export default (() => FeaturedImage) satisfies QuartzComponentConstructor;

再在index.ts中将FeaturedImage导入，之后在quartz.layout.ts中添加即可：

1
export const defaultContentPageLayout: PageLayout = {
2
  beforeBody: [
3
    Component.ConditionalRender({
4
      component: Component.Breadcrumbs({
5
        rootName: "主页",
6
      }),
7
      condition: (page) => page.fileData.slug !== "_index",
8
    }),
9
    Component.ArticleTitle(),
10
    Component.ContentMeta(),
11
    Component.FeaturedImage(),
12
    Component.TagList(),

之后重新构建页面，即可查看样式效果啦。

效果展示：

☆: .｡. o(≧▽≦)o .｡.:☆