对Markdown默认的图片显示效果不满意,尤其显示宽度小于高度的照片时,整个文章的排版显示不舒服;如果打算连续显示多张大小不一的图片,那效果更是糟糕的一塌糊涂。所以,加入一个第三方图片浏览是很有必要的!!
Github搜索找到了blueimp Gallery,star,fork比较高搜索结果排名第一。简单测试后,发现非常容易使用,并且效果不错!支持手机浏览!
项目地址:https://github.com/blueimp/Gallery#requirements
非常简单,看项目README很快可以搞定,我使用的是Lightbox效果,配置步骤:
网页头引入样式:
将代码段落加入网页body中:
在body底部加入:
上述代码后面加入script,处理点击事件:
最后,创建图片列表即可(注意,最好使用大小相同的缩略图)
还有其它的样式和配置项可选,具体内容可参考项目README。
我采用了非常简单粗暴的方式,将2,3,4,5的代码直接加入到post.hbs
、default.hbs
等模版。在需要的地方添加图片列表代码即可。
利用ThisService
,写了一个简单的自动生成代码的脚本做为服务,之后在KeyBoard设置中为该服务绑定快捷键。
只需要按一次快捷键,再修改图片链接即可。
欢迎提出更便捷的方法
我使用七牛云存储做为图片空间,七牛的数据处理功能可以完美解决这一问题。只需创建一个图片样式,定义好剪裁方式、大小、图片质量、格式。最后,通过:
http://绑定域名/文件名称 + 分隔符 + 处理样式名 如:http://space.qiniudn.com/sample.jpg/style.com.jpg
的方式,即可得到缩略图。