blog/themes/farallon/layouts/index.html

{{ define "main" }}
<main class="site--main">
    {{ if $.Site.Params.showprofile }}
    {{ partial "profile.html" . }}
    {{ end }}
    <style>
        :root {
    /* GitHub Light Color */
    --ht-main: #334155;
    --ht-day-bg: #ebedf0;
    --ht-tooltip: #24292f;
    --ht-tooltip-bg: #fff;
    --ht-lv-0: #ebedf0;
    --ht-lv-1: #9be9a8;
    --ht-lv-2: #40c463;
    --ht-lv-3: #30a14e;
    --ht-lv-4: #216e39;
}

[data-theme="dark"] {
    /* GitHub Dark Dimmed Color */
    --ht-main: #94a3b8;
    --ht-day-bg: #161b22;
    --ht-tooltip: #24292f;
    --ht-tooltip-bg: #fff;
    --ht-lv-0: #161b22;
    --ht-lv-1: #0e4429;
    --ht-lv-2: #006d32;
    --ht-lv-3: #26a641;
    --ht-lv-4: #39d353;
}

.heatmap_container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 10px;
    line-height: 12px;
    color: var(--ht-main);
}

.heatmap_content {
    display: flex;
    flex-direction: row;
    align-items: flex-end
}

.heatmap_week {
    display: flex;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right
}

.heatmap_main {
    display: flex;
    flex-direction: column
}

