让 Vuepress 支持图片放大功能

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

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

前两天接触到了 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 支持图片放大功能》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

离心力:互联网历史与数字化未来

离心力:互联网历史与数字化未来

[英] 乔尼·赖安(Johnny Ryan) / 段铁铮 / 译言·东西文库/电子工业出版社 / 2018-2-1 / 68.00元

★一部详实、严谨的互联网史著作; ★哈佛、斯坦福等高校学生必读书目; ★《互联网的未来》作者乔纳森·L. 齐特雷恩,《独立报》《爱尔兰时报》等知名作者和国外媒体联合推荐。 【内容简介】 虽然互联网从诞生至今,不过是五六十年,但我们已然有必要整理其丰富的历史。未来的数字世界不仅取决于我 们的设想,也取决于它的发展历程,以及互联网伟大先驱们的理想和信念。 本书作者乔尼· ......一起来看看 《离心力:互联网历史与数字化未来》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器