让 Material 文章更加人性化

适用于

Hexo-Material

Introduction

看见 Material 的文章页太简陋了，去网上查了查好像没人搞这个，于是自己动手，添加字数统计插件后完美加上了字数统计和阅读时长预计，在添加分类标签时查阅了 Hexo 开发文档，发现list_categories()正好能满足需求（才怪咧

这个方法打印出的分类标签会包含此分类的文章数，就像 Python2、闲谈4 这样，看上去极其不美观，一开始想用 ejs 格式化字符串，然而 ejs 似乎并没有格式化方法，然后翻了翻格式化的 npm 包，过于复杂选择弃掉，最后选用原生 js 去除数字，而后添加 Ant Design Icon，至此文章信息添加完成

补充

好吧，发现了其实有如下的方法可以去除数字~~（hexo 的官方文档真垃圾~~

1
2
3
4
5


<%- list_categories(post.categories, {
    show_count: false,
    class: 'post_category',
    style: 'none'
}) %>

Inplement

Installation

1

npm install --save hexo-wordcount

添加 HTML 元素

找到material/layout/post.ejs

搜索<%- partial('_partial/post-content') %>

在其上面一行添加以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<div class="post-preface">
    <span class="post-preface-count">
        <i><img class="post-preface-icons" src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/img/icon/preface-count.svg"></i>
        <%= wordcount(partial('_partial/post-content')) %>字
    </span>
    <span class="post-preface-minread">
        <i><img class="post-preface-icons" src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/img/icon/preface-minread.svg"></i>
        大约<%= min2read(partial('_partial/post-content')) %>分钟
    </span>
    <% if(is_post()){ %>
    <span class="post-preface-categories">
        <i><img class="post-preface-icons" src="https://cdn.jsdelivr.net/gh/iyume/static/hexo-blog/img/icon/preface-categories-1.svg"></i>
        <%- list_categories(page.categories, {
            style: 'p',
                transform(str) {
                    return titlecase(str);
                }
            }) %>
    </span>
</div>

添加 CSS 样式

还是在material/layout/post.ejs

随便找个适当的位置插入以下 Style 标签就行啦

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<style>
    .post-preface {
        margin: 15px 0 0 4%;
    }

    .post-preface-count,
    .post-preface-minread,
    .post-preface-categories {
        border-radius: 10px;
        margin: auto 3px;
        padding: 5px 10px;
        font-size: 14px;
        color: white;
        display: inline-block;
        letter-spacing: 1px;
    }

    .post-preface-count {
        background-color: #ff4e6a;
    }

    .post-preface-minread {
        background-color: #ffaa73;
    }

    .post-preface-categories {
        background-color: #3cdc82;
    }

    .category-link {
        text-decoration: none;
    }

    .category-link:hover,
    .category-link:link,
    .category-link:visited,
    .category-link:active {
        color: white;
    }

    .post-preface-icons {
        filter: invert(100%);
    }
</style>

可能有人已经察觉到了这个 CSS 颜色反转滤镜，但我懒得改了（

添加 JS 清洗字符串

依旧是material/layout/post.ejs

将以下 JS 插入到刚才添加的 html 元素下方任意位置

一定要在插入元素的下方，因为 html 是自上而下解释的

1
2
3
4
5


<script>
    for (i = 0; i < document.getElementsByClassName("category-link").length; i++) {
        document.getElementsByClassName("category-link")[i].innerHTML = document.getElementsByClassName("category-link")[i].innerHTML.replace(/[0-9]/g, '');
    }
</script>

END

顺便鬼灭之刃真香！