fixed bug

2026-01-31 19:24:22 +08:00
1 parent 7b945786ed
commit 54b18039e3
@@ -3,9 +3,30 @@
  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > *; cls: uk-animation-slide-bottom-small; delay: 100">
    {{ .Content }}
    
-    <!-- Album Section -->
+    {{ $sectionCount := 0 }}
+
+    <!-- Heatmap Section -->
+    {{ if site.Params.about.enableheatmap }}
+    {{ $sectionCount = add $sectionCount 1 }}
    <div style="margin-top: 40px;">
-        <div class="section-title">03 / 光影 (Album)</div>
+        <div class="section-title">{{ printf "%02d" $sectionCount }} / 热力图 (Hot Map)</div>
+        {{ partial "heatmap.html" . }}
+    </div>
+    {{ end }}
+
+    <!-- Skills Section -->
+    {{ if site.Params.about.enableskills }}
+    {{ $sectionCount = add $sectionCount 1 }}
+    <div style="margin-top: 40px;">
+        <div class="section-title">{{ printf "%02d" $sectionCount }} / 技能栈 (System Ops)</div>
+        {{ partial "skills.html" . }}
+    </div>
+    {{ end }}
+    
+    <!-- Album Section -->
+    {{ $sectionCount = add $sectionCount 1 }}
+    <div style="margin-top: 40px;">
+        <div class="section-title">{{ printf "%02d" $sectionCount }} / 光影 (Album)</div>
        <div class="album-content" uk-scrollspy="target: > .album-item; cls: uk-animation-slide-bottom-small; delay: 100">
            {{ range site.Data.album }}
            <div class="album-item">
@@ -12,7 +12,7 @@
        <div class="category-content">
            {{ $paginator := .Paginate .Pages }}
            {{ range $paginator.Pages.GroupByDate "2006" }}
-            <div class="year-group" data-aos="fade-up" data-aos-delay="100">
+            <div class="year-group" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: 100">
                <h2 class="year-title">{{ .Key }}</h2>
                <ul class="year-list">
                    {{ range .Pages }}
@@ -50,7 +50,7 @@
 {{ $iconfont := resources.Get "js/iconfont.js" }}
 {{ $lightgallery := resources.Get "js/lightgallery.umd.min.js" }}
 {{ $uikit := resources.Get "js/uikit.min.js" }}
-{{ $easylazyload := resources.Get "js/EasyLazyload.min.js" }}
+{{ $easylazyload := resources.Get "js/modules/lazyload.js" }}
 {{ $viewimage := resources.Get "js/view-image.min.js" }}
 {{ $artalk := resources.Get "js/Artalk.js" }}
 {{ $barrage := resources.Get "js/barrage.js" }}
@@ -61,7 +61,15 @@
 {{ $echarts := resources.Get "js/echarts.min.js" }}
 {{ $tiaozhuan := resources.Get "js/tiaozhuan.js" }}

-{{ $scripts := slice $iconfont $lightgallery $uikit $easylazyload $viewimage $artalk $barrage $main $mypjax $nprogress $message $echarts $tiaozhuan | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
+{{/* Modules */}}
+{{ $utils := resources.Get "js/modules/utils.js" }}
+{{ $loader := resources.Get "js/modules/loader.js" }}
+{{ $search := resources.Get "js/modules/search.js" }}
+{{ $floatingTools := resources.Get "js/modules/floating-tools.js" }}
+{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
+{{ $pjaxLib := resources.Get "js/pjax.js" }}
+
+{{ $scripts := slice $iconfont $lightgallery $uikit $easylazyload $viewimage $artalk $barrage $utils $loader $search $floatingTools $artalkModule $nprogress $pjaxLib $main $mypjax $message $echarts $tiaozhuan | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
 <script src="{{ $scripts.RelPermalink }}"></script>
 <script async src="/js/bsz.js"></script>
 </body>
@@ -205,11 +205,10 @@
      height: 50%;
    }
  </style>
-  <script src="/js/jquery.min.js"></script>
+  <!-- <script src="/js/jquery.min.js"></script> -->


  <script src="/js/instantpage.min.js" type="module" defer></script>
-  <script src="/js/pjax.js"></script>
  {{ if or (eq .Type "about") (eq .Type "post") }}
  <link rel="stylesheet" href="/css/mywaline.css" />
  {{ end }}
@@ -0,0 +1,200 @@
+<style>
+.heatmap-scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.heatmap-scroll-wrapper::-webkit-scrollbar {
+    display: none;
+}
+</style>
+
+<div id="heatmap-wrapper" class="heatmap-scroll-wrapper">
+  <div id="heatmap" style="max-width: 800px; height: 160px; margin: 0 auto 0px auto; padding: 10px; border-radius: 10px; transition: all 0.3s ease; display: block !important; visibility: visible !important; min-width: 300px;"></div>
+</div>
+
+<script type="text/javascript">
+  function renderHeatmap() {
+    if (!window.echarts) {
+        console.warn("ECharts not loaded yet, retrying...");
+        setTimeout(renderHeatmap, 500);
+        return;
+    }
+    var chartDom = document.getElementById('heatmap');
+    if (!chartDom) {
+        console.warn("Heatmap DOM not found");
+        return;
+    }
+    
+    // Dispose existing instance if any
+    var existing = echarts.getInstanceByDom(chartDom);
+    if (existing) {
+      existing.dispose();
+    }
+    
+    var myChart = echarts.init(chartDom, null, { renderer: 'svg' });
+    
+    // Check mobile state
+    var isMobile = window.innerWidth < 768;
+
+    // Handle resize with debouncing and re-render for responsive range
+    var resizeTimer;
+    window.addEventListener('resize', function() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(function() {
+        var newIsMobile = window.innerWidth < 768;
+        if (newIsMobile !== isMobile) {
+            // Re-render if switching between mobile/desktop to update range
+            renderHeatmap();
+        } else {
+            myChart.resize();
+        }
+      }, 100);
+    });
+
+    // Data Processing
+    var dataMap = new Map();
+    {{ range where .Site.RegularPages "Type" "post" }}
+      var key = "{{ .Date.Format "2006-01-02" }}";
+      var link = "{{ .RelPermalink }}";
+      var title = "{{ .Title }}";
+      var wordCount = {{ .WordCount }};
+      
+      if (!dataMap.has(key)) {
+        dataMap.set(key, []);
+      }
+      dataMap.get(key).push({link, title, wordCount});
+    {{- end -}}
+
+    var data = [];
+    for (const [key, value] of dataMap.entries()) {
+      data.push([key, value.length]);
+    }
+
+    // Date Range Logic
+    var endDate = new Date();
+    var startDate = new Date();
+    
+    if (isMobile) {
+        // Mobile: Show last 5 months to fit screen
+        startDate.setMonth(startDate.getMonth() - 5);
+    } else {
+        // Desktop: Show last 12 months
+        startDate.setFullYear(startDate.getFullYear() - 1);
+    }
+    
+    var startDateStr = echarts.format.formatTime('yyyy-MM-dd', startDate);
+    var endDateStr = echarts.format.formatTime('yyyy-MM-dd', endDate);
+
+    // Theme Logic
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    
+    // Minimalist Monochrome Colors (Black/White/Gray)
+    // Light: Light Gray -> Black
+    var colorLight = ['#f0f0f0', '#d9d9d9', '#a6a6a6', '#737373', '#000000'];
+    // Dark: Dark Gray -> White
+    var colorDark = ['#1f1f1f', '#404040', '#737373', '#a6a6a6', '#ffffff'];
+    
+    var rangeColors = isDark ? colorDark : colorLight;
+    var calendarLabelColor = isDark ? '#a6a6a6' : '#737373';
+    
+    var option = {
+      tooltip: {
+        padding: 10,
+        backgroundColor: isDark ? '#2d2d2d' : '#ffffff',
+        borderColor: isDark ? '#444' : '#eee',
+        borderWidth: 1,
+        textStyle: {
+          color: isDark ? '#eee' : '#333',
+          fontSize: 12
+        },
+        formatter: function (p) {
+          const date = p.data[0];
+          const posts = dataMap.get(date);
+          if (!posts) return;
+          
+          var content = `<div style="font-weight:bold; margin-bottom:5px;">${date}</div>`;
+          content += `<div style="max-height:150px; overflow-y:auto;">`;
+          for (const post of posts) {
+            content += `<div style="margin-bottom:2px;">`;
+            content += `<a href="${post.link}" target="_blank" style="color:${isDark ? '#fff' : '#000'}; text-decoration:none;">${post.title}</a>`;
+            content += `</div>`;
+          }
+          content += `</div>`;
+          return content;
+        }
+      },
+      visualMap: {
+        min: 0,
+        max: 4,
+        type: 'piecewise',
+        orient: 'horizontal',
+        left: 'center',
+        top: 0,
+        show: false,
+        inRange: {
+          color: rangeColors.slice(1)
+        }
+      },
+      calendar: {
+        top: 30,
+        left: 'center',
+        range: [startDateStr, endDateStr],
+        cellSize: ['auto', 13],
+        splitLine: { show: false },
+        itemStyle: {
+          color: isDark ? '#1f1f1f' : '#f0f0f0',
+          borderWidth: 2,
+          borderColor: isDark ? '#121212' : '#ffffff'
+        },
+        yearLabel: { show: false },
+        monthLabel: {
+          nameMap: 'CN',
+          color: calendarLabelColor,
+          fontSize: 12
+        },
+        dayLabel: {
+          show: true,
+          firstDay: 1,
+          nameMap: ['日', '一', '二', '三', '四', '五', '六'],
+          color: calendarLabelColor,
+          fontSize: 10
+        }
+      },
+      series: {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        data: data,
+        itemStyle: {
+           borderRadius: 2
+        }
+      }
+    };
+
+    myChart.setOption(option);
+  }
+
+  // Initial render
+  if (window.echarts) {
+      renderHeatmap();
+  } else {
+      // Retry a few times if script is still loading
+      setTimeout(renderHeatmap, 500);
+      setTimeout(renderHeatmap, 1500);
+      setTimeout(renderHeatmap, 3000);
+  }
+
+  // Re-render on theme change
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.type == "attributes" && mutation.attributeName == "data-theme") {
+        renderHeatmap();
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true
+  });
+</script>
@@ -0,0 +1,68 @@
+<section class="skills-section" style="margin-top: 0;">
+  <div class="skills-container">
+    <div class="skills-row">
+      <div class="skills-track">
+        <span class="skill-tag">Linux</span>
+        <span class="skill-tag">CentOS</span>
+        <span class="skill-tag">Ubuntu</span>
+        <span class="skill-tag">Debian</span>
+        <span class="skill-tag">RedHat</span>
+        <span class="skill-tag">Alpine</span>
+        <span class="skill-tag">Linux</span>
+        <span class="skill-tag">CentOS</span>
+        <span class="skill-tag">Ubuntu</span>
+        <span class="skill-tag">Debian</span>
+        <span class="skill-tag">RedHat</span>
+        <span class="skill-tag">Alpine</span>
+      </div>
+    </div>
+    <div class="skills-row">
+      <div class="skills-track skills-track-reverse">
+        <span class="skill-tag">Docker</span>
+        <span class="skill-tag">Kubernetes</span>
+        <span class="skill-tag">Nginx</span>
+        <span class="skill-tag">Apache</span>
+        <span class="skill-tag">Tomcat</span>
+        <span class="skill-tag">Caddy</span>
+        <span class="skill-tag">Docker</span>
+        <span class="skill-tag">Kubernetes</span>
+        <span class="skill-tag">Nginx</span>
+        <span class="skill-tag">Apache</span>
+        <span class="skill-tag">Tomcat</span>
+        <span class="skill-tag">Caddy</span>
+      </div>
+    </div>
+    <div class="skills-row">
+      <div class="skills-track">
+        <span class="skill-tag">Shell</span>
+        <span class="skill-tag">Python</span>
+        <span class="skill-tag">MySQL</span>
+        <span class="skill-tag">Redis</span>
+        <span class="skill-tag">MongoDB</span>
+        <span class="skill-tag">PostgreSQL</span>
+        <span class="skill-tag">Shell</span>
+        <span class="skill-tag">Python</span>
+        <span class="skill-tag">MySQL</span>
+        <span class="skill-tag">Redis</span>
+        <span class="skill-tag">MongoDB</span>
+        <span class="skill-tag">PostgreSQL</span>
+      </div>
+    </div>
+    <div class="skills-row">
+      <div class="skills-track skills-track-reverse">
+        <span class="skill-tag">Git</span>
+        <span class="skill-tag">Jenkins</span>
+        <span class="skill-tag">Ansible</span>
+        <span class="skill-tag">Prometheus</span>
+        <span class="skill-tag">Grafana</span>
+        <span class="skill-tag">ELK</span>
+        <span class="skill-tag">Git</span>
+        <span class="skill-tag">Jenkins</span>
+        <span class="skill-tag">Ansible</span>
+        <span class="skill-tag">Prometheus</span>
+        <span class="skill-tag">ELK</span>
+        <span class="skill-tag">Git</span>
+      </div>
+    </div>
+  </div>
+</section>