新建Css文件

写入以下代码，并inject到头部

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: 318px;
  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)
  ...

或者（4.3.1可以食用）

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
- 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_home() ? 'page home' : is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside) 
  head
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/loading', {}, {cache: true})

    - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
    - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
    - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
    if theme.background
      if page.background
        #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
      else
        #web_bg

        if page.defaultbg || page.darkmodebg
          style.
            #web_bg{
              background: #{DefaultBg} !important;
              background-attachment: local!important;
              background-position: center!important;
              background-size: cover!important;
              background-repeat: no-repeat!important;
            }
            [data-theme="dark"]
              #web_bg{
                background: #{DarkmodeBg} !important;
                background-attachment: local!important;
                background-position: center!important;
                background-size: cover!important;
                background-repeat: no-repeat!important;
              }      

    !=partial('includes/sidebar', {}, {cache: true})

    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug

        main#content-inner.layout(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              include widget/index.pug

        - var footerBg = theme.footer_bg
        if !is_post()
          if (footerBg === true)
            - var footer_bg = 'background-color: transparent;'
          else
            - var footer_bg = 'background-color: transparent;'
        else
          - var footer_bg = 'background-color: transparent;'



        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})

    else
      include ./404.pug

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    !=partial('includes/rightmenu',{}, {cache:true})
    include ./additional-js.pug

现在主页的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;
}