Matery主题自定义(二)直达评论

为了方便查看评论，添加一个直达评论功能的按钮

个人博客作为效果参考：https://dreamruins.gitee.io/

结构代码

在 themes>hexo-theme-matery>layout>_partial 中新建一个文件 back-comment.ejs ，添加下面的结构代码

1
2
3
4
5
6
<!-- 直达评论 -->
<div id="to_comment" class="comment-scroll">
  <a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论">
    <i class="fas fa-comments"></i>
  </a>
</div>

样式代码

在 themes>hexo-theme-matery>source>css>matery.css 中添加样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*直达评论按钮样式*/
.comment-scroll {
    position: fixed;
    right: 15px;
    bottom: 135px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.comment-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
    width: 48px;
    height: 48px;
}

.comment-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

引用

因为直达评论功能，只有在有评论功能的页面才有效，所以最好在评论功能文件中引用

我评论功能使用的是 valine，所以在 themes>hexo-theme-matery>layout>_partial>valine.ejs 中添加下面的代码，如果是其他的评论插件，就在那个评论的功能文件中引用

1
<%- partial('_partial/back-comment.ejs') %>

这样直达评论功能就完成了

Matery 主题自定义持续更新中…

参考

hexo（matery）背景、滚动条优化+增加点击跳评论