Hexo-matery-小组件
1. 评论直达按钮
主题本身没有这个按钮，需要自己添加。
第一步
在文件夹themes/Matery/layout/_partial中新建back-comment.ejs，我这里评论是valine，直接填写的valine的id——href="#vcomments",如果是其他评论，对应修改即可。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>第二步
在themes/Matery/layout/_partial/valine.ejs文件末尾添加一条代码，引用第一步的内容。
<%- partial('_partial/back-comment.ejs') %> 这样操作后则只在valine存在的页面才显示直达评论，防止首页其他地方也出现按钮。
第三步
在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;
}到此按钮添加成功。重新生成博客文件即可。
2. 滚动条样式
在themes/Matery/source/css/matery.css文件末尾添加如下代码🔧：
/* 滚动条 */
::-webkit-scrollbar-thumb {
background-color: #2e77f7;
background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
border-radius: 3em;
}
::-webkit-scrollbar-track {
background-color: rgb(255, 255, 255);
border-radius: 3em;
}
::-webkit-scrollbar {
width: 8px;
height: 15px;
}可以修改以下两个属性来改变颜色：
::-webkit-scrollbar-thumb中的background-color参数是滚动条颜色。
::-webkit-scrollbar-track中的background-color参数是滚动条处的背景颜色。
3. TOC目录展开收缩小箭头
效果如下：
找到主题目录下/layout/_partial/post-detail-toc.ejs这个文件，打开后找到如下代码：
// 切换TOC目录展开收缩的相关操作.
const expandedClass = 'expanded';
let $tocAside = $('#toc-aside');
let $mainContent = $('#main-content');
$('#floating-toc-btn .btn-floating').click(function () {
if ($tocAside.hasClass(expandedClass)) {
$tocAside.removeClass(expandedClass).hide();
$mainContent.removeClass('l9');
} else {
$tocAside.addClass(expandedClass).show();
$mainContent.addClass('l9');
}
fixPostCardWidth('artDetail', 'prenext-posts');
});
<% } %>
});
将上面的的代码替换成下面的ejs代码即可🔧：
const expandedClass = 'expanded';
let $tocAside = $('#toc-aside');
let $mainContent = $('#main-content');
$('#floating-toc-btn .btn-floating').click(function () {
if ($tocAside.hasClass(expandedClass)) {
$tocAside.removeClass(expandedClass).hide();
$mainContent.removeClass('l9');
} else {
$tocAside.addClass(expandedClass).show();
$mainContent.addClass('l9');
}
fixPostCardWidth('artDetail', 'prenext-posts');
});
let $itemHasChild = $(".toc-list-item:has(> .toc-list)");
$itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i><span> </span>");
let $iconToFold = $(".toc-list-item > .fa-caret-down");
let $iconToExpand = $(".toc-list-item > .fa-caret-right");
$iconToFold.addClass("hide");
const targetNodes = document.getElementsByClassName("toc-list-item");
const config = { attributes: true, childList: false, subtree: false };
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === "attributes") {
let target = $(mutation.target)
if (target.hasClass("is-active-li")) {
let $toFold = $(".toc-list-item > .fa-caret-down");
let $toExpand = $(".toc-list-item > .fa-caret-right");
$toFold.addClass("hide");
$toExpand.removeClass("hide");
target.children(".fa-caret-right").first().addClass("hide")
target.children(".fa-caret-down").first().removeClass("hide")
let parents = target.parents(".toc-list-item")
for (p of parents) {
$(p).children(".fa-caret-right").first().addClass("hide")
$(p).children(".fa-caret-down").first().removeClass("hide")
}
}
}
}
};
const observer = new MutationObserver(callback);
for (node of targetNodes) {
observer.observe(node, config)
}
});
4. Valine添加标识
Valine评论系统表示需要用魔改过后的js，点击下方链接复制魔改过后的Valine.min.js。
然后找到主题目录下/source/libs/valine/valine.min.js这个文件，将魔改过后的js替换进去。
接着进入主题目录下/layout/_partial/valine.ejs找到valine板块添加如下代码🔧：
master: 'xxxxxxxxxxxxxxxxxxxxx', //博主邮箱md5加密32位小写
tagMeta: ["博主","小伙伴","访客"], //标识字段名
friends: [], //小伙伴邮箱Md5注意标识是通过邮箱进行验证的，那么现在我们评论的时候输入邮箱才会显示我们是博主。
5. 鼠标样式
我们可以自定义在浏览博客时的鼠标样式，先将鼠标文件放到 matery/source/medias/xxxx.cur 。
这里推荐一个鼠标样式下载网站：致美化。
将文件移动到指定目录下后，到主题目录下/matery/source/css/my.css文件中添加如下代码：
*{
cursor: url("/medias/alternate.cur"),auto!important;
}
a {
cursor: url("/medias/link.cur"),auto!important;
}提醒以下我添加的是两个cur光标文件，一个是全局的光标，一个是选中链接时的样式，其他感觉没必要添加。
6. 全局字体变换
主题的字体也是可以变换，如果不喜欢默认字体可以更改，先将准备好的字体文件ttf或ttc放到matery/source/medias/xxx.ttf或者xxx.ttc 。
找到主题文件夹下的 my.css 文件，路径为 /themes/matery/source/css/my.css ，填入下面的代码：
@font-face{
font-family: 'myfont';
src: url('../font/myfont.ttf');
}
body{
font-family: 'myfont'; /*`myfont`是字体文件的命名。*/
}