更新前有问题问题？

本站采用 docsify渲染，他对图片的处理 是没有任何类原始的 img标签。 缺点如下：

• 图片太大，很多图片出现了锯齿；
• 图片和周边的文字没有边界，非常突兀；

第一次修改

全加了统一风格，用圆角修饰了；

结果出现了新问题，有些小图片是一个图标，例如:github 的star变得异常难看。

怎么办？

第二次修改

查找 文档说 markdown文档有支持{.classname}的做法，有人用这个方法；

那么 docsify如何做的呢？

    window.$docsify = {
      name: title,
      loadSidebar: true,
      homepage: "readme.md",
      subMaxLevel:2,
      plugins: [imgClassPlugin],
      alias: {
          '/_sidebar.md': './_sidebar.md',
      }
    };

用plugins 就可以，

imgClassPlugin 是找的正则替换

export function processMarkdownImages(content) {
    const regex = /!\[(.*?)\]\((.*?)\)(\{.*?\})?/g;
    return content.replace(regex, (match, alt, src, classInfo) => {
        if (classInfo) {
            const classNames = classInfo.match(/\.([a-zA-Z0-9_-]+)/);
            if (classNames) {
                const className = classNames[1];
                return `<img src="${src}" alt="${alt}" class="${className}">`;
            }
        }
        return match;
    });
}

// 定义 Docsify 插件
export const imgClassPlugin = function (hook, vm) {
    hook.mounted(function () {
        // 在文档挂载后，在每次渲染前执行处理逻辑
        hook.beforeEach(function (content) {
            return processMarkdownImages(content);
        });
    });
};

这样就可以了。大家看看我这张图片：

{.user-img}

具体用法，大家参考 https://www.nostrbook.com/books/c3834c0604b4e5ad66ececd756791a539c585d880864d62b0ef51e3602c482b7?title=NostrBook%E7%AB%99%E7%82%B9%E6%97%A5%E8%AE%B0#/02