Vuepress 增加图片预览功能

网上搜了一下，没有好用的插件和解决方案。比如这篇文章让 vuepress 支持图片放大功能。需要依赖 jQuery，且批量修改标签，不够优雅。于是我在网上找了一个图片预览插件viewerjs引入博客。美中不足打开图片的时候有延迟，不够自然流畅，后续看看能不能优化吧，先这样。

实现思路

两步走

1. 配置文件中引入插件文件：

bootcdn 在国内体验还不错。

// /docs/.vuepress/config.js
module.exports = {
    head: [
        ['link', { rel: 'icon', href: '/ico.ico' }],
        [
            'link',
            {
                rel: 'stylesheet',
                href: 'https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.5/viewer.min.css',
            },
        ],
        [
            'script',
            {
                src: 'https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.5/viewer.min.js',
            },
        ],
    ],
}

2. 修改主题文件，初始化插件

修改主题文件，初始化 Viewer，因为我之前自定义了 /docs/.vuepress/theme/layouts/Layout.vue，因此直接改这个布局文件即可，理论上也可以在Page.vue中初始化。

// /docs/.vuepress/theme/layouts/Layout.vue
export default {
    name: 'Layout',
    // ...
    watch: {
        $route() {
            this.$nextTick(this.viewerInit)
        },
    },
    mounted() {
        this.viewerInit()
    },
    methods: {
        viewerInit() {
            const el = document.getElementsByClassName('theme-default-content')?.[0]
            if (el) {
                console.log('存在文章')
                new Viewer(el)
            } else console.log('不存在文章，不初始化')
        },
    },
    // ...
}

大功告成。

可在这边文章中预览效果。

本文由咻咻创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jun 7,2022