VitePress为图片增加Fancybox效果

VitePress 图片放大预览配置可以用markdown-it-custom-attrs来实现。markdown-it-custom-attrs是基于markdown-it 可设置自定义属性的插件。

Step. 1: 安装依赖

npm i markdown-it-custom-attrs

Step. 2: 引入插件

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://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/4.0.31/fancybox.min.css" },],
		["script", { src: "https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/4.0.31/fancybox.umd.js" }],
	]
}

经过验证,使用5.x版本是没有办法生效的。

Step. 5: 渲染效果

<!-- ![](图片地址) -->
<img src="图片地址" data-fancybox="gallery"/>
本条目发布于。属于软件分类。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复