让 Material 文章更加人性化

Author Avatar
黯梦萦辰 10月 01, 2019
  • 在其它设备中阅读本文章
803字 大约3分钟 代码3

给 Material 文章页添加字数统计、阅读时长和分类标签

适用于

  • Hexo-Material

Introduction

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

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

补充

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

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

Inplement

Installation

npm install --save hexo-wordcount

添加 HTML 元素

找到material/layout/post.ejs
搜索<%- partial('_partial/post-content') %>
在其上面一行添加以下代码

<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 标签就行啦

<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 是自上而下解释的

<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
顺便鬼灭之刃真香!

版权声明:CC BY-NC-SA 4.0 License
本文链接:https://blog.tinyume.com/archives/material-geng-duo-xin-xi.html