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获取地址栏参数
Dec 22 Javascript
js function定义函数使用心得
Apr 15 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
php实现ping
2006/10/09 PHP
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
PageFactory设计模式基于python实现
2020/04/14 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python之变量类型和if判断方式
2020/05/05 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
代理班主任的自我评价
2014/02/04 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python