2024.7.13

themes/Ying/layouts/_default/about.html

@@ -1,158 +1,7 @@
 {{ define "main" }}
 <div id="pjax-container">
-  <h2>热力图</h2>
-  <div id="heatmap" style="
-  max-width: 600px;
-  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);
-  window.onresize = function() {
-      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 = {{ div .WordCount 1000.0 | lang.FormatNumber 1 }};
-    var link = {{ .RelPermalink}};
-    var title = {{ .Title }};
-    
-    // multiple posts in same day, chose the longer one
-    // can also store all posts and use sum as value, but seems like an overkill
-    if (value == null || wordCount > value[0]) {
-      dataMap.set(key, {wordCount, link, title});
-    }
-  {{- end -}}
-
-  var data = [];
-  for (const [key, value] of dataMap.entries()) {
-    data.push([key, value.wordCount]);
-  }
-  
-  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);
-
-  // change date range according to months we want to render
-  function heatmap_width(months){             
-    var startDate = new Date();
-    var mill = startDate.setMonth((startDate.getMonth() - months));
-    var endDate = +new Date();
-    startDate = +new Date(mill);
-
-    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
-    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
-
-    var showmonth = [];
-    showmonth.push([
-        startDate,
-        endDate
-    ]);
-    return showmonth
-  };
-
-  function getRangeArr() {
-    const windowWidth = window.innerWidth;
-    if (windowWidth >= 600) {
-      return heatmap_width(12);
-    } else if (windowWidth >= 400) {
-      return heatmap_width(9);
-    } else {
-      return heatmap_width(6);
-    }
-  }
-
-  option = {
-    title: {
-        top: 0,
-        left: 'center',
-        text: ''
-    },
-    tooltip: {
-      formatter: function (p) {
-        const post = dataMap.get(p.data[0]);
-        return post.title + ' | ' + post.wordCount + ' 千字';
-      }
-    },
-    visualMap: {
-        min: 0,
-        max: 10,
-        type: 'piecewise',
-        orient: 'horizontal',
-        left: 'center',
-        top: 30,
-        
-        inRange: {   
-          //  [floor color, ceiling color]
-          color: ['#7aa8744c', '#7AA874' ] 
-        },
-        splitNumber: 4,
-        text: ['千字', ''],
-        showLabel: true,
-        itemGap: 20,
-    },
-    calendar: {
-        top: 80,
-        left: 20,
-        right: 4,
-        cellSize: ['auto', 12],
-        range: getRangeArr(),
-        itemStyle: {
-            color: '#F1F1F1',
-            borderWidth: 2.5,
-            borderColor: '#fff',
-        },
-        yearLabel: { show: false },
-        // the splitline between months. set to transparent for now.
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(0, 0, 0, 0.0)',
-            // shadowColor: 'rgba(0, 0, 0, 0.5)',
-            // shadowBlur: 5,
-            // width: 0.5,
-            // type: 'dashed',
-          }
-        }
-    },
-    series: {
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        data: data,
-    }
-  };
-  myChart.setOption(option);
-  myChart.on('click', function(params) {
-    if (params.componentType === 'series') {
-      const post = dataMap.get(params.data[0]);
-      const link = window.location.origin + post.link;
-      window.open(link, '_blank').focus();
-    }
-});
-</script> 
-    <div class="post-content" itemprop="articleBody">
-      {{ .Content }}
-    </div>
- 
-  
+  <div class="post-content" itemprop="articleBody">
+    {{ .Content }}
   </div>
-
-
-  {{ end }}
+</div>
+{{ end }}