方法一：通过自定义css实现

以下代码加入custom.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 页面宽度配置 */
/* 全局宽度 */
.layout {
  max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
  max-width: 308px;
  min-width: 294px;
}

/* 文章栏自动100%补侧边栏设置后的空位 */
.recent-posts.recent-posts.nc {
	flex-grow: 1;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
  .aside-content {
    max-width: none !important;
    padding: 0 5px 0 5px;
  }
}

看效果

1
hexo cl && hexo s

方法二：通过改系统文件实现

此方法又有两个修改的方法，A和B，如下：

A：改recent-posts和aside的屏幕所占比例

1，改主layout和recent-posts模块

首先改\themes\butterfly\source\css\_page里common.styl，把max-width改为1400px，使宽屏适配

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
#body-wrap
  display: flex
  flex-direction: column
  min-height: 100vh

.layout
  display: flex
  flex: 1 auto
  margin: 0 auto
  padding: 40px 15px
  max-width: 1400px   //这里把主layout的原始参数1200px改为1400px
  width: 100%
  
  +maxWidth900()
    flex-direction: column

  +maxWidth768()
    padding: 20px 5px

  +minWidth2000()
    max-width: 70%

  & > div:first-child:not(.nc)
    @extend .cardHover
    align-self: flex-start
    padding: 50px 40px

    +maxWidth768()
      padding: 36px 14px

  & > div:first-child
    width: 77%   //这里把recent-posts模块由74%改为77%
    transition: all .3s

    +maxWidth900()
      width: 100% !important

    if hexo-config('aside.position') == 'left'
      +minWidth900()
        order: 2

  // 隱藏aside
  &.hide-aside
    max-width: 1200px    //这里把隱藏aside后的recent-posts改大到1200px

    +minWidth2000()
      max-width: 1400px  //这里把超大分辨率屏幕的recent-posts改大到1400px

    & > div
      width: 100% !important

2，改aside

这个简单，改一点既可，找到\themes\butterfly\source\css\_layout里的aside.styl，改成以下内容即可

1
2
#aside-content
  width: 23%   //把aside模块的宽度由默认的26%改为23%，这样与recent-post页跟协调一些

B：固定aside的宽度，使recent-posts宽度自适应，方法如下

1，固定aside

以下是原始参数

1
2
#aside-content
  width: 26%

改为以下参数

1
2
3
#aside-content
  max-width: 308px;
  min-width: 294px;

2，recent-posts可以保持方法一的参数不变

这两个方法均不是太完美，方法一假如超大分辨率或者超小分辨率的时候aside变得稍微有点奇怪，而方法二也是一样，只是表现不同而已

看效果

1
hexo cl && hexo s

方法三：参考icat大佬

宽屏适配教程

https://meuicat.com/blog/38/

以下代码加入custom.css

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
.layout{
    width: 100%;
    max-width:1400px;
}
/* 重新定义宽度 */

.layout > div:first-child {
    width: 100%;
}
#post {
    width: 78%;
}
.aside-content {
    max-width: 312px;
    min-width: 300px;
}
.layout.hide-aside {
    max-width: 1400px;
}
/* 定义是否侧边栏的宽度 */

#recent-posts > .recent-post-item {
    height: 19em;
    border: var(--style-border);
}
#recent-posts > .recent-post-item >.recent-post-info {
    padding: 0 56px;
    width: 64%;
}
@media screen and (max-width: 768px) {
    #recent-posts > .recent-post-item {
        height: auto;
    }
    #recent-posts > .recent-post-item >.recent-post-info {
        padding: 20px 20px 30px;
        width: 100%;
        text-align: center;
    }
}
/* 主页文章列表图片宽度 */