-
@ nostr_cn_dev
2025-04-27 10:11:09更新前有问题问题？
本站采用 docsify渲染，他对图片的处理 是没有任何类原始的 img标签。 缺点如下： * 图片太大，很多图片出现了锯齿； * 图片和周边的文字没有边界，非常突兀；
第一次修改
全加了统一风格，用圆角修饰了；
结果出现了新问题，有些小图片是一个图标，例如:github 的star变得异常难看。
怎么办？
第二次修改
查找 文档说 markdown文档有支持{.classname}的做法，有人用这个方法；
那么 docsify如何做的呢？
js window.$docsify = { name: title, loadSidebar: true, homepage: "readme.md", subMaxLevel:2, plugins: [imgClassPlugin], alias: { '/_sidebar.md': './_sidebar.md', } };用plugins 就可以，
imgClassPlugin 是找的正则替换
`` js 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`; } } 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