added：昼夜模式，毛玻璃特效

2026-01-18 23:09:07 +08:00
1 parent 739c8056d6
commit c83c28fb9c
@@ -7,7 +7,7 @@
        }

        .links a {
-            color: #000;
+            color: var(--link-color-light);
            font-weight: 500;
            text-decoration: none;
        }
@@ -54,6 +54,19 @@
            opacity: 0.5;
            /* 鼠标悬浮时可以改变不透明度 */
        }
+
+        [data-theme="dark"] .links a {
+            color: var(--link-color-dark);
+        }
+
+        [data-theme="dark"] .url-name::before {
+            background-color: #e5e7eb;
+            opacity: 0.18;
+        }
+
+        [data-theme="dark"] .url-name:hover::before {
+            opacity: 0.35;
+        }
    </style>
    <div class="post-content" itemprop="articleBody">
        <div class="links">
@@ -66,4 +79,4 @@
        </div>
    </div>
 </div>
-{{ end }}
+{{ end }}
@@ -11,6 +11,10 @@
            background: #ff6262 !important;
        }
    }
+    [data-theme="dark"] .atk-pinned-badge {
+        color: #ffffff !important;
+        background: #ff6262 !important;
+    }
 </style>
 <!-- Artalk -->
 <div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
@@ -18,11 +22,13 @@
 <script src="/js/Artalk.js"></script>
 <script>
  if (document.querySelector("#Comments")) {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    Artalk.init({
-      el: '#Comments',                // 绑定元素的 Selector
-      server: 'https://artalk.usj.cc',  // 后端地址
-      site: '优世界',             // 你的站点名
-      flatMode: true
-    })
+      el: '#Comments',
+      server: 'https://artalk.usj.cc',
+      site: '优世界',
+      flatMode: true,
+      darkMode: isDark
+    });
  }
-</script>
+</script>
@@ -6,6 +6,21 @@
  <link rel="alternate" type="application/rss+xml" title="{{ site.Title }}" href="/rss.xml">
  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <script>
+    (function () {
+      try {
+        var theme = localStorage.getItem('theme');
+        if (!theme) {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            theme = 'dark';
+          } else {
+            theme = 'light';
+          }
+        }
+        document.documentElement.setAttribute('data-theme', theme);
+      } catch (e) {}
+    })();
+  </script>
  <!-- Stylesheets -->
  <link rel='stylesheet' href='/css/main.css'>
  <link rel="stylesheet" href="/css/normalize.css">
@@ -127,4 +142,4 @@
  <script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
  <meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
  <meta name="template" content="Amigo" />
-</head>
+</head>
@@ -1,21 +1,26 @@
 <div class="main">
    <div class="container">
        <div class="header">
-            <div class="head_author_img load-memos-editor">
-                <img src="{{ .Site.Params.authorImage }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
-            </div>
-            <div class="site-description">
-                <h2><span class="uk-invisible">{{ .Site.Params.description }}</span></h2>
-                <nav class="nav social uk-visible@m">
-                    <ul class="flat">
-                        {{ with .Site.Params.social }}
-                            {{ range . }}
-                                <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
+            <div class="header-top">
+                <div class="head_author_img load-memos-editor">
+                    <img src="{{ .Site.Params.authorImage }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
+                    <div class="avatar-theme-tip">
+                        点击头像切换昼夜
+                    </div>
+                </div>
+                <div class="site-description">
+                    <h2><span class="uk-invisible">{{ .Site.Params.description }}</span></h2>
+                    <nav class="nav social uk-visible@m">
+                        <ul class="flat">
+                            {{ with .Site.Params.social }}
+                                {{ range . }}
+                                    <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
+                                {{ end }}
                            {{ end }}
-                        {{ end }}
-                    </ul>
-                    <div class="yiyandes">{{ .Site.Params.description }}</div>
-                </nav>
+                        </ul>
+                        <div class="yiyandes">{{ .Site.Params.description }}</div>
+                    </nav>
+                </div>
            </div>
            <nav class="nav">
                <ul class="flat">
@@ -27,4 +32,4 @@
                    <!--<li class="active"><a href="/circles/">友圈</a></li>-->
                </ul>
            </nav>
-        </div>
+        </div>
@@ -1,13 +1,20 @@
 <div id="heatmap" class="uk-visible@m" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
 <script type="text/javascript">
-  var chartDom = document.getElementById('heatmap');
-  var myChart = echarts.init(chartDom);
-  window.onresize = function() {
+  function renderHeatmap() {
+    if (!window.echarts) return;
+    var chartDom = document.getElementById('heatmap');
+    if (!chartDom) return;
+    var existing = echarts.getInstanceByDom(chartDom);
+    if (existing) {
+      existing.dispose();
+    }
+    var myChart = echarts.init(chartDom);
+    window.addEventListener('resize', function() {
      myChart.resize();
-  };
-  var option;
-  var dataMap = new Map();
+    });
+    var option;
+    var dataMap = new Map();
  {{ range ((where .Site.RegularPages "Type" "post")) }}
    var key = {{ .Date.Format "2006-01-02" }};
    var value = dataMap.get(key);
@@ -22,121 +29,119 @@
    }
  {{- end -}}

-  var data = [];
-  for (const [key, value] of dataMap.entries()) {
-    data.push([key, value.length]);
+    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: ['#333'],
+        riqiColor: '#999',
+        textbrcolor: '#FFF',
+        xiankuangcolor:'rgba(0, 0, 0, 0.0)',
+    };
+
+    var darkTheme = {
+        backgroundColor: '#FFFFFF',
+        fangkuaicolor:'#F4F4F4',
+        gaoliangcolor: ['#333'],
+        riqiColor: '#999',
+        textbrcolor: '#FFF',
+        xiankuangcolor:'rgba(0, 0, 0, 0.0)',
+    };
+
+    var currentTheme = prefersDarkMode ? darkTheme : lightTheme;
+
+    option = {
+      tooltip: {
+      hideDelay: 1000,
+      enterable: true,
+      backgroundColor: currentTheme.textbrcolor,
+      borderWidth: 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: ['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: {
+                  color: currentTheme.xiankuangcolor,
+              }
+          }
+      },
+      series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: data,
+      }
+    };
+    
+    myChart.setOption(option);
+    myChart.resize();
+    myChart.on('click', function(params) {
+      if (params.componentType === 'series') {
+        const post = dataMap.get(params.data[0])[0];
+        const link = window.location.origin + post.link;
+        window.open(link, '_blank').focus();
+      }
+    });
  }

-  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: ['#333'],
-      riqiColor: '#999',
-      textbrcolor: '#FFF',
-      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
-  };
-
-  // 定义暗黑模式下的颜色方案
-  var darkTheme = {
-      // backgroundColor: '#1A1718',
-      // fangkuaicolor:'#282325',
-      // gaoliangcolor: ['#b25f2f'],
-      // riqiColor: '#666',
-      // textbrcolor: '#332D2F',
-      backgroundColor: '#FFFFFF',
-      fangkuaicolor:'#F4F4F4',
-      gaoliangcolor: ['#333'],
-      riqiColor: '#999',
-      textbrcolor: '#FFF',
-      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: ['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: {
-                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();
-    }
-});
-</script>
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setTimeout(renderHeatmap, 0);
+  } else {
+    document.addEventListener('DOMContentLoaded', renderHeatmap);
+  }
+</script>