Butterfly comment board beautify

Akilar

发布于 2021-12-05 09:40:35

1.1K0

文章被收录于专栏：Akilarの糖果屋Akilarの糖果屋

更新记录

2021-12-02:编写思路及待建任务

编写思路，包括可行性及实现原理
罗列开发任务，预计2021年12月05日前完成基本开发

2021-12-03:内测方案v0.05

初步逻辑完成，废除伪类蒙版，改为新建实体
实现点击按钮开关和蒙版关闭
适配手机端样式和夜间样式
UI待优化。。。

参考方向	教程原贴
参考了火喵的主题中的侧栏评论样式	火喵日记

预览效果

写在最前

想法的起源
思路理清

事情是这样的，有一天，@笨蛋贰猹突然跑来问我用按钮打开侧栏评论区可不可行。

我一想，对吼，我咋个就没想到呢，传统的hexo博客大多采用在文末放置评论区的方式，这样如果是在阅读长文的时候，突然有个问题了，然后想在评论区提问或者在评论区找答案，那就要拉倒最底下评论完再回来继续看。或者就是全文看完了才方便提问。不管是哪一种，都会造成阅读的割裂感，这种时候，如果可以保留当前的阅读进度，同时还能打开评论区同步阅读评论，岂不美哉？

然后我就不管贰猹后面说了啥了，这个功能，可以搞！

然后呢，肯定又会有讨厌的守旧派说什么不习惯之类的话，所以说众口难调啊众口难调。但是没关系，只要考虑一下业务逻辑就可以了。让评论区默认保持传统的底部挂载模式，同时提供侧栏按钮，让读者自己选择是否选用侧栏评论。

在和贰猹讨论的时候，我突然意识到，如果是用事件监测来判断是否启用侧栏评论按钮的话，因为一般情况下我会采用display:none来保持侧栏评论区的常隐效果，这势必会造成最新评论跳转时显示失败的情况。

而且在这个思路下，势必需要编写一个侧栏的评论区版块，说不定还会影响到评论插件根据ID挂载。然后重新理清了一下思路。我直接用fixed定位重写一份侧栏布局，然后通过按钮来给评论区添加对应的class来控制它的形态变换，就像当初做SAO风格右键菜单时一样，只不过是把附加样式多样化了而已。

这样，默认情况下评论区依然是在底部的，就不会影响最新评论跳转，而且因为只是改动样式，一切都是以外链css，js实现的，不会破坏原本的评论容器逻辑。理论上完全可以内聚到做成npm插件的地步。

思路理清

首先，为了保证与现有评论区功能的兼容性，尽量采用附加css和js的改动方式，且不去改动原有评论区架构，将评论区作为整体看待进行改动。

同时，这种操作方式也能使本篇讨论的方案具备普适性，理论上所有容器挂载形式的评论区都可以使用本方案。这样就给其他主题使用，也就是NPM插件的开发留下了可能。

其次，确保评论插件的容器挂载不出错，必须确保当前页面只有一个评论区容器，所以采用重写定位样式的方式更改布局。

然后，为了保证不会破坏当前读者群体的传统习惯，将新功能启用的选择权放在前端进行交互而非配置文件开关。

考虑到点击习惯，保留一部分空窗蒙版，点击即可退出。又为了尽量不去魔改源码，使用js创建html实体而不是去改动pug源码。

最后为了不破坏每篇文章的初始化形态，将移除所有侧栏评论区效果作为一个初始化函数，每次重载。

综上，你学会了吗？

魔改步骤

当前方案仍为内测尝鲜版，基本逻辑可以实现，但是js代码可读性较差，且不保证有冗余步骤。看之后是否有时间优化代码。

新建[Blogroot]\themes\butterfly\source\css\custom\fixed-comment.css

