NexT | 修改内容区域的宽度

发表于 分类于 Waline： 阅读次数： 本文字数： 384 阅读时长 ≈ 1 分钟

我们用 Next 主题是发现在电脑上阅读文章时内容两边留的空白较多，这样在浏览代码块时经常要滚动滚动条才能阅读完整，体验不是很好，同时觉得也不太美观，下面提供修改内容区域的宽度的方法。

HexT 主题版本：7.x

默认

NexT 对于内容的宽度的设定如下：

  • 700px，当屏幕宽度 < 1600px
  • 900px，当屏幕宽度 >= 1600px
  • 移动设备下，宽度自适应

如果你需要修改内容的宽度，同样需要编辑样式文件。

样式文件位置

  • 主题的布局定义 Hexo/themes/next/source/css/_schemes/Picses/_layout.styl
  • 样式的用户配置 Hexo/themes/next/source/css/_custom/custom.styl

所有的修改原则上尽量不要变动源代码，因此我们编辑用户文件（推荐），新增内容。

以下所有修改均为在用户配置文件中，若要修改对应主题布局，则找到相应项自行替换

Mist 和 Muse

当你使用在 Mist 和 Muse 风格时增加以下内容：

1
2
3
4
5
// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

Pisces 和 Gemini

当你使用 Pisces 和 Gemini 风格时增加以下内容：

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
.header {
  width: 80%;
  + tablet() {
    width: 100%;
  }
  + mobile() {
    width: 100%;
  }
}
.container .main-inner {
  width: 80%;
  + tablet() {
    width: 100%;
  }
  + mobile() {
    width: 100%;
  }
}
.content-wrap {
  width: calc(100% - 260px);
  + tablet() {
    width: 100%;
  }
  + mobile() {
    width: 100%;
  }
}

参考文档：

  • Mist 和 Muse：官方配置帮助-NexT-常见问题
  • Pisces 和 Gemini：代码块看起来太麻烦