让 Vuepress 支持图片放大功能

栏目: jQuery · 发布时间: 5年前

内容简介:前两天接触到了但是发现图片是不能点击的。我试了下最新版本

前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手。于是打算把博客从 hexo 迁移过去。

但是发现图片是不能点击的。 Markdown 在渲染的时候连 a 标签都没有添加,不仅不能直接点,也不能放大。然而我的博客中是有很多大图的,所以这个功能是刚需。

我试了下最新版本 1.x alpha 还是没有这个功能。所以直接自己动手了。

由于我并不熟悉 vue ,所以从源代码上改比较困难。

最后我使用了 fancybox 库,并开发了一个辅助 VSCode 插件。

引入 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
    }
}
复制代码

然后修改图片的 markdown

![xx](sss)
复制代码

将上面的这种格式修改为下面这种,手动添加 a 标签、 data-fancyboxhref 属性即可。

<a data-fancybox title="xx" href="sss">![xx](sss)</a>
复制代码

但是这样手动添加太麻烦了,并且想取消掉也不方便。

所以我写了一个 VSCode 插件,来批量格式化。


以上所述就是小编给大家介绍的《让 Vuepress 支持图片放大功能》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自己动手做iOS App

自己动手做iOS App

张子怡 / 电子工业出版社 / 2017-8 / 69.00

《自己动手做iOS App:从设计开发到上架App Store》为想要接触iOS 应用设计、开发的读者提供了由浅入深的详细指导。从iOS 应用制作的步骤是什么,应该使用什么软件,如何发布应用到App Store,到iOS 的设计理念是什么,如何正确书写Swift 语言,再到后端和客户端是如何交互运作的等,本书配合图示,精辟、直观地阐明了iOS 应用制作中的种种疑问。 如果你是一位第一次接触i......一起来看看 《自己动手做iOS App》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具