增加点击跳转评论按钮


新建文件

themes\Matery\layout_partial\back-comment.ejs

<!-- 直达评论 -->
<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>

注意,不同的评论插件,可能需要改一下a标签中的href。

修改评论插件的js

在themes\Matery\layout_partial\valine.ejs文末添加一条,引用第一步的内容

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

添加样式

增加样式在themes\Matery\source\css\matery.css添加内容如下

/*直达评论按钮样式*/
.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;
}

bottom: 135px;是距离底部的高度,可以根据自己的需要修改

参考

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

[2]hexo(matery)背景、滚动条优化+增加点击跳评论


文章作者: Alex
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Alex !
  目录