用markdown语法去写博文的时候,发现图片怎么调试怎么不能并排,博客采用Hexo+Next搭建,上网各种查资料,终于解决,在此记录上分享给大家。
使用gp标签引用要展示的图片地址,这个并列展示效果可以在,theme/next/scripts/tags/group-pictures.js文件中进行选取,话说多说,直接上代码:1
2
3
4
5{% gp 3-3 %}
<img src="t1.jpeg" width="450" alt="图片说明"/>
<img src="t2.jpeg" width="450" alt="图片说明"/>
<img src="t3.jpeg" width="800" alt="图片说明"/>
{% endgp %}
博客正文显示需要修改一下文件代码,themes\next\source\css_common\components\tags\group-pictures.styl样式文件中更改代码如下:1
2
3
4
5
6.page-post-detail .post-body .group-picture-column {
// float: none;
margin-top: 10px;
// width: auto !important;
img { margin: 0 auto; }
}
设置好了之后,hexo g一下,刷新一下就会看到效果。
在gp标签可以使用img标签、![]()也可以这样显示图片,使用img标签的好处就在于自定义样式。
问题解决原文:https://github.com/iissnan/hexo-theme-next/issues/395