说明
本文参考自:https://segmentfault.com/a/11...
这篇文章里面需要手动写每一个图片标签,很麻烦,由于本人对vuepress有一定了解,直接在vuepress默认主题里面使用代码把每个图片手动加上了a标签,使得只需要在配置文件中配置即可,不需要再去修改每个md文件的img图片。
首先vuepress的版本:0.14.5
,这个版本可以导出默认主题。
1. 导出默认主题
vuepress 0.14版本可以把默认主题使用如下命令复制出来。
如果你的项目名称是press
,在press
同级目录下,终端输入如下命令:
vuepress eject press
DONE Copied default theme into /Users/用户名/tmp/press/.vuepress/theme.
这个命令来将默认主题的源码复制到press
目录下的.vuepress/theme
文件夹下,从而可以对默认主题进行任意的修改。需要注意的是一旦 eject,即使升级 VuePress 你也无法再获得 VuePress 对默认主题的更新。
2. 引入 fancybox
.vuepress/config.js
文件的head
标签中可以直接添加 fancybox 的 cdn,由于它依赖 jquery,所以还要引入 jquery。
module.exports = {
head: [
// add jquert and fancybox
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js' }],
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js' }],
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css' }]
],
themeConfig: {
// your config
}
}
3. 修改默认主题,添加代码
在导出的默认主题文件夹中,打开文件:.vuepress/theme/Page.vue
在Page.vue
文件的exportdefault
里面添加如下代码:
export default {
methods: {
createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
},
// 图片放大方法,用代码给img标签添加a标签
setPictureZoom () {
let img = document.querySelectorAll('p > img')
for (let i = 0; i < img.length; i++) {
if (img[i]) {
let a = document.createElement("a");
let parent = img[i].parentNode
parent.appendChild(a)
let src = img[i].getAttribute('src')
a.setAttribute('data-fancybox', '')
a.setAttribute('href', src)
a.appendChild(img[i])
}
}
}
},
mounted () {
this.setPictureZoom()
},
updated () {
this.setPictureZoom()
},
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。