修改hexo博客next主题文章页面宽度

现在很多显示屏都是宽屏的,尤其是台式机配的屏幕,比例比横宽比例比笔记本要大很多,这样一来就导致了next主题默认的配置中,文章的两侧留白太多,阅读体验不好。可以通过修改next主题的文章页面宽度来解决。

方法一

1.打开\themes\next\source\css\_common\components\post\post-expand.styl,找到:

1
@media (max-width: 767px)

修改为:

1
@media (max-width: 1080px)

2.打开\themes\next\source\css\ _variables\base.styl文件,找到:

1
2
3
$main-desktop                   = 960px
$main-desktop-large = 1200px
$content-desktop = 700px

修改为:

1
2
3
$main-desktop                   = 1080px
$main-desktop-large = 1200px
$content-desktop = 810px

之后再重新生产博客,页面留白就合适了。

方法二

方法二手动修改样式,这样感觉效果更好

\themes\next\source/css/_schemes/Picses/_layout.styl文件末尾添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 以下为新增代码!!修改post宽度
header{ width: 80% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 80%; }
.content-wrap { width: calc(100% - 260px); }

.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}

法二参考博客链接

-------------本文结束感谢您的阅读-------------