主体页面
<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风格,不喜欢可以跳过
- 修改
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
- 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.md
、source\tags\index.md
、source\about\index.md
、source\link\index.md
在Page Front-matter
添加aside: false
即可
缺点:只能去除以上页面的侧边栏
方法二:
- 修改
\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'
- 修改CSS
css
/* 非首页的页面不显示侧边栏 */
.page:not(.page.home) .aside-content{
display: none;
}
/* 页面加宽 */
#archive,#page,#category,#tag{
width:100%;
}