Enjoy the good life everyday!
关闭
欢迎来PyGo个人空间 ^_^
hexo博文展示并排等多样式图片 | PyGo²

hexo博文展示并排等多样式图片

用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

  • 本文作者:mingliang.gao【一个爱老婆Python程序猿。。。。。。】
  • 本文链接: http://pygo2.top/articles/8728/
  • 版权声明: 本博客所有文章欢迎转载,转载请注明出处!
觉得有帮助 请偶坐个公交车
0%