solitude组件wakatime编码时长侧边栏

本人博客原文
https://www.konoxin.top/posts/82e0e7c7/

前言

最近想在博客引入waketime的编码热力图，就研究了一下，

效果是这样的：

首先你已经使用过wakatime，

如果没有起前往如下教程，

{% link 'WakaTime的使用(vscode,idea,hbuilder)' 'WakaTime' 'https://juejin.cn/post/6981098690312142861' %}

教程

第一步

接下来前往WakaTime的API文档

{% link 'WakaTime的API文档' 'WakaTime' 'https://wakatime.com/share/embed' %}

按照如下操作会得到json的接口

第二步

在source -> _data -> aside.yml (没有就新建)

下增加如下代码

- name: code
  title: 编码时长
  class: card-code
  id:
  icon: fas fa-calendar-days
  content_id: code-info
  # content_css: 'height:160px;overflow:hidden'
  content_html: '<div class="codeTime"><div class="code" id="code"></div></div>
    <div class="legend">
        <div class="legend-item"><div class="legend-color" style="background: #ebedf0;"></div>无数据</div>
        <div class="legend-item"><div class="legend-color" style="background: #9be9a8;"></div>0-2小时</div>
        <div class="legend-item"><div class="legend-color" style="background: #40c463;"></div>2-4小时</div>
        <div class="legend-item"><div class="legend-color" style="background: #30a14e;"></div>4-6小时</div>
        <div class="legend-item"><div class="legend-color" style="background: #216e39;"></div>6+小时</div>
    </div>'

然后在你的自定义入口 js 下输入

在source -> js -> 你的js (没有就新建)

在const response = await fetch('')引入你在wakatime得到的接口

async function fetchData() {
  
    try {
        // 使用CORS代理
        const response = await fetch(`https://wakatime.com/xxx.json`);
        const data = await response.json();
        // 修正数据访问路径
        if (data) {
            console.log('成功获取数据，天数:', data.days.length);
            return data.days;
        } else {
            console.warn('数据格式不符合预期:', data);
            return [];
        }
    } catch (error) {
        console.error('获取数据失败:', error);
        return [];
    }
}

function getColor(hours) {
    if (!hours || hours === 0) return '#ebedf0'; // 无数据或0小时显示灰色
    if (hours < 2) return '#9be9a8'; // 0-2小时: 浅绿
    if (hours < 4) return '#40c463'; // 2-4小时: 中绿
    if (hours < 6) return '#30a14e'; // 4-6小时: 深绿
    return '#216e39'; // 6+小时: 最深绿
}

function renderCalendar(days) {
    const calendarEl = document.getElementById('code');
    const today = new Date();
    const startDate = new Date();
    startDate.setMonth(today.getMonth() - 11); // 显示最近12个月

    let currentDate = new Date(startDate);
    let currentMonth = currentDate.getMonth();

    // 添加月份标签
    // const monthLabel = document.createElement('div');
    // monthLabel.className = 'month-label';
    // monthLabel.textContent = currentDate.toLocaleString('zh-CN', { month: 'long' }) + ' ' + currentDate.getFullYear();
    // calendarEl.appendChild(monthLabel);

    // 跳过第一周的空白天数
    const firstDayOfWeek = currentDate.getDay();
    for (let i = 0; i < firstDayOfWeek; i++) {
        const emptyDay = document.createElement('div');
        emptyDay.className = 'day';
        emptyDay.style.visibility = 'hidden';
        calendarEl.appendChild(emptyDay);
    }

    while (currentDate <= today) {
        // 检查是否需要添加新的月份标签
        if (currentDate.getMonth() !== currentMonth) {
            currentMonth = currentDate.getMonth();
            // const monthLabel = document.createElement('div');
            // monthLabel.className = 'month-label';
            // monthLabel.textContent = currentDate.toLocaleString('zh-CN', { month: 'long' }) + ' ' + currentDate.getFullYear();
            // calendarEl.appendChild(monthLabel);
        }

        const dateStr = currentDate.toISOString().split('T')[0];
        const dayData = days.find(d => d.date === dateStr);
        const hours = dayData ? dayData.total / 3600 : 0; // 使用total字段计算小时数

        const dayEl = document.createElement('div');
        dayEl.className = 'day';
        dayEl.style.backgroundColor = getColor(hours);
        dayEl.setAttribute('data-date', dateStr);
        dayEl.setAttribute('data-hours', hours.toFixed(1));

        calendarEl.appendChild(dayEl);

        currentDate.setDate(currentDate.getDate() + 1);
    }
}

(async function () {

    const data = await fetchData();
    renderCalendar(data);
})();

async function codeTime(){
    const data = await fetchData();
    renderCalendar(data);
}
function handlePjaxComplete() {
    if (isHomePage()) {
        codeTime()
    }
}

function isHomePage() {
    return window.location.pathname === '/' || window.location.pathname === '/index.html';
}

window.onload = function () {
    document.addEventListener("pjax:complete", handlePjaxComplete);
}

接下来在你的自定义入口 css 下输入

在source -> css -> 你的css (没有就新建)

        .code {
          display: flex;
          flex-wrap: wrap;
          gap: 3px;
          margin-top: 7px;
        }

        .day {
          width: 10px;
          height: 10px;
          border-radius: 2px;
          background: #ebedf0;
          position: relative;
        }

        .day:hover::after {
          content: attr(data-date) " - " attr(data-hours) "小时";
          position: absolute;
          top: -30px;
          left: 50%;
          transform: translateX(-50%);
          background: #333;
          color: white;
          padding: 3px 6px;
          border-radius: 3px;
          font-size: 12px;
          white-space: nowrap;
          z-index: 100000;
  
        }

        .month-label {
          width: 100%;
          margin-top: 10px;
          font-size: 12px;
          color: #666;
        }

        .legend {
          margin-top: 5px;
          margin-bottom: 7px;
          display: flex;
          justify-content: space-between;
        }

        .legend-item {
          display: flex;
          align-items: center;
          font-size: 9px;
        }

        .legend-color {
          width: 12px;
          height: 12px;
          border-radius: 2px;
          margin-right: 5px;
        }

最后修改你的 _config.solitude.yml 中的aside下的home新增code

aside:
  # Values: about (info card), newestPost (latest article), allInfo (website information), newest_comment (latest comment)
  # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), newest_comment(最新评论)

  # Sticky: Fixed position / noSticky: Not fixed position
  # Sticky: 固定位置 / noSticky: 不固定位置
  home: # on the homepage
    noSticky: "about"
    Sticky: "code,allInfo"
  post: # on the article page
    noSticky: "about"
    Sticky: "newestPost"
  page: # on the page
    noSticky: "about"
    Sticky: "newestPost,allInfo"
  # 菜单栏位置(0: 左 1: 右)
  position: 1 # Sidebar positioning(0: left 1: right)

以及在extends下的head引入你的 js 和 css

示例：

extends:
  # Insert in head
  # 插入到 head
  head:
  - <link rel="stylesheet" href="/css/customize.css">
  - <script src="/js/custom.js"></script>

最后在首页就出现效果啦！

本文由博客一文多发平台 OpenWrite 发布！