给muse主题加粘性边栏

发表于 2021-05-10 分类于建站阅读次数：

让你们见识一下山顶洞人的做法！

💥野性十足🤤给Muse主题增加Pisces/Gemini 那样的目录侧栏

**野路子警告！！！！！！** **野路子警告！！！！！！**

非常不靠谱的章节，没有这项需求的朋友最好直接跳过，不怎么懂码的生物也能看懂的nexT主题魔改方式里记载的东西靠谱些。

这个章节主要是提供一个思路，我开始正经了解CSS/HTML都只有这一整天的时间，内容全是我一点点试错出来的。记录下来的修改步骤或者设定有可能不定完整。也别问我为啥，因为我也不懂： 80%靠天，%20靠懂的热心网友。虽说最后效果完全是我想要的，但也有些小bug，更无法保证日后的稳定。主要是想给自己留个档+为有相似需求的人提供思路。

当然很欢迎懂的人来指正交流。

先说一下我想要的效果：我想要muse主题的博文页面上上加入在Pisces/Gemini式的边栏，并且在滚动页面时可以粘在顶端。我又只想要目录；作者信息，站点概览等都不要；目录也只是在特定博文才想要。

在这里按顺序说一下每一步做了什么，最后效果是什么。

我先从/source/css/schemes/Pisces/_sidebar.styl 里把sidebar相关的css全都复制到了我的style.styl 里。

.sidebar {
  margin-top: $sidebar-offset;
  // https://caniuse.com/css-sticky
  //position: -webkit-sticky; //现在关掉这两项才会有东西显示
  //position: sticky;
  top: $sidebar-offset;
  width: $sidebar-desktop;

  +tablet-mobile() {
    display: none;
  }

现在Muse主题上应该会出现一个边栏方块，但不会粘到顶端； muse原本的侧栏菜单按钮还在，点击后空白的菜单依旧会展开，整个页面也会随之移动。

到config 里把sidebar display 设定为display: hide

然后在style.styl 里加上这段

1
2
3

.sidebar-toggle {
  display: none;
}

这样侧栏菜单会消失，空白的菜单也不会自己打开了。

接下来调整缝合过来的侧栏方块的位置。

我在Next主题原生的代码中，侧栏是博客头部（head) 中的一部分，而我想要的效果需要侧栏变成博客”身体”的一部分。这样调整内容是无法靠CSS做到的（或者说我查不到），只能对原生HTML代码下手。

找到>node_modules>hexo-theme-next>layout>_layout.njk (.styl 文档是CSS 代码，njk 文档中是HTML代码。HTML是内容，而CSS是样式风格。)

这里要看的是 <div> 和</div> ，这两个就像三明治一样加在一起。找到sidebar相关的代码

1
2
3

{%- if theme.sidebar.display !== 'remove' %}
  {% block sidebar %}{% endblock %}
{%- endif %}

把他从 header 三明治中拿出来；

放到想要的博客”身体“ （main-inner) 旁边。

最后一步，为了让 position : sticky 正常工作，我把 sidebar 和 main-inner 夹到了同一个三明治里。我给这个div起名叫mycontent ，前面的my是防撞名的。

被我魔改过的_layout.njk 是这样的结构（footer相关保留原样）

<main class="main">
   <header class="header" itemscope itemtype="http://schema.org/WPHeader">
     <div class="header-inner">
       {%- include '_partials/header/index.njk' -%}
     </div>
   </header>
   
   <div class="mycontent">

     {%- if theme.sidebar.display !== 'remove' %}
     {% block sidebar %}{% endblock %}
     {%- endif %}
   

     {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}

     <div class="main-inner {% block class %}{% endblock %}">
       {%- include '_partials/header/sub-menu.njk' -%}
       {% block content %}{% endblock %}
       {%- include '_partials/comments.njk' -%}
     </div>
 </div>
 
 </main>

现在用F12查看，能看到侧栏小方块所属三明治确实改变了，但别的还没什么改变。

再到style.styl 里，给我的原创三明治加料

.mycontent {
  display: flex;
//  align-items: stretch; //复制来的不懂有啥用，总之留着……
//  justify-content: space-between;
//  height: auto;
 +tablet-mobile() {  //平板/手机访问时没有侧栏，正常显示
    display: block;
    width: auto;
  }
}

接下来到layout > _macro < sidebar.njk 里，把侧栏中我不想要的东西删掉，接着按照这篇教程，加入了只让特定博文有目录边栏的代码。

