子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

怎么给 vitepress 添加点击图片放大预览功能 ​

实现点击图片放大预览功能 ​

插件介绍

​​markdown-it-custom-attrs​ 是一个 Markdown 解析器（parser）插件，用于扩展 Markdown 解析器的功能，允许用户在 Markdown 内容中添加自定义的属性（attributes）和类（class），从而实现更加灵活和个性化的 Markdown 样式定制。

vitepress 图片放大预览配置 ​

1. Step. 1: 安装依赖 ​

sh
npm i markdown-it-custom-attrs

2. Step. 在 .vitepress/config.js 中引入插件 ​

js
import mdItCustomAttrs from "markdown-it-custom-attrs";

3. Step. 3: 配置 .vitepress/config.js 文件 ​

js
import mdItCustomAttrs from "markdown-it-custom-attrs";
export default {
  markdown: {
    config: (md) => {
      // use more markdown-it plugins!
      md.use(mdItCustomAttrs, "image", {
        "data-fancybox": "gallery",
      });
    },
  },
};

Step. 4: 引入图片灯箱 js 和 css 文件 ​

  • 配置.vitepress/config.js 文件
  • 加入 head 配置
js
export default {
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css",
      },
    ],
    [
      "script",
      {
        src: "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js",
      },
    ],
  ],
};
js
export default {
  head: [
    // 引入图片灯箱 js 和 css 文件
    [
      "script",
      {},
      `
        const script = document.createElement("script");
        script.defer = "";
        script.sync = "";
        script.src = "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js";
        document.body.append(script);
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css";
        document.head.append(link);
      `,
    ],
  ],
};

Step. 5: 渲染效果 ​

markdown
<!-- ![](图片地址) -->
<img src="图片地址" data-fancybox="gallery"/>

或者

markdown
![图片描述](图片地址){data-fancybox=gallery}

查看效果 ​

test-markdown-previewtest-markdown-previewtest-markdown-preview

点击看大图

markdown
<div style="border: 1px solid silver;padding: 20px;width: 30%;">

![test-markdown-preview](https://zichin.com/blog/assets/3.test-markdown-preview.BgA6qLdN.png){data-fancybox=gallery}
![test-markdown-preview](https://zichin.com/blog/assets/3.test-markdown-preview.BgA6qLdN.png){data-fancybox=gallery}
![test-markdown-preview](https://zichin.com/blog/assets/3.test-markdown-preview.BgA6qLdN.png){data-fancybox=gallery}

</div>

参考链接 ​