通过 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/
作者
RLt
发布于
2022年7月13日
许可协议