Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图
Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图
量子态的沐子呓
发布于 2020-03-11 18:35:33
发布于 2020-03-11 18:35:33
Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图
Previous
- 环境：Hexo4.2
- 主题：Volantis
- 本次主题美化基于blinkfox的hexo-theme-matery
- 演示
GITHUB日历云
- 点击此按钮下载
echarts.min.js文件放置于../volantis/source/js文件夹中 - 点击此按钮下载
post-calendar.ejs文件放置于../volantis/layout/_widget文件夹中 - 打开刚刚下载的
post-calendar.ejs文件，将第七行
替换为
<script type="text/javascript" src="/js/echarts.min.js"></script>- 在
../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">使用volantis主题的直接在archive.less里面添加代码，不要引入matery.css文件，matery.css与volantis主题配置文件archive.less部分标签名相同，引入后会更改主题外观。
- 在你想让它显示的位置添加如下代码就行啦，例如我是将它放在
../volantis/layout/archive.ejs中
<%- partial('_widget/post-calendar') %>- 演示图：
标签云
- 点击此按钮下载
echarts.min.js文件放置于../volantis/source/js文件夹中 - 点击此按钮下载
tag-cloud.ejs文件放置于../volantis/layout/_widget文件夹中 - 打开刚刚下载的
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>- 使用
volantis主题的可以点击下载按钮替换即可 - 非
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;
}- 在你想让它显示的位置添加如下代码，例如我是将它放在
../volantis/layout/tag.ejs中
<%- partial('_widget/tag-cloud') %>添加排版后可能会出现跟主题不搭的情况，可以根据我的tag文件适当修改。 7. 演示图
文章分类雷达图
- 点击此按钮下载
echarts.min.js文件放置于../volantis/source/js文件夹中 - 点击此按钮下载
category-radar.ejs文件放置于../volantis/layout/_widget文件夹中 - 打开刚刚下载的
category-radar.ejs文件，将
替换为
<script type="text/javascript" src="/js/echarts.min.js"></script>- 在你想让它显示的位置添加如下代码，例如我是将它放在
../volantis/layout/tag.ejs中
<%- partial('_widget/category-radar') %>- 演示图
其它个性化配置
- PayPal
- AliPay
- WeChatPay
- QQPay
Donate
jQuery(document).ready(function () { var QRBox = $('#QRBox'); var MainBox = $('#MainBox'); var AliPayOR = 'https://cdn.jsdelivr.net/gh/InfiniteYinux/cloud@2.36/donate/alipay.png'; var WeChatPayOR = 'https://cdn.jsdelivr.net/gh/InfiniteYinux/cloud@2.36/donate/wechat.png'; var QQPayOR = 'https://cdn.jsdelivr.net/gh/InfiniteYinux/cloud@2.36/donate/qq.png'; function showQR(QR) { if (QR) { MainBox.css('background-image', 'url(' + QR + ')'); } $('#RewardText,#RewardBox,#github').addClass('blur'); QRBox.fadeIn(300, function (argument) { MainBox.addClass('showQR'); }); } $('#RewardBox>li').click(function (event) { var thisID = $(this).attr('id'); if (thisID === 'AliPayOR') { showQR(AliPayOR); } else if (thisID === 'WeChatPayOR') { showQR(WeChatPayOR); } else if (thisID === 'QQPayOR') { showQR(QQPayOR); } }); MainBox.click(function (event) { MainBox.removeClass('showQR').addClass('hideQR'); setTimeout(function (a) { QRBox.fadeOut(300, function (argument) { MainBox.removeClass('hideQR'); }); $('#RewardText,#RewardBox,#github').removeClass('blur'); }, 600); }); });
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年3月10日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录