使用Hexo架設部落格 (2) 熱力圖發文貢獻日誌

熱力圖發文貢獻日誌

在使用Hexo進行部落格管理時，我們可以通過配置熱力圖的功能，來顯示每月的發文狀況。這對於監控自己的寫作進度和保持穩定的更新頻率非常有幫助。

其實只是單純自己看自己爽而已。

使用套件-ECharts

使用ECharts，ECharts是一個由百度開發的開源可視化圖表庫。適合用來生成各種動態、互動性強的數據可視化圖表。

包含折線圖、柱狀圖、餅圖、散點圖、地圖等多種圖表類型…當然包含今日的主角熱力圖。

參考：https://echarts.apache.org/examples/en/editor.html?c=calendar-charts

匯入ECharts庫：可以通過CDN方式，也可以下載ECharts後本地端匯入。在本例中，我們使用CDN方式引入ECharts：

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/echarts.min.js"></script>

接著進行配置吧

第一步-設置熱力圖發文貢獻日誌開關

透過修改根目錄中的_config.yml文件來開啟或關閉這個功能。具體步驟如下：

1. 打開Hexo部落格的根目錄，找到並打開_config.yml文件。

2. 添加或修改以下設置：

第二步-在主題內設置貢獻日誌

為了在主題中顯示貢獻日誌，修改主題內的index.ejs文件。以Fluid主題為例，我們需要進行以下操作：

1. 打開主題目錄中的index.ejs文件，通常路徑為themes/fluid/layout/index.ejs。

2. 在文件的最下方添加以下代碼：

這樣設定之後，如果在_config.yml中啟用了postCalendar，就會在首頁底部顯示貢獻日誌。

第三步-設置貢獻日誌的樣式和功能

我們還需要在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="https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/echarts.min.js"></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>

參考文章：https://blog.csdn.net/cungudafa/article/details/106420842