为了方便，这里就直接以我的博客主题Sakura为例进行教程。其他主题使用起来灵活变通即可。

前排感谢matery
matery的GitHub：https://github.com/blinkfox/hexo-theme-matery

我的文章日历：https://cndrew.cn/archives/
分类雷达图：https://cndrew.cn/category/

Attention：如果你很清楚的知道下面的步骤都是在做什么，各种文件你想放那随便放，但是如果你是小白，就跟着教程一步一步走。

文章日历

效果图

准备js

在这里下载echarts.min.js然后放到.\nblog\themes\Sakura\source\js中

准备css

在这里下载matery.css然后放到.\nblog\themes\Sakura\source\css中
然后找到主题中对应的head渲染模板中，比如说我的就是.\nblog\themes\Sakura\layout\_partial\head.ejs
在head标记中添加一行

<link rel="stylesheet" type="text/css" href="/css/matery.css">

准备模板

在这里下载post-calendar.ejs然后放到.\nblog\themes\Sakura\layout\_widget中

选择位置

这一步就是自己选择了。找到hexo模板中你想放文章日历的位置，在相应位置添加

<%- partial('_widget/post-calendar') %>

比如说我准备把日历放在我的归档界面。就找到.\nblog\themes\Sakura\layout\archive.ejs,找到合适的位置加上。

然后，你的文章日历就有了！

分类雷达图

这一步需要的js和css跟上一步的一样，如果上一个你添加了，这里直接跳到第三步即可。

效果图

准备js

在这里下载echarts.min.js然后放到.\nblog\themes\Sakura\source\js中

准备css

在这里下载matery.css然后放到.\nblog\themes\Sakura\source\css中

准备模板

在这里下载category-radar.ejs然后放到.\nblog\themes\Sakura\layout\_widget中

选择位置

这一步就是自己选择了。找到hexo模板中你想放文章日历的位置，在相应位置添加

<%- partial('_widget/category-radar') %>

然后，你的分类雷达图就有了！

一些小美化

我只是一个html小白，有错的话对我善良点谢谢。
因为我们添加的这两个样式并不是自带的，所以肯定会跟主题显得有些？冲突或者看着不太舒服之类的。
（反正我是这样
所以我们可以给他们添加一个边框，添加了边框之后就是跟我上面的效果图一样的效果，不加的话，你可以自己试试效果。

首先找到你刚才放了<%- partial('_widget/category-radar') %></div>或者<%- partial('_widget/post-calendar') %>的模板文件中，在最上面添加

<style type="text/css">
        #contentss {
        position: relative;
        width: 800px;
        height: 1200px;
        max-height: 1200px;
        margin-bottom: 15px;
        margin-top: 15px;
        text-align: center;
        border: 0;
        border-radius: 10px;
        color: rgba(0, 0, 0, .87);
        background: #fff 50%;
        background-size: cover;
        box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
        margin:0 auto;
        }
    </style>

当然你也可以根据自己的喜好适配你自己的样式。
然后把<%- partial('_widget/category-radar') %>或者<%- partial('_widget/post-calendar') %>
变成

<div id="contentss">
<%- partial('_widget/category-radar') %></div>`或者`<%- partial('_widget/post-calendar') %>
</div>

即可。

总结

就这样，我是挺喜欢这两个的，很帅很骚气。

赏