参考教程

Fomalhaut🥝
博客宽屏适配
Ariasaka
Hexo Butterfly宽屏适配指北

添加css样式

在[BlogRoot]\source\css\custom.css中添加以下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 全局宽度 */
.layout {
    max-width: 1400px;
}

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

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

区分首页/分页适配

不想再非首页的地方显示侧边栏，那就需要给非首页的页面加上标记，修改
[BlogRoot]\themes\butterfly\layout\includes\layout.pug为以下内容：

1
2
3
4
5
6
7
8
9
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- - var pageType = is_post() ? 'post' : 'page'
+ - var pageType = is_home() ? 'page home' : is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  ...

现在主页的class就变成page home了，我们再在custom.css加入如下css，主题就能智能区分主页和分页了，可以自动选择卡片显示：

1
2
3
4
5
6
7
8
9
10
/* 除了首页以外其他页面隐藏卡片，并采用宽屏显示 */
#archive,
#page,
#category,
#tag {
  width: 100%;
}
.page:not(.page.home) .aside-content {
  display: none;
}