div#post-comment.fixedcomment {
    position: fixed;
    top: 0;
    width: 60%;
    right: 0;
    padding: 25px 30px 20px 20px;
    height: 100vh;
    overflow: scroll;
    z-index: 90;
    background: rgba(255,255,255,0.95);
    box-shadow:3px 2px 14px #464340;
    animation: fixedright 0.5s linear;
}
div#post-comment.fixedcomment::-webkit-scrollbar {
width: 0;
}
div#quit-board{
  display: none;
}
div#quit-board.fixedcomment {
  position: fixed;
  display:block!important;
  left: 0;
  top: 0;
  width: 40%;
  height: 100vh;
  z-index: 89!important;
  background: rgba(25,25,25,0.3);
  filter: blur(4px) !important;
  animation: fixedleft 0.5s linear;
}
/*手机端样式适配*/
@media screen and (max-width: 768px) {
  div#post-comment.fixedcomment {
      width: 90%;
      right: 0;
  }
  div#quit-board.fixedcomment {
    width: 10%;
  }
}
/*动画效果*/
@keyframes fixedright {
  from {right:-50%;}
  to {right:0;}
}
@keyframes fixedleft {
  from {left:-50%;}
  to {left:0;}
}
/* 夜间模式匹配 */
[data-theme="dark"]
  div#post-comment.fixedcomment {
      background: rgba(22,22,22,0.95);
      box-shadow:3px 2px 12px #90a1a4;
  }
[data-theme="dark"]
  div#quit-board.fixedcomment {
    background: rgba(147, 146, 128, 0.3);
  }

新建[Blogroot]\themes\butterfly\source\js\custom\fixed_comment.js

//移除FixedComment类，保持原生样式，确保不与最新评论跳转冲突
function RemoveFixedComment() {
  var activedItems = document.querySelectorAll('.fixedcomment');
  if (activedItems) {
    for (i = 0; i < activedItems.length; i++) {
      activedItems[i].classList.remove('fixedcomment');
    }
  }
}
//给post-comment添加fixedcomment类
function AddFixedComment(){
  var commentBoard = document.getElementById('post-comment');
  var quitBoard = document.getElementById('quit-board');
  commentBoard.classList.add('fixedcomment');
  quitBoard.classList.add('fixedcomment');
}
//创建一个蒙版，作为退出键使用
function CreateQuitBoard(){
  var quitBoard = `<div id="quit-board" onclick="RemoveFixedComment()"></div>`
  var commentBoard = document.getElementById('post-comment');
  commentBoard.insertAdjacentHTML("beforebegin",quitBoard)
}

function FixedCommentBtn(){
  //第一步，判断当前是否存在FixedComment类，存在则移除，不存在则添加
  // 获取评论区对象
  var commentBoard = document.getElementById('post-comment');
  // 若评论区存在
  if (commentBoard) {
      // 判断是否存在fixedcomment类
      if (commentBoard.className.indexOf('fixedcomment') > -1){
        // 存在则移除
        RemoveFixedComment();
      }
      else{
        // 不存在则添加
        CreateQuitBoard();
        AddFixedComment();
      }
  }
  // 若不存在评论区则跳转至留言板
  else{
    // 判断是否开启了pjax，尽量不破坏全局吸底音乐刷新
      if (pjax){
        pjax.loadUrl("/comment/#post-comment");
      }
      else{
        window.location.href = "/comment/#post-comment";
      }
  }
}
//切换页面先初始化一遍，确保开始时是原生状态。所以要加pjax重载。
RemoveFixedComment();

修改[Blogroot]\_config.butterfly.yml的inject配置项，添加引入的 js 和 css

  inject:
    head:
+     - <link rel="stylesheet" href="/css/custom/fixed_comment.css"  media="defer" onload="this.media='all'">
    bottom:
+     - <script data-pjax defer src="/js/custom/fixed_comment.js"></script>

理论上给任意元素添加onclick="FixedCommentBtn();"属性就可以实现评论区侧栏开闭。此处我是修改了原生 Butterfly 主题的直达评论按钮。直达评论 ×，评论直达√。

修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug，大约第 36 行的位置，

  if commentsJsLoad
-   a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+   button#to_comment(type="button" title=_p("rightside.scroll_to_comment") onclick="FixedCommentBtn();")

TO DO

编写侧栏评论区样式

编写侧栏评论区手机端样式

完善夜间模式匹配

新增twikoo魔改美化方案

提供默认样式和SAO UI方案

完善侧栏展开逻辑，确保不与最新评论跳转冲突

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-02，如有侵权请联系 cloudcommunity@tencent.com 删除

css

容器