让 Quartz 支持 Obsidian 的图片尺寸设置

今天在用 Quartz 构建数字花园的时候遇到了一个小问题：我在 Obsidian 里设置的图片尺寸，到了网页上就失效了。

问题是这样的

在 Obsidian 里，我们可以很方便地设置图片大小，比如：

![|500](图片.png) 设置图片宽度为 500
![|100x145](图片.png) 设置图片为 100 宽 145 高

但是当 Quartz 把笔记转成网页后，这些设置就不见了。原来是 Quartz 把尺寸信息错误地放到了图片的 alt 属性里：

<img src="图片.png" alt="|500" loading="lazy">

这样图片就显示不出我们想要的尺寸了。

解决办法

研究了一下 Quartz 的文档，发现可以通过写一个插件来解决这个问题。说是插件，其实就是一个简单的转换器，把 Obsidian 的图片语法转成正确的 HTML 代码。

第一步：写一个转换器

我在 quartz/plugins/transformers 目录下新建了一个 obsidian-images.ts 文件，代码并不复杂：

import { visit } from "unist-util-visit"
import { QuartzTransformerPlugin } from "../types"  
 
export const ObsidianImages: QuartzTransformerPlugin = () => {
  return {
    name: "ObsidianImages",
    htmlPlugins(ctx) {
      return [
        () => (tree) => {
          visit(tree, "element", (node) => {
            if (node.tagName === "img") {
              const alt = node.properties.alt as string
              if (alt?.includes("|")) {
                const [, dimensions] = alt.split("|")
                if (dimensions.includes("x")) {
                  // 处理 宽x高 格式
                  const [width, height] = dimensions.split("x")
                  node.properties.width = width
                  node.properties.height = height
                } else {
                  // 处理单一宽度格式
                  node.properties.width = dimensions
                }
                node.properties.alt = ""
              }
            }
          })
        },
      ]
    },
  }
}

这个转换器做的事情很简单：

找到所有图片标签
看看 alt 属性里有没有 | 符号
如果有，就把后面的尺寸信息提取出来
根据是否包含 x 来决定是设置宽度还是同时设置宽高

第二步：注册插件

然后在 quartz/plugins/transformers/index.ts 里导出这个插件：

export { ObsidianImages } from "./obsidian-images"

第三步：启用插件

最后在 quartz.config.ts 里加上这个插件就大功告成了：

plugins: {
  transformers: [
    // ... 其他插件
    Plugin.ObsidianImages(),
  ],
}

效果如何？

现在我在 Obsidian 里设置的图片尺寸就能正确显示在网页上了！比如：

![|500](https://example.com/image.jpg)

会变成：

<img src="https://example.com/image.jpg" width="500">

这样图片就能保持我们想要的大小了。

小结

这次的问题虽小，但解决起来还挺有意思的。通过写一个简单的插件，就让 Quartz 完美支持了 Obsidian 的图片尺寸设置。最重要的是，我们不需要改变在 Obsidian 里的写作习惯，笔记依然可以保持原样。

这也让我对 Quartz 的扩展性有了新的认识 —— 遇到不顺手的地方，我们总能找到办法改造它，让它更适合自己的需求。

🪴 微尘印记

探索