修复热力图pjax刷新

themes/Ying/layouts/partials/footer.html

@@ -21,6 +21,7 @@
 <script src="/js/main.js"></script>
 <script src="/js/mypjax.js"></script>
 <script src="/js/nprogress.js"></script>
+<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@waline/client"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function () {

themes/Ying/layouts/shortcodes/heatmap.html

@@ -1,11 +1,5 @@
-<div id="heatmap" style="
+<div id="heatmap" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
-  max-width: 1900px;
+<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
-  height: 180px;
-  padding: 2px;
-  text-align: center;
-  "
-></div>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
 <script type="text/javascript">
   var chartDom = document.getElementById('heatmap');
   var myChart = echarts.init(chartDom);
@@ -13,138 +7,115 @@
       myChart.resize();
   };
   var option;
-
-  // echart heatmap data seems to only support two elements tuple
-  // it doesn't render when each item has 3 value
-  // it also only pass first 2 elements when reading event param
-  // so here we build a map to store additional metadata like link and title
-  // map format {date: [{wordcount, link, title}]}
-  // for more information see https://blog.douchi.space/hugo-blog-heatmap
   var dataMap = new Map();
   {{ range ((where .Site.RegularPages "Type" "post")) }}
     var key = {{ .Date.Format "2006-01-02" }};
     var value = dataMap.get(key);
-    var wordCount = {{ .WordCount }};
     var link = {{ .RelPermalink}};
     var title = {{ .Title }};
     
     // multiple posts in same day
     if (value == null) {
-      dataMap.set(key, [{wordCount, link, title}]);
+      dataMap.set(key, [{link, title}]);
     } else {
-      value.push({wordCount, link, title});
+      value.push({link, title});
     }
   {{- end -}}
 
   var data = [];
-  // sum up the word count
   for (const [key, value] of dataMap.entries()) {
-    var sum = 0;
+    data.push([key, value.length]);
-    for (const v of value) {
-      sum += v.wordCount;
-    }
-    data.push([key, (sum / 1000).toFixed(1)]);
   }
-  
+
   var startDate = new Date();
   var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
   var startDate = +new Date(year_Mill);
   var endDate = +new Date();
 
-  var dayTime = 3600 * 24 * 1000;
   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;
 
-  // change date range according to months we want to render
+  // 定义明亮模式下的颜色方案
-  function heatmap_width(months){             
+  var lightTheme = {
-    var startDate = new Date();
+      backgroundColor: '#FFFFFF',
-    var mill = startDate.setMonth((startDate.getMonth() - months));
+      fangkuaicolor:'#F4F4F4',
-    var endDate = +new Date();
+      gaoliangcolor: ['#ffd0b6'],
-    startDate = +new Date(mill);
+      riqiColor: '#999',
-
+      textbrcolor: '#FFF',
-    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
+      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
-    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
-
-    var showmonth = [];
-    showmonth.push([
-        startDate,
-        endDate
-    ]);
-    return showmonth
   };
 
-  function getRangeArr() {
+  // 定义暗黑模式下的颜色方案
-    const windowWidth = window.innerWidth;
+  var darkTheme = {
-    if (windowWidth >= 600) {
+      backgroundColor: '#1A1718',
-      return heatmap_width(12);
+      fangkuaicolor:'#282325',
-    } else if (windowWidth >= 400) {
+      gaoliangcolor: ['#b25f2f'],
-      return heatmap_width(9);
+      riqiColor: '#666',
-    } else {
+      textbrcolor: '#332D2F',
-      return heatmap_width(6);
+      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
-    }
+  };
-  }
+
+  // 根据浏览器主题模式选择当前主题
+  var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
 
   option = {
-    title: {
-        top: 0,
-        left: 'center',
-        text: ''
-    },
     tooltip: {
-      hideDelay: 1000,
+    hideDelay: 1000,
-      enterable: true,
+    enterable: true,
-      formatter: function (p) {
+    backgroundColor: currentTheme.textbrcolor,
+    borderWidth: 0, // 边框宽度为0
+    formatter: function (p) {
         const date = p.data[0];
         const posts = dataMap.get(date);
-        var content = `${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>";
+            content += "<br>";          
             var link = post.link;
             var title = post.title;
-            var wordCount = (post.wordCount / 1000).toFixed(1);
+            content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
-            content += `<a href="${link}" target="_blank">${title} | ${wordCount} k</a>`
         }
         return content;
-      }
+        }
     },
     visualMap: {
-        min: 0,
+        show: false,
-        max: 10,
-        type: 'piecewise',
-        orient: 'horizontal',
-        left: 'center',
-        top: 30,
-        
         inRange: {   
-          //  [floor color, ceiling color]
+          color: currentTheme.gaoliangcolor
-          color: ['#7aa8744c', '#7AA874' ] 
         },
-        splitNumber: 4,
-        text: ['千字', ''],
-        showLabel: true,
-        itemGap: 20,
     },
     calendar: {
-        top: 80,
         left: 20,
-        right: 4,
+        top:20,
+        bottom:0,
+        right: 0,
         cellSize: ['auto', 13],
-        range: getRangeArr(),
+        range: [startDate, endDate],
         itemStyle: {
-            color: '#F1F1F1',
+            color: currentTheme.fangkuaicolor,
-            borderWidth: 1.5,
+            borderWidth: 3.5,
-            borderColor: '#fff',
+            borderColor: currentTheme.backgroundColor, 
         },
         yearLabel: { show: false },
-        // the splitline between months. set to transparent for now.
+        monthLabel: { 
+        nameMap: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+        textStyle: {
+            color: currentTheme.riqiColor,
+        }
+    },
+        dayLabel: {
+            firstDay: 1,
+            nameMap: ['日', '一', '', '三', '', '五', ''],
+            textStyle: {
+                color: currentTheme.riqiColor
+            }
+        },
         splitLine: {
-          lineStyle: {
+            lineStyle: {
-            color: 'rgba(0, 0, 0, 0.0)',
+                color: currentTheme.xiankuangcolor,
-            // shadowColor: 'rgba(0, 0, 0, 0.5)',
+            }
-            // shadowBlur: 5,
-            // width: 0.5,
-            // type: 'dashed',
-          }
         }
     },
     series: {
@@ -153,6 +124,7 @@
         data: data,
     }
   };
+  
   myChart.setOption(option);
   myChart.on('click', function(params) {
     if (params.componentType === 'series') {
@@ -162,4 +134,4 @@
       window.open(link, '_blank').focus();
     }
 });
-</script> 
+</script>