hexo next主题 解决首页文章间距过宽的问题

本文介绍如何解决Hexo+Next主题下首页文章间距过大的问题,通过修改_css文件中的_posts-expanded.styl,调整margin-top和margin-bottom的数值来达到理想的间距效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


hexo+next 解决首页文章间距过宽的问题


前一段时间,使用Github Page+hexo+next的方式建立过自己的个人博客 Yicheng's Page (主要是分享笔记和资源,尽量保持了英文写作,欢迎访问)
但是作为重度强迫症患者的我无法忍受首页文章之间间距过大,都超过120px了:

想要调整一下间距,奈何在Google上没有找到满意的解决方案,后来自己试着通过审查找到了css样式并进行了修改,发现可以用,就在此记录一下。


不废话过程了,直接说调整方法:

打开\themes\next\source\css\_schemes\Mist\_posts-expanded.styl ,在最后一行添加

.posts-expand .post {
  margin-top: 30px;
  margin-bottom: 30px;
}

margin-topmargin-bottom 的数值调到自己认为适合适合就好,都是0时极端情况,两篇文章会靠在一起

hexo g 然后 hexo s 预览,发现间距变小了,舒服多了



以上就是解决hexo next主题首页文章间距过宽的方法,还有其他问题可以在下方评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值