0%

hexo 修改 NexT主題的文章頁面寬度

發表於 更新於 分類於

好的，一開始不懂事安裝到中文版，覺得文章右欄寬度過窄，因此特意找了方法改

後來改裝的官方 NexT 版本完全沒有問題，RWD 體驗也很棒

修改 _layout.styl

參考文章中提到兩種方法，第一種照它的參數調整，左右兩欄會出現空隙，因此用第二種，這個做法不會動到原本的配置，較為推薦

本站調整參數參考 kevin 大大的網站配置，RWD 仍有不一樣的地方，若要還原一模一樣，可自行修改

打開 \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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
header{
  position: relative;
}
header.post-header {
  width: auto !important;
}
.content-wrap {
  width: calc(100% - 252px);
}

@media (min-width: 1600px){

  .container .main-inner, .header {
    width: 73%;
  }
  .container .header-inner {
    width: 73%;
  }
}

@media (min-width: 1200px){
  .container .main-inner, .header {
    width: 1160px;
  }
  .container .header-inner {
    width: 240px;
  }
}

.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;
  }
}

留白就會較合適，同時也有 RWD 了

本文參考
https://ihaoming.top/archives/9a935f57.html