猹的魔改日记-文章页抛弃卡片、丢弃小菜单以及布局重构

温馨提示：本日记本只提供魔改参考，并不做通用处理，很多源码修改都需要根据自己博客做小小微调

另外在修改源码时注意做好备份处理。本帖只提供思路与方法，如果哪里炸了，请检查语法与缩进等，猹概不负责啦！

本篇特别提示：这次的魔改修改了bf的主要结构，并对一些大的布局样式进行了flex弹性盒子的全面替换，不建议进行跟随魔改（我自己都不记得我改的一些细节）

重构的最主要目的还是原本容易被人忽略的目录模块。找到一个好的目录布局设计可不容易，bf原先的设计也的确不适合我。在zhheo的推荐下，选用了少数派的目录设计。

少数派的设计逻辑说实在很戳我的心，然后我脑子一抽决定给他加个当前标题居中显示。。。再然后折腾了几天就是现在这样了。

但是折腾这个目录的关键在于，如何保证其自适应良好。采取与小菜单相同的浮动窗口肯定是不好用的，一不小心可能就会变成这个样子（拿同学在做的博客系统举个栗子（反正目录是我的设计））

如果要保证文章板块与目录间天然的自适应，最好的方式还是在左右侧各开辟一个 div 盒子，这样更可靠一点。原本 butterfly 主题的源码部分，是这样的：

<div id="mainbody">
  <main class="layout hide-aside" id="content-inner">
    <div id="post">...</div>
  </main>
</div>

并且对main部分限定了最大宽度1000px，在双栏布局下双栏也被严格限制在这个大小里，属实是对魔改的发挥起到了一定的限制。故而更改其结构是十分必要的事。于是目标结构如下：

  <div id="mainbody">
+   <div id="content_leftside">...</div>
    <main class="layout hide-aside" id="content-inner">
      <div id="post">...</div>
    </main>
+   <div id="content_rightside">...</div>
  </div>

此后，显然就可以直接在新开辟的content_rightside加点料。如果只是建立起类似样式的目录倒是小事，实现当前标题的恒定居中才是复杂的东西。

最后是一些功能按键。回到顶部这个功能显然还是放在类似小彩单的位置合适，样式直接参考fluit主题的按钮即可。而原本的作者卡片我决定提取社交按钮以及一些功能按键，在左侧也形成一个居中对称的设计来进行视觉上的平衡，魔改思路就此完成。

block content_rightside
  - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
  #content_rightside
    #rightside-toc
      .toc-box
        if (page.encrypt == true)
          .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
        else 
          .toc-content!=toc(page.content, {list_number: tocNumber})
    #rightside-button
      button#rightside-go-up(type="button" title=_p("rightside.back_to_top"))
        i.fas.fa-arrow-up

为了方便自适应，按键也一并写在content_rightside

block content_leftside
  #content_leftside
    #left_menu
      //- 联系方式
      if(theme.social)
        .leftside-social
          !=fragment_cache('social', function(){return partial('includes/header/social')})
      //- 阅读进度
      .leftside-contents
        span#read-percent 0
      //- 跳转评论
      .leftside-comment
        a(href="#post-comment" title="要去留言吗？")
          i.fa-lg.fas.fa-comment
      .leftside-qq(title="来糖果屋聊天噻！")
        i.fa-lg.fas.fa-qrcode
      .leftside-rmb
        a(title="柿还在施工的捐赠页！不给看！")
          i.fa-lg.fas.fa-money-check-dollar
    #left_display
      .candy_qrcode
        img(src="./img/candy-qr.png")

#mainbody
  display: flex
  #post
    background: none
    box-shadow: none
    &:hover
      box-shadow: none
  #content_leftside
    flex: 1
    width: fill-available
    width: -webkit-fill-available
    display: flex
    flex-direction: row-reverse
    #left_menu
      top: -1rem
      opacity: 0
      pointer-events: none
      transition: all 0.3s ease-in-out
      position: fixed
      display: flex
      height: 100%
      width: 1.5rem
      padding: 0.5rem
      margin: 0 auto
      flex-direction: column
      justify-content: center
      align-items: center
      translate: -0.7rem 0
      i
        color: #000
      .leftside-social
        text-align: center
        opacity: 0.7
        width: 1.5rem
        margin: 0.4rem
        transition: all 0.5s
        .fa-fw
          margin: 0.5rem 0
          transition: all 0.3s
          transform: scale(1.3)
        &:hover
          opacity: 1
      .leftside-contents
      .leftside-comment
      .leftside-qq
      .leftside-rmb
        text-align: center
        margin-bottom: 0.25rem
        opacity: 0.7
        width: 1.5rem
        height: 1.5rem
        font-weight: bold
        transition: all 0.5s
        a
          font-weight: bolder
        .fas
          margin: 0.5rem 0
          width: 1.25em
        .fas::hover
          transform: scale(1.3)
        &:hover
          opacity: 1
      .leftside-contents
        border-radius: 1rem
        box-shadow: 0 0 5px #000
        margin-bottom: 0.5rem
    #left_display
      // box-shadow: 0 0 5px #000
      width: inherit
      height: 100%
      margin-right: 3rem
      display: flex
      align-items: center
      position: fixed
      top: -0.62rem
      flex-direction: row-reverse
      .candy_qrcode
        transition: all 0.3s ease-in-out
        opacity: 0
        pointer-events: none
        max-width: 9rem
        width: 100%


  #content_rightside
    flex: 1
    width: fill-available
    width: -webkit-fill-available
    display: flex
    flex-direction: row
    #rightside-toc
      top: -1rem
      opacity: 0
      pointer-events: none
      transition: all 0.3s ease-in-out
      position: fixed
      display: flex
      height: 100%
      width: inherit
      padding: 0.5rem
      flex-direction: row
      align-items: center