{% macro render(display_toc) %}
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">
    <!-- 只有在front-matter中设置 etoc = ture 的博文才会有目录 -->
    {%- set display_toc = page.toc.enable and page.etoc and display_toc %}
    {%- if display_toc %}
      {%- set toc = toc(page.content, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
      {%- set display_toc = toc.length > 1 and display_toc %}
    {%- endif %}

    <!-- <div class="sidebar-inner  {% if display_toc %}sidebar-nav-active sidebar-toc-active{% else %}sidebar-overview-active{% endif %}"> -->
    <div class="sidebar-inner">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          {{ __('sidebar.toc') }}
        </li>
        <!-- 删掉了站点概要 -->
       <!-- <li class="sidebar-nav-overview">  
          {{ __('sidebar.overview') }}
        </li> -->
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
          {%- if display_toc %}
            <div class="post-toc animated">{{ toc }}</div>
          {%- endif %}
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}

          {{- next_inject('sidebar') }}
        </div>
      </div>

      {%- if theme.back2top.enable and theme.back2top.sidebar %}
        <div class="back-to-top animated" role="button" aria-label="{{ __('accessibility.back_to_top') }}">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
      {%- endif %}
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>
{% endmacro %}

接下来回到 style.styl，加入

1 2	.sidebar-overview-active{ //关掉其他页面的sidebar display: none;

这样主页上的作者资料也关掉啦。

到这一步侧栏已经和我想象的差不多了，但还是没办法粘到顶部。

最后在stackoverflow上找到了这篇帖子，在 .sidebar {} 之中加入 top: $sidebar-offset;, 侧栏终于可以粘上去了！

现在已经达成了我设想的99%！！！

还差最后一点点：

因为加入了侧边栏，本来居中的main-inner 被顶到另一边了。可怕的是不止在博客页，其他所有页面上的main-inner (就算侧栏没有显示) 全部歪掉了！！！

啊！！！

可怕！！！！

因为Main-manner 这个板块本身动态变化也挺多，会改变宽度啊什么的，我尝试了很多方法居中效果都不好。最后跑到SNS上求助，收到了很多热心老师的建议。在这里再次感谢帮助我的老师们！！！

最后用到的是凪老师的方法：

.sidebar {
    margin-top: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
    width: 320px;
    align-self: flex-start;
    z-index: 30;
    
.main-inner {
    margin: 0 auto;
    width: 700px;
    transform: translateX(-19%);
}

z-index 让侧边栏在main-inner上面，然后 transform: translateX(xx%) 是根据屏幕宽度左右挪动，对于这种有宽度变化的板块来说正好。

虽然仔细看的话还能看出不太居中，以及屏幕变窄的话能感觉Main-inner开始渐渐变歪，但无所谓了！！！！！！！！我内心中完美的侧栏已经做好了！！！！！！！！！

最后放一下我现在所有侧边栏相关的css

.sidebar {
 margin-top: 60px;
  // https://caniuse.com/css-sticky
 position: -webkit-sticky;  //stick
 position: sticky;
//margin-right: 0px;
 //margin-left: auto;
 top: $sidebar-offset;
  width: 250px;
  //width $sidebar-desktop;
  //max-width: 200px
  align-self: flex-start
  z-index: 30;
  

+tablet-mobile() {
   display: none;
 }

//  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
//   visibility: hidden;
//  }
}



.main-inner {
  margin: 0, auto;
  //idth: 700px
  display: block;
  transform: translateX(-15%);
  //position: fixed;
  //left: calc(50% - 450px)

  +tablet-mobile() {
    display: block;
    width: auto;
    margin: auto;
    transform: none;
}
}


.sidebar-toggle {
  display: none;
}

.sidebar-inner {
  background: var(--content-bg-color);
//  border-radius: $border-radius;
//  color: red;
 box-shadow: $box-shadow;
 box-sizing: border-box;
//  color: var(--MC);
 text-align: left; 
 background-color: #F5F9F5;
 border-radius: 18px !important
}

.mycontent {
  display: flex;
//  align-items: stretch;
//  justify-content: space-between;
//  height: auto;
 +tablet-mobile() {
    display: block;
    width: auto;
  }
}
 
.sidebar-overview-active{ //关掉其他页面的sidebar
  display: none;
  
}

这一切值得吗？

更新！！！！！

关于最后提到的居中问题！！！！！

另一位老师提出了这样的方案：

aside.sidebar {
  width:0;
}
.sidebar-inner{
  width:320px;
}

不用去动main-inner就能取得居中效果！！！！！

和上面一个方法的不是，上面的方法可以微调侧栏的位置（靠博文这边还是靠浏览器墙边）这个方案的话我目前还没尝试出来要怎么改位置

但是比上面的更直接了当更简单，对于居中敏感人士也很友好QwQ

再次感谢老师们的指教！！！！！！！学到很多！！！！！！！！

💥野性十足🤤给Muse主题增加Pisces/Gemini 那样的目录侧栏

非常不靠谱的章节，没有这项需求的朋友最好直接跳过，不怎么懂码的生物也能看懂的nexT主题魔改方式 里记载的东西靠谱些。

可怕！！！！

更新！！！！！

非常不靠谱的章节，没有这项需求的朋友最好直接跳过，不怎么懂码的生物也能看懂的nexT主题魔改方式里记载的东西靠谱些。