控制指定单页的侧边栏显示

博客的宽屏适配是用的Fomalhaut🥝大佬教程，把非首页的page页面都隐藏了。但是后面使用hexo-douban插件后发现内容太少时一整个页面只显示左边一小点部分，不够美观。所以想让部分页面还是显示侧边栏填充一下。遂参照轻笑Chuckle控制指定单页的背景样式的办法让部分页面不显示侧边栏，作为记录方便后面使用。

参考教程

示例

修改

在使用Fomalhaut大佬宽屏适配的前提下，由于隐藏了非首页的侧边栏，先取消这个设置，指定单页隐藏侧边栏的同时可以恢复原来右下角按钮中page页面单双栏切换的功能，修改[BlogRoot]\themes\butterfly\layout\includes\layout.pug：

1 2	+ - var pageType = is_post() ? 'post' : 'page' - - var pageType = is_home() ? 'page home' : is_post() ? 'post' : 'page'

我想在每日早报、诗词、剧院、统计、友链、分类和标签页隐藏侧边栏，就指定这些单页加上不同class，修改[BlogRoot]\themes\butterfly\layout\page.pug:

extends includes/layout.pug

block content
+  - let daily_news = is_current('/daily_news/')
+  - let poem = is_current('/poem/')
+  - let theatre = is_current('/theatre/')
+  - let charts = is_current('/charts/')
+  - let link = is_current('/link/')
+  - let categories = is_current('/categories/')
+  - let tags = is_current('/tags/')
-  #page
+  #page(class=(daily_news ? 'daily_news-bg' : (poem ? 'poem-aside' : (theatre ? 'theatre-aside' :  (charts ? 'charts-aside' : (link ? 'link-aside' : (categories ? 'categories-aside' : (tags ? 'tags-aside' : ''))))))))

在自定义的css中隐藏诗词、剧院、统计、友链、分类和标签页侧边栏，同时修改我的每日早报的背景样式：

#announcement,
#archive,
#page,
#category,
#tag {
    width: 100%;
}
 
-.page:not(.page.home) .aside-content {
-    display: none;
-}

+/* 不显示特定页面的侧边栏 */
+.poem-aside ~ .aside-content,
+.theatre-aside ~ .aside-content,
+.charts-aside ~ .aside-content,
+.link-aside ~ .aside-content,
+.categories-aside ~ .aside-content,
+.tags-aside ~ .aside-content {
+    display: none !important;
+    width: auto !important;
+}
+/*早报背景样式*/
+/*https://qxchuckle.github.io/article/eb3a4679.html*/
+[data-theme="light"] .daily_news-bg{
+    background:white!important;
+}
+[data-theme="dark"] .daily_news-bg{
+    border: none!important;
+}

为了适配首页侧边栏宽度，我在[BlogRoot]\themes\butterfly\source\css_layout\aside.styl处修改了卡片宽度：

1
2
3

#aside-content
-  width: 26%
+  width: auto

复制粘贴后”+”号要删除。