Tale 开源博客加入图片预览

/ 前端 / 没有评论 / 384浏览

问题

在写博客的时候进程需要引入一些图片, 然后这个博客 也就是 Tale 没有加入这个功能, 我通过在 issues 中找到有人说可以用 zoom实现 issues通道, 记录一下我的方法.

实现

zoom的使用方法github上也有说明, 需要引入一个css 下载, 一个js 下载, 还依赖bootstraptransition.js 下载

<link href="css/zoom.css" rel="stylesheet">

<script src="js/zoom.js"></script>
<script src="js/transition.js"></script>

并且 img标签需要有属性 data-action=zoom

<img src="img/blog_post_featured.png" data-action="zoom">

使用

将上面提到的jscss放到程序静态资源目录下, 然后在使用的主题中引入.

我在header中引入css

<link href="${theme_url('/static/css/zoom.css')}" rel="stylesheet">

footer中引入js

<script src="${theme_url('/static/js/zoom.js')}"></script>
<script src="${theme_url('/static/js/transition.js')}"></script>

引入之后还需要加入两行脚本, 给img标签加入data-action=zoom属性

$('.main-content').find('img').attr('target', '_blank');
$('.main-content').find('img').attr('data-action', 'zoom');

到此就结束了, 验证完美成功. 点击下图测试

点击测试