内容简介:前两天接触到了但是发现图片是不能点击的。我试了下最新版本
前两天接触到了 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-fancybox
和 href
属性即可。
<a data-fancybox title="xx" href="sss">![xx](sss)</a> 复制代码
但是这样手动添加太麻烦了,并且想取消掉也不方便。
所以我写了一个 VSCode
插件,来批量格式化。
以上所述就是小编给大家介绍的《让 Vuepress 支持图片放大功能》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- jquery实现放大镜简洁代码
- jQuery:案例11 放大镜效果
- 随机放大的不规则瀑布流
- 为BlueLake主题增加图片放大效果
- Memcache UDP 反射放大攻击技术分析
- Memcache UDP 反射放大攻击技术分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
离心力:互联网历史与数字化未来
[英] 乔尼·赖安(Johnny Ryan) / 段铁铮 / 译言·东西文库/电子工业出版社 / 2018-2-1 / 68.00元
★一部详实、严谨的互联网史著作; ★哈佛、斯坦福等高校学生必读书目; ★《互联网的未来》作者乔纳森·L. 齐特雷恩,《独立报》《爱尔兰时报》等知名作者和国外媒体联合推荐。 【内容简介】 虽然互联网从诞生至今,不过是五六十年,但我们已然有必要整理其丰富的历史。未来的数字世界不仅取决于我 们的设想,也取决于它的发展历程,以及互联网伟大先驱们的理想和信念。 本书作者乔尼· ......一起来看看 《离心力:互联网历史与数字化未来》 这本书的介绍吧!
随机密码生成器
多种字符组合密码
Markdown 在线编辑器
Markdown 在线编辑器