hexo美化 | hexo页面宽幅调整

本教程前置操作：

  • 引入自定义csscustom.css

最近看到安知鱼的博客页面宽幅比默认的宽的多，扩大了可视区域，提高了大屏幕的阅读效率。后来在Eacls 的美化教程中找到了思路。

F12后发现了影响页面宽幅的关键因素

可以看出，页面宽幅取决于custom.css中的

1
2
3
.layout {
    max-width: 1400px;
}

在我魔改的关于界面，由于设置隐藏侧边栏，页面宽幅取决于

1
2
3
.layout.hide-aside {
    max-width: 1310px;
}

由此，在自定义引入的css里，添加如下语句

1
2
3
4
5
6
7
8
/*文章页卡片宽幅占比*/
.layout {
    max-width: 1400px;
}

.layout.hide-aside {
    max-width: 1310px;
}

自行修改需要的宽度即可更改页面宽幅。