.heatmap_month {
    display: flex;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

.heatmap {
    display: flex;
    flex-direction: row;
    height: 84px;
}

.heatmap_footer {
    display: flex;
    margin-top: 0.5rem;
    align-items: center
}

.heatmap_level {
    display: flex;
    gap: 2px;
    margin: 0 0.25rem;
    flex-direction: row;
    align-items: center;
    width: max-content;
    height: 10px
}

.heatmap_level_item {
    display: block;
    border-radius: 0.125rem;
    width: 10px;
    height: 10px;
}

.heatmap_level_0 {
    background: var(--ht-lv-0);
}

.heatmap_level_1 {
    background: var(--ht-lv-1);
}

.heatmap_level_2 {
    background: var(--ht-lv-2);
}

.heatmap_level_3 {
    background: var(--ht-lv-3);
}

.heatmap_level_4 {
    background: var(--ht-lv-4);
}

.heatmap_week {
    display: flex;
    flex-direction: column;
}

.heatmap_day {
    width: 10px;
    height: 10px;
    background-color: var(--ht-day-bg);
    margin: 1px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
}

.heatmap_tooltip {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: max-content;
    color: var(--ht-tooltip);
    background-color: var(--ht-tooltip-bg);
    font-size: 12px;
    line-height: 16px;
    padding: 8px;
    border-radius: 3px;
    white-space: pre-wrap;
    opacity: 1;
    transition: 0.3s;
    z-index: 1000;
    text-align: right;
    transform: translateX(-50%);
}

.heatmap_tooltip_count,
.heatmap_tooltip_post {
    display: inline-block;
}

.heatmap_tooltip_title,
.heatmap_tooltip_date {
    display: block;
}

.heatmap_tooltip_date {
    margin: 0 0.25rem;
}

.heatmap_day_level_0 {
    background-color: var(--ht-lv-0);
}

.heatmap_day_level_1 {
    background-color: var(--ht-lv-1);
}

.heatmap_day_level_2 {
    background-color: var(--ht-lv-2);
}

.heatmap_day_level_3 {
    background-color: var(--ht-lv-3);
}

.heatmap_day_level_4 {
    background-color: var(--ht-lv-4);
}

</style> <div id="heatmap" style="max-width: 900px;height: 110px;margin-bottom: 40px;"></div>
    <div class="heatmap_container"> <!-- 全部用 Flex 排版 -->
        
        <div class="heatmap_footer">
            <div class="heatmap_less">Less</div>
            <div class="heatmap_level">
                <span class="heatmap_level_item heatmap_level_0"></span>
                <span class="heatmap_level_item heatmap_level_1"></span>
                <span class="heatmap_level_item heatmap_level_2"></span>
                <span class="heatmap_level_item heatmap_level_3"></span>
                <span class="heatmap_level_item heatmap_level_4"></span>
            </div>
            <div class="heatmap_more">More</div>
        </div>
    </div>
    
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script type="text/javascript">

  var chartDom = document.getElementById('heatmap');
  var myChart = echarts.init(chartDom);
  window.onresize = function() {
      myChart.resize();
  };
  var option;
  var dataMap = new Map();
  {{ range ((where .Site.RegularPages "Type" "posts")) }}
    var key = {{ .Date.Format "2006-01-02" }};
    var value = dataMap.get(key);
    var link = {{ .RelPermalink}};
    var title = {{ .Title }};
    
    // multiple posts in same day
    if (value == null) {
      dataMap.set(key, [{link, title}]);
    } else {
      value.push({link, title});
    }
  {{- end -}}

  var data = [];
  for (const [key, value] of dataMap.entries()) {
    data.push([key, value.length]);
  }

  var startDate = new Date();
  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
  var startDate = +new Date(year_Mill);
  var endDate = +new Date();

  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
  
  // 检测浏览器主题模式并选择颜色方案
  var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

  // 定义明亮模式下的颜色方案
  var lightTheme = {
      backgroundColor: '#FFFFFF',
      fangkuaicolor:'#F4F4F4',
      gaoliangcolor: ['#9be9a8'],
      riqiColor: '#999',
      textbrcolor: '#FFF',
      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
  };

  // 定义暗黑模式下的颜色方案
  var darkTheme = {
      backgroundColor: '#1A1718',
      fangkuaicolor:'#282325',
      gaoliangcolor: ['#0e4429'],
      riqiColor: '#666',
      textbrcolor: '#332D2F',
      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
  };

  // 根据浏览器主题模式选择当前主题
  var currentTheme = prefersDarkMode ? darkTheme : lightTheme;

  option = {
    tooltip: {
    hideDelay: 1000,
    enterable: true,
    backgroundColor: currentTheme.textbrcolor,
    borderWidth: 0, // 边框宽度为0
    formatter: function (p) {
        const date = p.data[0];
        const posts = dataMap.get(date);
        var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
        for (const [i, post] of posts.entries()) {
            content += "<br>";          
            var link = post.link;
            var title = post.title;
            content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
        }
        return content;
        }
    },
    visualMap: {
        show: false,
        inRange: {   
          color: currentTheme.gaoliangcolor
        },
    },
    calendar: {
        left: 20,
        top:20,
        bottom:0,
        right: 0,
        cellSize: ['auto', 13],
        range: [startDate, endDate],
        itemStyle: {
            color: currentTheme.fangkuaicolor,
            borderWidth: 3.5,
            borderColor: currentTheme.backgroundColor, 
        },
        yearLabel: { show: false },
        monthLabel: { 
        nameMap: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        textStyle: {
            color: currentTheme.riqiColor,
        }
    },
        dayLabel: {
            firstDay: 1,
            nameMap: ['日', '一', '', '三', '', '五', ''],
            textStyle: {
                color: currentTheme.riqiColor
            }
        },
        splitLine: {
            lineStyle: {
                color: currentTheme.xiankuangcolor,
            }
        }
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data,
    }
  };
  
  myChart.setOption(option);
  myChart.on('click', function(params) {
    if (params.componentType === 'series') {
      // open the first post on the day
      const post = dataMap.get(params.data[0])[0];
      const link = window.location.origin + post.link;
      window.open(link, '_blank').focus();
    }
});
function createDay(date, title, count, post) {
    const day = document.createElement("div");

    day.className = "heatmap_day";

    day.setAttribute("data-title", title);
    day.setAttribute("data-count", count);
    day.setAttribute("data-post", post);
    day.setAttribute("data-date", date);

    day.addEventListener("mouseenter", function () {
        const tooltip = document.createElement("div");
        tooltip.className = "heatmap_tooltip";

        let tooltipContent = "";

        if (post && parseInt(post, 10) !== 0) {
            tooltipContent += '<span class="heatmap_tooltip_post">' + '共 ' + post + ' 篇' + '</span>';
        }

        if (count && parseInt(count, 10) !== 0) {
            tooltipContent += '<span class="heatmap_tooltip_count">' + ' ' + count + ' 字；' + '</span>';
        }

        if (title && parseInt(title, 10) !== 0) {
            tooltipContent += '<span class="heatmap_tooltip_title">' + title + '</span>';
        }

        if (date) {
            tooltipContent += '<span class="heatmap_tooltip_date">' + date + '</span>';
        }

        tooltip.innerHTML = tooltipContent;
        day.appendChild(tooltip);
    });

    day.addEventListener("mouseleave", function () {
        const tooltip = day.querySelector(".heatmap_tooltip");
        if (tooltip) {
            day.removeChild(tooltip);
        }
    });

    if (count == 0) {
        day.classList.add("heatmap_day_level_0");
    } else if (count > 0 && count < 1000) {
        day.classList.add("heatmap_day_level_1");
    } else if (count >= 1000 && count < 2000) {
        day.classList.add("heatmap_day_level_2");
    } else if (count >= 2000 && count < 3000) {
        day.classList.add("heatmap_day_level_3");
    } else {
        day.classList.add("heatmap_day_level_4");
    }

    return day;
}

</script>   
    <div class="articleList">
        {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
        {{ $paginator := .Paginate ($pages) }}
        {{ range $paginator.Pages }}
        {{ if eq .Type "memo" }}
        {{ partial "memo.html" . }}
        {{ else }}
        {{ partial "post.html" . }}
        {{ end }}
        {{ end }}
    </div>
    {{ $paginator := .Paginate (where .Pages "Type" "posts") }}
    {{partial "pagination.html" .}}
</main>
{{ end }}