Vue press 支持图片放大功能的实例代码


Posted in Javascript onNovember 09, 2018

介绍

VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好。然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA)。当用户在浏览站点时,可以按需加载其他页面。

前两天接触到了 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" rel="external nofollow" >![xx](sss)</a>

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

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

VScode 商店搜索 vuepress-img-format 安装即可。

Vue press 支持图片放大功能的实例代码

调用命令 img format 可以格式化当前文档的所有图片,img reset format 可以重置格式化,效果如下:

Vue press 支持图片放大功能的实例代码

当然也可以使用内置的快捷键:

快捷键 格式化 重置格式化
Windows/Linux Ctrl + Shift +8 Ctrl + Shift + 8
Mac Cmd + Shift + 8 Cmd + Shift + 9

格式完了之后就可以点击放大图片了。

Vue press 支持图片放大功能的实例代码

总结

以上所述是小编给大家介绍的Vue press 支持图片放大功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
vue动态绑定style样式
Apr 20 Vue.js
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python sep参数使用方法详解
2020/02/12 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
企业管理毕业生求职信范文
2014/03/07 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
小学班主任评语大全
2014/04/23 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
九九重阳节致辞
2015/07/31 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Python数据类型最全知识总结
2021/05/31 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android