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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
jquery实现聊天机器人
Feb 08 jQuery
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
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
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
半年思想汇报
2013/12/30 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers