给博客添加heatmap

给博客添加heatmap

January 14, 2024
本文共949字，阅读约需要2分钟
故纸堆
技术 / 教程

感谢椒盐豆豉的教程

因为我想要在鼠标移动到某个日期的时候显示所有在这一天发布的文章链接（虽然目前为止还没有在同一天发布超过一篇文章···），于是对代码进行了一些改动。

要实现这个功能就需要将某个特定日期下发布的所有文章放进一个array里，与当日的总字数一起储存在由日期作为key的map里面：

var postsByDate = new Map();

{{ range ((where .Site.RegularPages "Type" "posts"))  }}
    var date = {{ .Date.Format "2006-01-02" }};
    var postObj = new Map();
    postObj.set("title", {{ .Title }});
    postObj.set("link", {{ .RelPermalink }});
    var wordCount = {{ .WordCount }};

    var data = postsByDate.get(date);
    if (data === undefined) {
        data = new Map();
        data.set("posts", []);
        data.set("totalWordCount", 0);
    }
    var posts = data.get("posts");
    posts.push(postObj);
    var totalWordCount = data.get("totalWordCount");
    totalWordCount += wordCount;
    data.set("totalWordCount", totalWordCount);
    postsByDate.set(date, data);
{{- end -}}

上面的代码执行完以后postsByDate的数据结构会变成类似下面这个样子：

{
    '2022-10-13': {
        'posts': [
            {'title': '一篇文章', 'link': 'posts/some-post'},
            {'title': '另一篇文章', 'link': 'posts/another-post'},
        ],
        'totalWordCount': 404,
    },
    '2022-11-24': {
        'posts': [
            {'title': '又一篇文章', 'link': 'posts/one-more-post'},
        ],
        'totalWordCount': 401,
    },
}

接下来需要改动option中tooltip上的formatter这个attribute来使其显示当日的所有文章链接。前面已经把文章array储存在postsByDate里了，这里只需要从传入的参数里提取出对应的date再以此为key从postsByDate里获取文章信息（关于参数的结构可以参见官方文档）。这里可以直接返回构建好的html string：

function(params) {
    const date = params.data[0];
    const posts = postsByDate.get(date).get("posts");
    var content = `${date}`;
    for (const [i, post] of posts.entries()) {
        content += "<br>";
        var link = post.get("link");
        var title = post.get("title");
        content += `<a href="${link}" target="_blank">${title}</a>`
    }
    return content;
}