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

结构代码

​ 在 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') %>

​ 至此，直达评论功能就完成了！

参考

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