hexo next 主题修改底部微信二维码显示尺寸

打算把底部微信二维码换成长方形带简介的那种,无奈原来是正方形的,展示出来就是很小的一个,本文记录适配方法。

设置前的效果:

设置前的效果

显示效果很差,一点点一个图片在那!

修改文件:themes/next/layout/_macro/wechat-subscriber.swig

修改前:

1
2
3
4
<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
<img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: 200px; max-width: 100%;"/>
<div>{{ theme.wechat_subscriber.description }}</div>
</div>

修改后:

1
2
3
4
<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
<img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: auto; height:250px; max-width: 100%;"/>
<div>{{ theme.wechat_subscriber.description }}</div>
</div>

主要是修改了第二行,图片的 style 属性,设置了高度为 200,并将宽度设置为了自动。

设置后的效果:

设置后的效果

hoxis wechat
一个脱离了高级趣味的程序员,关注回复1024有惊喜~
赞赏一杯咖啡
  • 本文作者: hoxis | 微信公众号【不正经程序员】
  • 本文链接: https://hoxis.github.io/hexo-next-wechat-code.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!
  • 并保留本声明和上方二维码。感谢您的阅读和支持!
0%