通过 JavaScript 使 Hexo 分类页根据指定顺序排序
需求
Hexo 的分类页面会自动给所有分类进行排序。如果要手动指定分类的顺序,最简单的实现方法就是使用 JavaScript 移动元素。
实现
新建一个 JavaScript 脚本,粘贴以下代码并引入(适用于 Fluid 主题,可以自行修改来适配其他主题)
//
// 自动排序 - 在分类页面执行,使分类按照指定顺序排序。
//
//如果当前页面为分类页
if (document.title.split(" - ")[0] == "分类") {
//选择 ClassName 为 “category row nomargin-x” 的元素
var cate = document.getElementsByClassName('category row nomargin-x');
//定义排列顺序
order = ["日影", "月华", "星宿", "共振", "光辉"]
let temp = ""
for (let i = 0; i < order.length; i++) { //第 i 个分类
for (let ii = 0; ii < order.length; ii++) { //搜索第 i 个分类所在位置
if (cate[ii].innerHTML.indexOf(order[i]) != -1) {
//将所在位置的 outerHTML 加入 temp
temp = temp + cate[ii].outerHTML;
}
}
}
//将 temp 写入 category-list
document.getElementsByClassName("category-list")[0].innerHTML = temp
}
效果:使用前
效果:使用后
笔记
innerHTML与 outerHTML
前者包括内部的所有 HTML 内容,但不包括本身的标签,后者包括本身标签。
document.getElementsByClassName
使用该方法通过 Class 匹配时,会输出一个伪数组。
这也就意味着即便只匹配到了一个元素,你也需要加上 [0]
indexOf
在字符串中寻找指定字符串,如果未找到则返回 -1
,这里使用这个方法来判断分类名称。
致谢
感谢 Lingrottin 提供的技术支持。
通过 JavaScript 使 Hexo 分类页根据指定顺序排序
https://blog.akyuu.cn/post/22071301/