【个人博客】一个侧边直达评论的方案

Hexo博客传统上习惯于在文章末尾设置评论区。然而，这种设计方式存在一定问题，当你专心阅读时，突然产生了一个问题。为了提问或寻找答案，你不得不去页面底部的评论区寻找答案，然后再慢慢的翻回到原来的阅读位置。又或者你选择在文章全文阅读结束后再提出问题。无论采取何种方式，都会产生阅读流畅性的断裂感。

在这种情况下，一种更为便捷的设计是能够保留当前的阅读进度，同时允许打开评论区并与阅读评论同步进行。这样一来，读者可以在需要时方便地进行互动，而不必中断阅读体验。这种优化将大大提升用户友好性，使阅读和互动更加无缝融合。

针对这个问题，Alikar大佬提出了一个解决方案，在这里我记录一下：

具体实现方案

  1. CSS样式文件设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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(222, 222, 222, 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(35, 35, 35, 0.95);
      box-shadow:3px 2px 12px #90a1a4;
  }
[data-theme="dark"]
  div#quit-board.fixedcomment {
    background: rgba(147, 146, 128, 0.3);
  }
  1. JS样式文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//移除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("/comments/#post-comment");
      }
      else{
        window.location.href = "/comments/#post-comment";
      }
  }
}
//切换页面先初始化一遍，确保开始时是原生状态。所以要加pjax重载。
RemoveFixedComment();
  1. 在主题配置文件中引用你的样式文件
1
2
3
4
5
  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>
  1. 修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug
1
2
3
  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();")