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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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
2.PHP入门
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python怎么判断素数
2020/07/01 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
银行办公室岗位职责
2014/03/10 职场文书
优秀家长自荐材料
2014/08/26 职场文书
单身申明具结书
2015/02/26 职场文书
2015年暑假工作总结
2015/07/13 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL