Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图

Previous

  1. 环境:Hexo4.2
  2. 主题:Volantis
  3. 本次主题美化基于blinkfoxhexo-theme-matery
  4. 演示
GITHUB日历云 标签云和文章分类雷达图

GITHUB日历云

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


替换为

1
<script type="text/javascript" src="/js/echarts.min.js"></script>
  1. ../volantis/source/less/archive.less里面最后一个括号之前添加如下代码:
1
2
3
4
5
/*日历云*/
#post-calendar {
width: 100%;
height: 200px;
}

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

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

使用volantis主题的直接在archive.less里面添加代码,不要引入matery.css文件,matery.cssvolantis主题配置文件archive.less部分标签名相同,引入后会更改主题外观。

  1. 在你想让它显示的位置添加如下代码就行啦,例如我是将它放在../volantis/layout/archive.ejs


1
<%- partial('_widget/post-calendar') %>
  1. 演示图:


标签云

  1. 点击此按钮下载echarts.min.js文件放置于../volantis/source/js文件夹中
  2. 点击此按钮下载tag-cloud.ejs文件放置于../volantis/layout/_widget文件夹中
  3. 打开刚刚下载的tag-cloud.ejs文件,将
1
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- theme.libs.js.echarts %>"></script>

替换为

1
<script type="text/javascript" src="/js/echarts.min.js"></script>
  1. 使用volantis主题的可以点击下载按钮替换即可
  2. volantis主题的需要下载此CSS文件后放置于../volantis/source/css文件夹中,然后在../volantis/layout/_partial/head.ejs中引入css文件,在<!-- link -->标记下方添加一行
1
<link rel="stylesheet" type="text/css" href="/css/matery.css">

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

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
/*
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;
}
  1. 在你想让它显示的位置添加如下代码,例如我是将它放在../volantis/layout/tag.ejs
1
<%- partial('_widget/tag-cloud') %>

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


文章分类雷达图

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


替换为

1
<script type="text/javascript" src="/js/echarts.min.js"></script>
  1. 在你想让它显示的位置添加如下代码,例如我是将它放在../volantis/layout/tag.ejs
1
<%- partial('_widget/category-radar') %>
  1. 演示图


其它个性化配置

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


您的支持,使我不懈努力!❤️
  • PayPal
  • AliPay
  • WeChatPay
  • QQPay
Donate

 评论




Copyright © 2019-2020 YINUXY   |   ICP 鄂ICP备20002395号   |   MOE ICP 萌ICP备 20200022号   |   正在载入...   |   站点地图  |  

UV
PV