Previous

1. 环境：Hexo4.2
2. 主题：Volantis
3. 本次主题美化基于blinkfox的hexo-theme-matery
4. 演示

GITHUB日历云 标签云和文章分类雷达图

GITHUB日历云

1. 点击此按钮下载echarts.min.js文件放置于../volantis/source/js文件夹中
2. 点击此按钮下载post-calendar.ejs文件放置于../volantis/layout/_widget文件夹中
3. 打开刚刚下载的post-calendar.ejs文件，将第七行
   
   
   

替换为

<script type="text/javascript" src="/js/echarts.min.js"></script>

4. 在../volantis/source/less/archive.less里面最后一个括号之前添加如下代码：

  /*日历云*/#post-calendar {width: 100%;height: 200px;}

或者下载此CSS文件后放置于../volantis/source/css文件夹中，然后在../volantis/layout/_partial/head.ejs中引入css文件，在<!-- link -->标记下方添加一行

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

::: danger
使用volantis主题的直接在archive.less里面添加代码，不要引入matery.css文件，matery.css与volantis主题配置文件archive.less部分标签名相同，引入后会更改主题外观。
:::
5. 在你想让它显示的位置添加如下代码就行啦，例如我是将它放在../volantis/layout/archive.ejs中

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

6. 演示图：
   
   
   

标签云

1. 点击此按钮下载echarts.min.js文件放置于../volantis/source/js文件夹中
2. 点击此按钮下载tag-cloud.ejs文件放置于../volantis/layout/_widget文件夹中
3. 打开刚刚下载的tag-cloud.ejs文件，将

<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- theme.libs.js.echarts %>"></script>

替换为

<script type="text/javascript" src="/js/echarts.min.js"></script>

4. 使用volantis主题的可以点击下载按钮替换即可
5. 非volantis主题的需要下载此CSS文件后放置于../volantis/source/css文件夹中，然后在../volantis/layout/_partial/head.ejs中引入css文件，在<!-- link -->标记下方添加一行

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

若引入后博客外观发生改变，则将如下代码复制粘贴于../volantis/source/less/archive.less文件最后一个括号之前。

  /*tag-cloud*/.chip .tag-length {margin-left: 5px;margin-right: -2px;font-size: 0.5rem;}.chip-default .tag-length {color: #e91e63;margin-top: 1px;}.chip-active .tag-length {color: #fff;}.chip-container .tag-chips {margin: 1rem auto 0.5rem;max-width: 850px;text-align: center;}/*tags边框*/.chip-container .chip {margin: 10px 10px;padding: 19px 14px;display: inline-flex;line-height: 0;font-size: 1rem;font-weight: 500;border-radius: 5px;cursor: pointer;box-shadow: 0 3px 5px rgba(0, 0, 0, .12);z-index: 0;}.chip-container .chip:hover {color: #fff;background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%) !important;}

6. 在你想让它显示的位置添加如下代码，例如我是将它放在../volantis/layout/tag.ejs中

<%- partial('_widget/tag-cloud') %>

添加排版后可能会出现跟主题不搭的情况，可以根据我的tag文件适当修改。
7. 演示图

文章分类雷达图

1. 点击此按钮下载echarts.min.js文件放置于../volantis/source/js文件夹中
2. 点击此按钮下载category-radar.ejs文件放置于../volantis/layout/_widget文件夹中
3. 打开刚刚下载的category-radar.ejs文件，将
   
   
   

替换为

<script type="text/javascript" src="/js/echarts.min.js"></script>

4. 在你想让它显示的位置添加如下代码，例如我是将它放在../volantis/layout/tag.ejs中

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

5. 演示图
   
   
   

其它个性化配置

更多个性化配置可参考TRHX的博文Hexo 博客主题个性化