.item-headline
        font-size: 1rem
        font-weight: bold
        display: flex
        flex-direction: column
        span
          margin-left: 0.5rem
      span.toc-text
        color: #000
      .toc-box
        height: 10rem
        width: 100%
        // box-shadow: 0 0 5px #000
        overflow: hidden
      .toc-content
        translate: 0 4.25rem
        transition: all 0.5s
        // height: 100%
      ol
        padding: 0
        margin: 0        
        list-style-type: none
      li::marker
        content: none
      li::before
        float: left
        // counter-increment: section
        // content: counters(section,".") " "
      .toc
        font-weight: bold
        width: 100%
        height: inherit
        overflow-y: scroll
        overflow-x: hidden
        // height: 10rem
        margin-top: 0.1rem
        // padding-left: 0
        list-style-type: none
        .toc-child
          // padding: 0
          list-style-type: none
      .toc::-webkit-scrollbar
        width: 0 !important
      .toc-link
        line-height: 1.5rem
        max-height: 1.5rem
        white-space: nowrap
        display: block
        // border-left: 0.1rem solid transparent
        color: var(--btn-bg)
        transition: all 0.5s
        padding-left: 0.5rem
        span.toc-text
          text-overflow: ellipsis
          color: #000
        &:hover span.toc-text
          color: #000
        &.active
          transform: scale(1.3)
          transform-origin: 2.5rem 0.75rem
          font-weight: bolder
      .toc-item
        transition: all 0.5s ease-in-out
        opacity: 0.5
        // 目录缩进结构
        &.toc-level-1
          &:before
            content: " "
            margin: 0.65rem 0.4rem 0.65rem 0
            width: 1rem
            height: 0.2rem
            border-radius: 0.1rem
            background: #000
        &.toc-level-2
          &:before
            content: " "
            margin: 0.65rem 0.7rem 0.65rem 0
            width: 1rem
            height: 0.2rem
            border-radius: 0.1rem
            background: #000
        &.toc-level-3
          &:before
            content: " "
            margin: 0.65rem 1.2rem 0.65rem 0
            width: 0.8rem
            height: 0.2rem
            border-radius: 0.1rem
            background: #000
        &.toc-level-4
        &.toc-level-5
        &.toc-level-6
          &:before
            content: " "
            margin: 0.65rem 1.7rem 0.65rem 0
            width: 0.6rem
            height: 0.2rem
            border-radius: 0.1rem
            background: #000


        &.active
          transition: all 0.5s ease-in-out
          opacity: 1
          .toc-child
            display: block
        &:hover
          opacity: 1
    #rightside-button
      position: fixed
      z-index: 101
      display: flex
      bottom: -3rem
      align-items: center
      justify-content: center
      flex-direction: column
      transition: all .5s

button
        background: var(--card-bg)
        height: 2rem
        width: 2rem
        border-radius: 1rem
        font-size: 0.8rem
        box-shadow: 0 0 5px #000
        margin: 0.25rem 0

[data-theme="dark"]
  #mainbody
    #content_leftside
      a
        &:hover
          color: #a153ff
      #left_menu
        .leftside-contents
          box-shadow: 0 0 5px #fff
        i
          color: #fff
        .leftside-contents span
          color: #fff
      #left_display
        .candy_qrcode
          filter: invert(1)
    #content_rightside
      #rightside-toc
        span.toc-text
          color: #fff
        .toc-link
          color: var(--btn-bg)
          span.toc-text
            color: #fff
          &:hover span.toc-text
            color: #fff
        .toc-item
          // 目录缩进结构
          &.toc-level-1
            &:before
              background: #fff
          &.toc-level-2
            &:before
              background: #fff
          &.toc-level-3
            &:before
              background: #fff
          &.toc-level-4
          &.toc-level-5
          &.toc-level-6
            &:before
              background: #fff

#rightside-button
        button
          background: var(--card-bg)
          box-shadow: 0 0 5px #fff
          i
            color: #fff

.start
.end 
  font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, Helvetica, Arial, serif
  font-size: large
  font-weight: bolder
  opacity: 0.5

@media screen and (max-width: 1200px)
  #content_leftside
    #left_menu
      display: none !important
  #content_rightside
    #rightside-toc
      display: none !important

@media screen and (max-width: 1100px)
  #mainbody
    display: block
    #content_leftside
      display: none !important
    #content_rightside
      display: none !important