[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fvitepress-add-image-preview":3,"surround:\u002Fposts\u002F2024\u002Fvitepress-add-image-preview":108},{"id":4,"title":5,"body":6,"canonical":79,"categories":80,"date":82,"description":83,"draft":84,"extension":85,"image":79,"meta":86,"navigation":94,"path":95,"permalink":79,"readingTime":96,"recommend":79,"references":79,"seo":101,"sitemap":102,"stem":103,"tags":104,"type":79,"updated":82,"__hash__":107},"content\u002Fposts\u002F2024\u002Fvitepress-add-image-preview.md","给你的vitepress添加图片预览功能",{"type":7,"value":8,"toc":76},"minimark",[9,19,22,33,36,45,48,56,59,67,70],[10,11,12,13],"p",{},"转载至：",[14,15,16],"a",{"href":16,"rel":17},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvitepress\u002Fissues\u002F854",[18],"nofollow",[10,20,21],{},"安装 medium-zoom",[23,24,30],"pre",{"className":25,"code":27,"language":28,"meta":29},[26],"language-bash","npm i medium-zoom\n","bash","",[31,32,27],"code",{"__ignoreMap":29},[10,34,35],{},"在 vitepress 主题配置文件中配置",[23,37,43],{"className":38,"code":40,"language":41,"meta":42},[39],"language-js","\u002F\u002F .vitepress\u002Ftheme\u002Findex.js\n\nimport mediumZoom from \"medium-zoom\"\nimport DefaultTheme from \"vitepress\u002Ftheme\"\nimport { onMounted } from \"vue\"\n\nimport \".\u002Findex.css\"\n\nexport default {\n    ...DefaultTheme,\n    setup() {\n        onMounted(() => {\n            mediumZoom(\"[data-zoomable]\", { background: \"var(--vp-c-bg)\" })\n        })\n    },\n}\n","js",".vitepress\u002Ftheme\u002Findex.js",[31,44,40],{"__ignoreMap":29},[10,46,47],{},"添加 css 样式",[23,49,54],{"className":50,"code":52,"language":53,"meta":29},[51],"language-css","\u002F* .vitepress\u002Ftheme\u002Findex.css *\u002F\n\n.medium-zoom-overlay {\n    z-index: 20;\n}\n\n.medium-zoom-image {\n    z-index: 21;\n}\n","css",[31,55,52],{"__ignoreMap":29},[10,57,58],{},"在 markdown 中使用",[23,60,65],{"className":61,"code":63,"language":64,"meta":29},[62],"language-markdown","![](path\u002Fto\u002Ffile.jpg){data-zoomable}\n","markdown",[31,66,63],{"__ignoreMap":29},[10,68,69],{},"如果您想在不显式添加{data-zoomable}的情况下为所有图像启用此功能，您可以将该 mediumZoom 调用更改为：",[23,71,74],{"className":72,"code":73,"language":41,"meta":29},[39],"mediumZoom(\".main img\", { background: \"var(--vp-c-bg)\" })\n",[31,75,73],{"__ignoreMap":29},{"title":29,"searchDepth":77,"depth":77,"links":78},4,[],null,[81],"代码","2024-01-06 17:02:26","这次我们在 vitepress 中添加图片预览功能！",false,"md",{"excerpt":87},{"type":7,"value":88},[89],[10,90,12,91],{},[14,92,16],{"href":16,"rel":93},[18],true,"\u002Fposts\u002F2024\u002Fvitepress-add-image-preview",{"text":97,"minutes":98,"time":99,"words":100},"1 min read",0.595,35700,119,{"title":5,"description":83},{"loc":95},"posts\u002F2024\u002Fvitepress-add-image-preview",[105,106],"转载","vitepress","BV7thWU8jel3nHlttma1rdW2lcE4g_NwDFDNcAivK8w",[109,114],{"title":110,"path":111,"stem":112,"date":113,"type":79,"children":-1},"TypeScript 枚举","\u002Fposts\u002F2024\u002Fts-enum","posts\u002F2024\u002Fts-enum","2022-12-05 16:32:15",{"title":115,"path":116,"stem":117,"date":118,"type":79,"children":-1},"为您的stellar添加medium-zoom","\u002Fposts\u002F2024\u002Fstellar-theme-add-medium-zoom","posts\u002F2024\u002Fstellar-theme-add-medium-zoom","2024-01-14 14:41:05",1789642593086]