让vuepress支持图片放大功能

说明

本文参考自：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()
    },
}