内容简介:前两天接触到了但是发现图片是不能点击的。我试了下最新版本
前两天接触到了 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 反射放大攻击技术分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
自己动手做iOS App
张子怡 / 电子工业出版社 / 2017-8 / 69.00
《自己动手做iOS App:从设计开发到上架App Store》为想要接触iOS 应用设计、开发的读者提供了由浅入深的详细指导。从iOS 应用制作的步骤是什么,应该使用什么软件,如何发布应用到App Store,到iOS 的设计理念是什么,如何正确书写Swift 语言,再到后端和客户端是如何交互运作的等,本书配合图示,精辟、直观地阐明了iOS 应用制作中的种种疑问。 如果你是一位第一次接触i......一起来看看 《自己动手做iOS App》 这本书的介绍吧!