博客更新热力图

<script type="text/javascript">
    // 获取最近一年的文章数据
    {{ $pages := where .Site.RegularPages "Date" ">" (now.AddDate -1 0 0) }}
    {{ $pages := $pages.Reverse }}
    var data = {
        "pages": [
            {{ range $index, $element := $pages }}
                {
                    "title": "{{ .Title }}",
                    "date": "{{ .Date.Format "2006-01-02" }}",
                    "year": "{{ .Date.Format "2006" }}",
                    "month": "{{ .Date.Format "01" }}",
                    "day": "{{ .Date.Format "02" }}",
                    "word_count": "{{ .WordCount }}"
                }{{ if ne (add $index 1) (len $pages) }},{{ end }}
                {{ end }}
        ]
    };
    // console.log(data)

</script>

// <script> 标签内
    var data2 = { pages: [] };
    // 请求json文件
    fetch("/assets/search-data.json")
      .then((respone) => respone.json())
      .then((posts) => {
        // 重新将数据组装成功想要的格式
        posts.forEach(function (item) {
          var date = item.date.substring(0, 10);
          var year = new Date(item.date).getFullYear();
          var month = new Date(item.date).getMonth() + 1;
          var day = new Date(item.date).getDate();
          item.year = year;
          item.date = date;
          item.month = month;
          item.day = day;
          item.word_count;
          data2.pages.push(item)
        });
      });

// ...其他逻辑代码 

{
  pages: [
    0: {
      date: '2024-04-01',
      year: '2024',
      month: '04',
      day: '01',
      word_count: 1000 //文章字数
    }
  ]
}

document.addEventListener("DOMContentLoaded", function () {

        // 创建新的Calheatmap实例
        const cal = new CalHeatmap(); 
        // 获取今天的日期
        const today = new Date();  
        // 将之前定义的数据放在blogInfo中
        let blogInfo = data;
        // 该时间用于告诉Cal-heatmap从那一天开始展示数据
        let startDate = new Date(today.setMonth(today.getMonth() - 1));

        //定义一个点击时间，我这里是点击热力图上的方块，自动跳转到文章归档页面对应的时间位置
        cal.on('click', (event, timestamp, value) => {
          // 将时间戳转换成标准时间，并截去前面的 `2024-04` 部分。
          var date = new Date(timestamp).toISOString().substring(0,7);
          // 跳转页面，并定位到id为2024-04的部分。
          window.location.href = '/archives#' + date;
        });

        // 绘制热力图
        cal.paint({
          // 设置热力图主题，light | dark 可选
          theme: 'dark',
          // 展示几个月的数据
          range: 2,
          // 热力图上的方块颜色部分
          scale: {
            color: {
              type: 'threshold',
              // 下面的range和domain定义了两个有四个值4的数组，domain为需要判断的数值内容（这里判断的是word_count)，如果在100到1000则使用'rgba(77, 208, 90,0.1)'颜色，其他类推。
              range: ['rgba(77, 208, 90,0.1)', 'rgba(77, 208, 90,0.3)', 'rgba(77, 208, 90,0.6)', 'rgba(77, 208, 90,1)'],
              domain: [100, 1000, 2000, 4000],
            },
          },
          // 设置主数据的格式
          domain: {
            //按月形式展示，可选的还有year等
            type: 'month',
            // 设置月和月之间的间隙，类似css中的gap属性
            gutter: 5,
            // 标签的位置
            position: 'right',
            // 我这里不想让他显示标签所以设置的null（但是不起作用，最后我通过css隐藏的）
            text: null
          },
          // 设置子数据
          subDomain: {
            // subDomain的数据形式，可以设置week、hour等，根据颗粒度来。
            // ghDay为该月的每一天的第一周和周末，按列展示，具有比较规整的排列
            type: 'ghDay',
            // 小格子的圆角度
            radius: 5,
            // 小格子的大小
            width: 18,
            height: 18,
            // 小格子的间隙，类似css中的gap
            gutter: 5,
          },
          // 设置展示时间
          date: {
            // 从合适开始展示数据，我们之前定义的startDate为2个月
            start: startDate,
            // 开始时间设置为周一
            locale: { weekStart: 1 },
          },
          // 设置数据部分
          data: {
            //数据设置为blogInfo.pages，x轴为date，y轴为我们的wordcount，并用groupY进汇总分组（把每天的写的字数加在一起）
            source: blogInfo.pages, x: "date", y: item => {
              return parseInt(item.word_count);
            }, groupY: 'sum'
          },
        }, 
        // 以下部分为插件定义
        [[
            // 悬浮提示插件
            Tooltip,
            {
              // 定一个函数，悬浮时把日期传入，通过日期查询当天有几天文章，和总字数多少
              text: function (date, value, dayjsDate) {
                const currentPost = blogInfo.pages.filter(page => page.date === dayjsDate.format('YYYY-MM-DD'));
                const postCount = currentPost.length;
                const postText = postCount === 0 ? '' : (postCount === 1 ? '共 1 篇' : `共 ${postCount} 篇`);
                const wordText = value ? ' 字 ' : '';
                const valueText = value ? value : '';

                return (
                  postText +
                  ' ' +
                  valueText +
                  wordText +
                  '<span class="block">' +
                  dayjsDate.format('YYYY-MM-DD') +
                  '</span>'
                );
              },
            },
          ],
          [
            // 日历标签插件，用以自定义右侧的周几标签
            CalendarLabel,
            {
              // 显示在右侧
              position: 'right',
              // 中周一开始显示一、二、三等
              text: () => ["一", "", "三", "", "五", "", "日"],
              // 居中显示
              textAlign:'middle',
              // 圆角弧度
              radius: 5
            },
          ],

        ]);

});