hexo（sakura）仿gitee添加文章貢獻度日曆圖（echarts）

一、前言

一直想要模仿github和gitee代碼提交統計樣式，今天在echarts找到了日曆圖模塊的接口，漂亮！

在hexo文章achives頁面添加顯示效果如下：

當然，在sakuraplus主題下已經融合了該功能哦！

二、正文

1.配置

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

   # Whether to display post-calender in the `archive` page
   # 設置在歸檔頁面achive中是否顯示'文章日曆'控件
   postCalendar: true 
   

   如果不想顯示，設置爲false即可。

2. 在歸檔頁添加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渲染。

   添加位置：

3. 新建日曆樣式文件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 day
    var 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如何顯示日曆圖：

1. 讀取hexo文章信息（date）
2. echarts基本使用方法
   

（1）讀取date

步驟：

1. 獲得去年今日到今年今日所有天數
2. 獲得文章發佈時間，存入dateMap
3. 根據Map做一個次數的累計，存入datePosts
4. 將關鍵信息寫入options

參考於：hexo-theme-matery主題 ，這款主題對echarts用得淋漓盡致，漂亮！

（2）日曆顯示規則

echarts的食用方法：引入js，初始化到容器，在options寫入配置。
本次日曆模板使用文檔：官網，對於options的配置一定參考官方使用文檔。
（標題、提示語、註釋都如下圖）

具體說說日曆的構成：（根據官網和gitee樣式，高仿效果）

3.優化

當然本文只是對gitee高仿日曆圖，

如果你對樣式還不滿意，請結合官網修改。

單個元素：

多種樣式：

---

更多優化參考：
sakuraplus主題