一、前言

一直想要模仿github和gitee代码提交统计样式，今天在echarts找到了日历图模块的接口，漂亮！

在hexo文章achives页面添加显示效果如下：

当然，在sakuraplus主题下已经融合了该功能哦！

二、正文

1.配置

在主题配置文件themes\sakura\_config.yml下添加：

# Whether to display post-calender in the `archive` page
# 设置在归档页面achive中是否显示'文章日历'控件
postCalendar: true

如果不想显示，设置为false即可。

在归档页添加themes\sakura\layout\_widget\post-calendar.ejs
```
           <div id="calendar"><% if (theme.postCalendar) { %><%- partial('_widget/post-calendar') %><% } %></div>
```
对应了config配置的true和false开关，为true时加载_widget/post-calendar渲染。

添加位置：
新建日历样式文件themes\sakura\layout\_widget\post-calendar.ejs

复制如下内容：

<div class="container archive-calendar"><div class="card"><div id="post-calendar" class="card-content"></div></div>
</div>
<style type="text/css">#post-calendar {width: 100%;height: 225px;margin-top: 20px;border-radius: 12px;background-color: rgb(255, 255, 255,0.5);}
</style><script type="text/javascript" src="<%= theme.libs.js.echarts %>"></script>
<script type="text/javascript">let myChart = echarts.init(document.getElementById('post-calendar'));<%// calculate range.var startDate = moment().subtract(1, 'years');var endDate = moment();var rangeArr = '["' + startDate.format('YYYY-MM-DD') + '", "' + endDate.format('YYYY-MM-DD') + '"]';// post and count map.var dateMap = new Map();site.posts.forEach(function (post) {var date = post.date.format('YYYY-MM-DD');var count = dateMap.get(date);dateMap.set(date, count == null || count == undefined ? 1 : count + 1);});// loop the data for the current year, generating the number of post per dayvar i = 0;var datePosts = '[';var dayTime = 3600 * 24 * 1000;for (var time = startDate; time <= endDate; time += dayTime) {var date = moment(time).format('YYYY-MM-DD');datePosts = (i === 0 ? datePosts + '["' : datePosts + ', ["') + date + '", ' +(dateMap.has(date) ? dateMap.get(date) : 0) + ']';i++;}datePosts += ']'; %>let option = {title: {top: 0,text: '文章日历',left: 'center',textStyle: {color: '#3C4858'}},tooltip: {padding: 10,backgroundColor: '#555',borderColor: '#777',borderWidth: 1,formatter: function (obj) {var value = obj.value;return '<div style="font-size: 14px;">' + value[0] + '：' + value[1] + '</div>';}},visualMap: {show: true,showLabel: true,categories: [0, 1, 2, 3, 4],calculable: true,inRange: {symbol: 'rect',color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']},itemWidth: 12,itemHeight: 12,orient: 'horizontal',left: 'center',bottom: 0},calendar: [{left: 'center',range: <%- rangeArr %>,cellSize: [13, 13],splitLine: {show: false},itemStyle: {width: '1.88679%',height: '15px',color: '#EEEEEE',borderColor: '#FFF',borderWidth: 2},yearLabel: {show: false},monthLabel: {nameMap: 'cn',fontWeight: 'lighter',fontSize: 12},dayLabel: {show: true,formatter: '{start}  1st',fontWeight: 'lighter',nameMap: ['日',' ',' ','三',' ',' ','六',],fontSize: 12}}],series: [{type: 'heatmap',coordinateSystem: 'calendar',calendarIndex: 0,data: <%- datePosts %>}]};myChart.setOption(option);
</script>

注意文章第16排：<%= theme.libs.js.echarts %>"

如果是其他主题，修改为

https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/echarts.min.js

如果是sakuraplus直接在config添加：
```
echarts: https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/echarts.min.js
```
现在hexo调试应该可以出现日历图了。

2.流程说明

具体说一下echarts如何显示日历图：

读取hexo文章信息（date）
echarts基本使用方法

（1）读取date

步骤：

获得去年今日到今年今日所有天数
获得文章发布时间，存入dateMap
根据Map做一个次数的累计，存入datePosts
将关键信息写入options

参考于：hexo-theme-matery主题，这款主题对echarts用得淋漓尽致，漂亮！

（2）日历显示规则

echarts的食用方法：引入js，初始化到容器，在options写入配置。
本次日历模板使用文档：官网，对于options的配置一定参考官方使用文档。
（标题、提示语、注释都如下图）

具体说说日历的构成：（根据官网和gitee样式，高仿效果）

3.优化

当然本文只是对gitee高仿日历图，

如果你对样式还不满意，请结合官网修改。

单个元素：

多种样式：

更多优化参考：
sakuraplus主题

hexo（sakura）仿gitee添加文章贡献度日历图（echarts）相关推荐

Hexo Landscape博客添加【农历日历】
效果见:我的个人网站的右下角第一步,在主题目录配置下打开 themes\landscape\layout\_widget 新建 calender.ejs 文件, 代码太长,所有在本文最后附上. 注 ...
基于pyecharts的数据可视化(四)：1.基本图表之日历图
文章目录日历图日历图使用的数据格式日历坐标系组件配置项:CalendarOpts 日历图通过add添加系列名称.系列数据.标签配置项.日历坐标系组件配置型.提示框组件配置项.图元配置项. 标签 ...
如何在hexo上创建一篇文章
博客已经搭建好了,虽然功能比较少,但是还是可以写文章的新建文章使用命令来新建文章 hexo new [layout] <title> layout 是文章的布局,默认为post,可以先 ...
Hexo 部署到 Gitee
Hexo 部署到 Gitee 文章目录 Hexo 部署到 Gitee 1. Gitee 创建仓库 2. 修改 Hexo 配置文件 3. 生成/添加 SSH 公钥 3.1 生成 SSH 公钥 3.2 将 ...
Hexo Next 博客添加相册瀑布流
原文:https://rebootcat.com/2020/09/19/nextphotowall/ 前言一直没有时间来整理下博客搭建的一些事情,现在补上一篇,给 Hexo Next 博客添加一个相 ...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮前言之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP) ...
hexo之next主题添加分类
hexo之next主题添加分类 @(Hexo+Github) 当前博客主题用的是next最新版,最初是比较简陋的界面,一直放着没怎么动,测试了下Latex的显示效果没有达到在CSDN我的博客上的效果, ...
hexo博客中添加categories分类
title: hexo博客中添加categories分类 date: 2020-04-01 16:45:16 tags: hexo categories: 学习方法如下: 在根目录下scaffold ...
怎么往日历里面加时钟java,怎么添加电脑桌面时钟日历
怎么添加电脑桌面时钟日历有很多人都不知道win7系统怎么添加桌面时钟日历,下面就为大家介绍win7系统添加桌面时钟日历的方法. 1.先双击打开自己电脑桌面上的"计算机".如图所示 ...
wp.qq.com.index.html,使用纯代码给WordPress添加文章目录功能,支持快速定位和多级目录...
wordpress是一款强大的博客系统,支持各种DIY,今天我就给大家带来使用纯代码给Wordpress添加文章目录的功能,使看文章更简单!并且支持点击目录标题快速定位到文章页面指定内容点. 一.文章 ...

hexo（sakura）仿gitee添加文章贡献度日历图（echarts）

文章目录