[{"data":1,"prerenderedAt":111},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fstellar-theme-add-medium-zoom":3,"surround:\u002Fposts\u002F2024\u002Fstellar-theme-add-medium-zoom":100},{"id":4,"title":5,"body":6,"canonical":76,"categories":77,"date":79,"description":76,"draft":80,"extension":81,"image":82,"meta":83,"navigation":84,"path":85,"permalink":76,"readingTime":86,"recommend":76,"references":91,"seo":95,"sitemap":96,"stem":97,"tags":98,"type":76,"updated":79,"__hash__":99},"content\u002Fposts\u002F2024\u002Fstellar-theme-add-medium-zoom.md","为您的stellar添加medium-zoom",{"type":7,"value":8,"toc":67},"minimark",[9,14,18,22,25,29,35,38,41,52,56,59],[10,11,13],"h2",{"id":12},"stellar-提供的图片组件是很强大的为什么我不使用呢","Stellar 提供的图片组件是很强大的，为什么我不使用呢？",[15,16,17],"p",{},"有时候我需要将 markdown 文件在各平台中都发布一次，使用 Stellar 自定义的图片组件其他平台不识别。发布时还得手动改",[10,19,21],{"id":20},"为什么要添加这个插件呢","为什么要添加这个插件呢？",[15,23,24],{},"Stellar 提供的图片预览真的很不错，但是为了与其他平台进行兼容，不得不使用原生的 markdown 使用方式。我又想使用图片预览，就添加了这个插件",[10,26,28],{"id":27},"效果示例","效果示例：",[30,31,32],"blockquote",{},[15,33,34],{},"点击下面的图片查看效果",[10,36,37],{"id":37},"插件添加",[15,39,40],{},"直接创建一个 zoom-img.js 文件，写入以下内容",[42,43,49],"pre",{"className":44,"code":46,"language":47,"meta":48},[45],"language-js","\"use strict\"\n\n\u002F\u002F inject font\nhexo.extend.injector.register(\"head_end\", () => {\n    return `\n    \u003Cstyle>\n    .medium-zoom-overlay {\n      z-index: 20;\n    }\n    .medium-zoom-image {\n      z-index: 21;\n    }\n    \u003C\u002Fstyle>\n    \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmedium-zoom@1.1.0\u002Fdist\u002Fstyle.min.css\" rel=\"stylesheet\">\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmedium-zoom@1.1.0\u002Fdist\u002Fmedium-zoom.min.js\">\u003C\u002Fscript>\n  `\n})\nhexo.extend.injector.register(\"body_end\", function () {\n    return `\n  \u003Cscript>\n    mediumZoom(\".l_body img\", { background: \"var(--site-bg)\" })\n  \u003C\u002Fscript>\n  `\n})\n","js","",[50,51,46],"code",{"__ignoreMap":48},[10,53,55],{"id":54},"使用","使用：",[15,57,58],{},"按照正常 markdown 图片书写方式",[42,60,65],{"className":61,"code":63,"language":64,"meta":48},[62],"language-markdown","![暗色主题](\u002Fimages\u002Fposts\u002F110247187-f1eb6780-7fa5-11eb-9258-620309e20961.png)\n","markdown",[50,66,63],{"__ignoreMap":48},{"title":48,"searchDepth":68,"depth":68,"links":69},4,[70,72,73,74,75],{"id":12,"depth":71,"text":13},2,{"id":20,"depth":71,"text":21},{"id":27,"depth":71,"text":28},{"id":37,"depth":71,"text":37},{"id":54,"depth":71,"text":55},null,[78],"代码","2024-01-14 14:41:05",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adb9eed32c-78.webp",{},true,"\u002Fposts\u002F2024\u002Fstellar-theme-add-medium-zoom",{"text":87,"minutes":88,"time":89,"words":90},"2 min read",1.16,69600,232,[92],{"title":93,"link":94},"medium-zoom","https:\u002F\u002Fgithub.com\u002Ffrancoischalifour\u002Fmedium-zoom",{"title":5,"description":76},{"loc":85},"posts\u002F2024\u002Fstellar-theme-add-medium-zoom",[],"khR2Y9Shc2E_403kh0GqhBZdJlEBAwdrf9pcCXtgYbw",[101,106],{"title":102,"path":103,"stem":104,"date":105,"type":76,"children":-1},"给你的vitepress添加图片预览功能","\u002Fposts\u002F2024\u002Fvitepress-add-image-preview","posts\u002F2024\u002Fvitepress-add-image-preview","2024-01-06 17:02:26",{"title":107,"path":108,"stem":109,"date":110,"type":76,"children":-1},"RESTful 风格设计","\u002Fposts\u002F2024\u002Fnest-restful-api-design","posts\u002F2024\u002Fnest-restful-api-design","2024-01-20 22:56:21",1789642593042]