Vitepress CheetSheet

VitePress官网：https://vitepress.dev/

解决VitePress首次加载慢

参考链接：解决vitepress首次加载慢（从40秒到1秒的倔强）

当我打开浏览器的控制台的答案就一目了然了，主要是element的样式文件使用的是 cdn.jsdelivr.net 的cdn，这个cdn在国内访问有点慢...

后来我换成了 cdn.staticfile.net，速度快了很多！最后能够保持在1秒以内加载完毕！

添加点击图片放大预览功能

参考链接：https://www.npmjs.com/package/markdown-it-custom-attrs

插件介绍

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

Step 1：安装依赖

npm i markdown-it-custom-attrs

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

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

Step 3：配置 .vitepress/config.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 配置：

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"}],
  ],
};