From a0cba86ab84dc6b431e854590a85bfe5db8e3934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= <jkjoy@live.cn>
Date: Mon, 13 May 2024 09:05:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=83=AD=E5=8A=9B=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hugo.toml                          |   9 +-
 themes/farallon/layouts/index.html | 395 +++++++++++++++++++++++++++++
 2 files changed, 401 insertions(+), 3 deletions(-)

diff --git a/hugo.toml b/hugo.toml
index db6807c..a24d77b 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -14,11 +14,11 @@ theme = 'farallon'
     [[languages.zh-cn.menu.main]]
     name="影音"
     url="/movies/"
-    weight="4"
+    weight="5"
     [[languages.zh-cn.menu.main]]
     name="分类"
     url="/categories/"
-    weight="2"
+    weight="4"
     [[languages.zh-cn.menu.main]]
     name="标签"
     url="/tags/"
@@ -26,8 +26,11 @@ theme = 'farallon'
     [[languages.zh-cn.menu.main]]
     name="文章"
     url="/archives/"
+    weight="2"
+    [[languages.zh-cn.menu.main]]
+    name="首页"
+    url="/"
     weight="1"
-
 [taxonomies]
   category = 'categories'
   tag = 'tags'
diff --git a/themes/farallon/layouts/index.html b/themes/farallon/layouts/index.html
index 26c9f36..52a1844 100644
--- a/themes/farallon/layouts/index.html
+++ b/themes/farallon/layouts/index.html
@@ -3,6 +3,401 @@
     {{ 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) }}