Skip to content

主体页面

<main class="layout" id="content-inner">...</main> 内的页面,即主体内容+侧边栏区域

主体页面加宽

原生主题主体页面最大宽度为1200px,两侧比较空旷,有点浪费空间,加宽到1400px后也更适合双栏文章卡片布局

css
/*中间部分加宽*/
.layout {
    max-width: 1400px;
}
/*左边部分宽度调整*/
.layout>div:first-child {
    width: 77%;
}
/*右边侧边栏宽度调整*/
#aside-content {
    width: 23%;
}
/* 隐藏侧边栏时中间部分加宽 */
.layout.hide-aside {
    max-width: 1200px;
}

导航栏两边与中间卡片两边对齐,Heo风格,不喜欢可以跳过

  1. 修改themes\butterfly\layout\includes\header\nav.pug#nav下插入一个#nav-group子元素盒子作为下面元素的父元素,方便调整导航栏左右宽度
pug
nav#nav
  #nav-group
    span#blog-info
      a(href=url_for('/') title=config.title)
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo))
        if theme.nav.display_title
          span.site-name=config.title
      
    #menus
      if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
        #search-button
          a.site-page.social-icon.search(href="javascript:void(0);")
            i.fas.fa-search.fa-fw
            span=' '+_p('search.title')
      !=partial('includes/header/menu_item', {}, {cache: true})

      #toggle-menu
        a.site-page(href="javascript:void(0);")
          i.fas.fa-bars.fa-fw
  1. css调整
css
/* 限制导航栏内容最大宽度 */
#nav-group {
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
}

/* 导航栏两边留出相同宽度 */
@media screen and (min-width: 1400px) {
    #nav {
        padding: 0 calc((100% - 1400px + 2rem)/ 2)
    }
}
@media screen and (max-width: 1400px) {
    #nav {
        padding: 0 16px;
    }
}

隐藏侧边栏

侧边栏默认在所有页面显示,设置仅在首页和文章页显示

方法一(主题自带配置): 分别修改source\categories\index.mdsource\tags\index.mdsource\about\index.mdsource\link\index.mdPage Front-matter添加aside: false即可

缺点:只能去除以上页面的侧边栏

方法二:

  1. 修改\themes\butterfly\layout\includes\layout.pug
diff
- 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'
  1. 修改CSS
css
/* 非首页的页面不显示侧边栏 */
.page:not(.page.home) .aside-content{
    display: none;
}
/* 页面加宽 */
#archive,#page,#category,#tag{
    width:100%;
}