hexo-theme-stellar 1.33.0 → 1.34.0

package/source/css/_components/widgets/ghuser.styl

@@ -1,6 +1,19 @@
 .widget-wrapper.user-card
   .widget-header+.widget-body
     margin: 0.75rem 0
+.widget-wrapper.user-card .widget-header
+  a
+    display: flex
+    align-items: center
+    color: var(--text-p2)
+    trans1 all
+    svg
+      margin-right: 4px
+      width 1em
+      height: 1em
+    &:hover
+      color: var(--text)
+
 .widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
@@ -33,7 +46,7 @@
   .follow 
     font-weight: 500
     border-radius: 64px
-    margin: 1rem 0 0
+    margin-top: 1rem
     padding: 0.5rem 1rem
     background: var(--theme)
     color: white
@@ -53,7 +66,7 @@
       background: var(--accent)
 
   .buttons
-    margin: 1rem 0
+    margin-top: 1rem
     align-self: stretch
     display: grid
     grid-gap: 2px
@@ -76,4 +89,7 @@
     .desc
       font-size: $fs-12
       color: var(--text-p3)
-      font-weight: 500
+      font-weight: 500
+
+.widget-wrapper.user-card .widget-header+.widget-body
+  margin-top: 4px

package/source/css/_components/widgets/list.styl

@@ -4,6 +4,7 @@
     padding: 6px 16px
     display: block
     border-radius: $border-bar
+    corner-shape: superellipse(1.2)
     color: var(--text-p1)
     trans1 background
     &.active,&:hover

package/source/css/_components/widgets/toc.styl

@@ -16,6 +16,9 @@
     @media screen and (min-width: $device-laptop)
       background: var(--background)
 
+.l_left .widget-wrapper.toc
+  @media screen and (min-width: $device-laptop)
+    background: none
 
 // 目录基本样式
 .widget-wrapper.toc .toc

package/source/css/_components/widgets/widgets.styl

@@ -77,3 +77,7 @@
   @media screen and (min-width: $device-laptop)
     .widget-wrapper.markdown .widget-body
       background: var(--block)
+
+.leftbar-container
+  .header+.widgets
+    margin-top: 1rem

package/source/css/_custom.styl

@@ -31,12 +31,15 @@ $fsp3 = 'calc(%s - 3px)' % $fs-body
 // site main
 $site-background-image = hexo-config('style.site.background-image')
 $leftbar-background-image = hexo-config('style.leftbar.background-image')
-$leftbar-background-color = hexo-config('style.leftbar.background-color')
+$leftbar-background-color-light = hexo-config('style.leftbar.background-color-light')
+$leftbar-background-color-dark = hexo-config('style.leftbar.background-color-dark')
 
 
 // colors
-$c-theme = hsl(192deg, 98%, 55%)
-$c-accent = hsl(14deg, 100%, 57%)
+$c-theme = convert(hexo-config('style.color.theme'))
+$c-accent = convert(hexo-config('style.color.accent'))
+$c-link = convert(hexo-config('style.color.link'))
+
 $c-base-hue = 210deg // 背景/文本颜色的主基调（一般看不出来不需要修改）
 
 // icons

package/source/css/_defines/func.styl

@@ -136,6 +136,17 @@ hoverable-card()
 newblur()
   box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
   trans1: all
+  text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
+  :root[data-theme="dark"] &
+    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
+  @media (prefers-color-scheme: dark)
+    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
+  nav a:not(.active,:hover)
+    filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
+    :root[data-theme="dark"] &
+      filter: none
+    @media (prefers-color-scheme: dark)
+      filter: none
   &:before,&:after
     z-index -1
     position: absolute
@@ -149,17 +160,22 @@ newblur()
   &:before
     backdrop-filter: blur(8px)
     -webkit-backdrop-filter: blur(8px)
-    background: var(--bg-a20)
+    background: rgba(white, 0.3)
+    margin: 1px
+    :root[data-theme="dark"] &
+      background: rgba(white, 0.2)
+    @media (prefers-color-scheme: dark)
+      background: rgba(white, 0.2)
   &:after
-    --blur-px: 24px
-    --blur-sat: 500%
-    background: var(--bg-a50)
+    --blur-px: 16px
+    --blur-sat: 300%
     backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
     -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
-    -webkit-mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
+    mask: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
+    -webkit-mask-image: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
     box-shadow: inset 0 0 4px 1px rgba(white, 0.5)
     trans1 all
+    :root[data-theme="dark"] &
+      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
     @media (prefers-color-scheme: dark)
-      opacity 0.4
-      background: var(--bg-a20)
+      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)

package/source/css/_defines/theme_base.styl

@@ -91,7 +91,7 @@ dynamic-theme-dark()
   // 强调色
   --accent: $c-accent
   // 链接
-  x-set-link-with-color(hsl(207deg, 90%, 54%))
+  x-set-link-with-color($c-link)
 
   // dynamic colors
   dynamic-theme-light()

package/source/css/_plugins/comments/artalk.styl

@@ -158,6 +158,7 @@
     >img
       margin: var(--gap-p) auto
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
   a>img
     display: inline
   img[atk-emoticon]
@@ -175,5 +176,8 @@
     padding: 0.25rem 1rem
     p
       color: var(--text-p3)
-  .atk-content a
-    --at-color-main: var(--link)
+  .atk-content
+    a
+      --at-color-main: var(--link)
+    pre>code
+      padding: 0

package/source/css/_plugins/comments/twikoo.styl

@@ -6,6 +6,7 @@
     .vemoji, .tk-owo-emotion
       width: unset
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
       max-height: 24px
       max-width: 100px
       display: inline
@@ -14,6 +15,7 @@
       max-width: 400px
       max-height: 400px
       border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
 
 .OwO
   .OwO-body

package/source/css/_plugins/index.styl

@@ -14,6 +14,8 @@ if hexo-config('plugins.copycode.enable')
   @import 'copycode'
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
+if hexo-config('plugins.pjax.enable')
+  @import 'pjax'
 
 if hexo-config('plugins.katex.enable')
   @import 'katex'

package/source/css/_plugins/pjax.styl

@@ -0,0 +1,61 @@
+// PJAX - Seamless page transitions
+
+// Custom easing for smooth, natural animations
+$pjax-easing = cubic-bezier(0.4, 0, 0.2, 1)
+$pjax-easing-out = cubic-bezier(0.16, 1, 0.3, 1)  // Expo out - more elegant deceleration
+$pjax-duration = 0.4s
+$pjax-translate-distance = convert(hexo-config('plugins.pjax.translate-distance'))
+
+.page-loading-bar
+  position: fixed
+  top: 0
+  left: calc(50% - 16px)
+  width: 32px
+  height: 32px
+  display: none
+  flex-direction: column
+  align-items: center
+  img
+    height: 100%
+body.pjax-loading 
+  .page-loading-bar
+    display: flex
+
+// Main content transition base
+.l_body .l_main, #l_cover
+  transition: opacity $pjax-duration $pjax-easing, transform $pjax-duration $pjax-easing
+
+// Fade-in animation keyframes
+@keyframes pjax-fade-in
+  0%
+    opacity: 0
+    transform: translateY($pjax-translate-distance)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+// Loading state - content fades out and moves down slightly
+body.pjax-loading
+  .l_body .l_main, #l_cover
+    opacity: 0.4
+    transform: translateY($pjax-translate-distance)
+    pointer-events: none
+
+// Loaded state - content fades in with upward motion
+body.pjax-loaded
+  .l_body .l_main, #l_cover
+    animation: pjax-fade-in $pjax-duration $pjax-easing-out forwards
+
+// Respect reduced motion preferences
+@media (prefers-reduced-motion: reduce)
+  .l_body .l_main, #l_cover
+    transition: opacity $pjax-duration ease
+  body.pjax-loading .l_body .l_main, body.pjax-loading #l_cover
+    transform: none
+  body.pjax-loaded .l_body .l_main, body.pjax-loaded #l_cover
+    animation: pjax-fade-simple $pjax-duration ease forwards
+  @keyframes pjax-fade-simple
+    0%
+      opacity: 0
+    100%
+      opacity: 1

package/source/js/main.js

@@ -37,10 +37,11 @@ const util = {
     const el = document.getElementById(id);
     if (el) {
       el.select();
-      document.execCommand("Copy");
-      if (msg && msg.length > 0) {
-        hud.toast(msg, 2500);
-      }
+      navigator.clipboard.writeText(el.value).then(() => {
+        if (msg && msg.length > 0) {
+          hud.toast(msg, 2500);
+        }
+      }).catch(() => {});
     }
   },
 
@@ -52,11 +53,11 @@ const util = {
   },
 
   scrollTop: () => {
-    window.scrollTo({top: 0, behavior: "smooth"});
+    window.scrollTo({ top: 0, behavior: "smooth" });
   },
 
   scrollComment: () => {
-    document.getElementById('comments').scrollIntoView({behavior: "smooth"});
+    document.getElementById('comments').scrollIntoView({ behavior: "smooth" });
   },
 
   viewportLazyload: (target, func, enabled = true) => {
@@ -83,8 +84,8 @@ const hud = {
     el.innerHTML = msg;
     document.body.appendChild(el);
 
-    setTimeout(function(){ document.body.removeChild(el) }, d);
-    
+    setTimeout(function () { document.body.removeChild(el) }, d);
+
   },
 
 }
@@ -138,20 +139,20 @@ const init = {
         const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100;
         const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64;
         if (offsetTop < 0) {
-          e0.scrollBy({top: offsetTop, behavior: "smooth"});
+          e0.scrollBy({ top: offsetTop, behavior: "smooth" });
         } else if (offsetBottom > 0) {
-          e0.scrollBy({top: offsetBottom, behavior: "smooth"});
+          e0.scrollBy({ top: offsetBottom, behavior: "smooth" });
         }
       }
-      
+
       var timeout = null;
-      window.addEventListener('scroll', function() {
+      window.addEventListener('scroll', function () {
         activeTOC();
-        if(timeout !== null) clearTimeout(timeout);
-        timeout = setTimeout(function() {
+        if (timeout !== null) clearTimeout(timeout);
+        timeout = setTimeout(function () {
           scrollTOC();
         }.bind(this), 50);
-      });      
+      });
     })
   },
   sidebar: () => {
@@ -202,24 +203,44 @@ const init = {
 
   canonicalCheck: () => {
     const canonical = window.canonical;
-    function showTip(isOfficial = false) {
+    function originStatusCheck() {
+      return new Promise((resolve) => {
+        if (window.canonical.originalHost === window.location.hostname) {
+          resolve(true);
+          return;
+        }
+        const scriptUrl = `https://${window.canonical.originalHost}${window.canonical.param.checklink}`;
+        const script = document.createElement('script');
+        script.src = scriptUrl;
+        script.type = 'text/javascript';
+        script.onload = function () { resolve(true); };
+        script.onerror = function () { resolve(false); };
+        document.head.appendChild(script);
+      });
+    }
+    async function showTip(isOfficial = false) {
       const meta = document.createElement('meta');
       meta.name = 'robots';
       meta.content = 'noindex, nofollow';
       document.head.appendChild(meta);
       const notice = document.createElement('div');
       const originalURL = `https://${canonical.originalHost}`;
+      const currentURL = canonical.param.permalink.startsWith("http") ? canonical.param.permalink : originalURL;
       if (isOfficial) {
+        const closeEnable = window.localStorage.getItem('Stellar.canonical.closeEnable') === 'true'
+        const closedToday = window.localStorage.getItem('Stellar.canonical.closeTime') === new Date().toDateString()
+        if ((closeEnable && closedToday) || !(await originStatusCheck())) return;
         notice.className = 'canonical-tip official';
         notice.innerHTML = `
-        <a href="${originalURL}" target="_self" rel="noopener noreferrer">
-        本站为官方备用站，仅供应急。主站：${originalURL}
-        </a>
+          <a href="${currentURL}" target="_self" rel="noopener noreferrer">
+          本站为官方备用站，仅供应急。点击移步主站<br>${originalURL}
+          </a>
+          ${canonical.closeEnable ? '<button id="canonical-close">' + canonical.closeText || '关闭提示' + '</button>' : ''}
         `;
       } else {
         notice.className = 'canonical-tip unofficial';
         notice.innerHTML = `
-        <a href="${originalURL}" target="_self" rel="noopener noreferrer">
+        <a href="${currentURL}" target="_self" rel="noopener noreferrer">
         <div class="headline icon">☠️</div>
         本站为非法克隆站，请前往官方源站访问。<br>
         源站：${originalURL}
@@ -227,6 +248,14 @@ const init = {
         `;
       }
       document.body.appendChild(notice);
+      const closeBtn = notice.querySelector('#canonical-close');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function () {
+          window.localStorage.setItem('Stellar.canonical.closeEnable', "true")
+          window.localStorage.setItem('Stellar.canonical.closeTime', new Date().toDateString())
+          notice.style.display = 'none';
+        });
+      }
     }
     if (!canonical.originalHost) return;
     const currentURL = new URL(window.location.href);
@@ -259,9 +288,34 @@ const init = {
 }
 
 
-// init
-init.toc()
-init.sidebar()
-init.relativeDate(document.querySelectorAll('#post-meta time'))
-init.registerTabsTag()
-init.canonicalCheck()
+// Stellar namespace
+window.stellar = window.stellar || {};
+
+/**
+ * Initialize page components
+ * Called on initial load and after PJAX navigation
+ */
+stellar.initPage = function () {
+  init.toc();
+  init.sidebar();
+  init.relativeDate(document.querySelectorAll('#post-meta time'));
+  init.registerTabsTag();
+  
+  // Reinitialize comments after PJAX navigation
+  if (stellar.initComments) {
+    for (const commentSystem in stellar.initComments) {
+      if (typeof stellar.initComments[commentSystem] === 'function') {
+        stellar.initComments[commentSystem]();
+      }
+    }
+  }
+};
+
+// Initial page load
+stellar.initPage();
+init.canonicalCheck();
+
+// Listen for PJAX navigation complete
+document.addEventListener('pjax:complete', function () {
+  stellar.initPage();
+});

package/source/js/plugins/copycode.js

@@ -1,32 +1,39 @@
-window.codeElements.forEach((codeElement) => {
-  // 创建复制按钮
-  const codeCopyBtn = document.createElement('div');
-  codeCopyBtn.className = 'copy-btn';
-  codeCopyBtn.textContent = ctx.copycode.default_text;
-  codeElement.appendChild(codeCopyBtn);
+function createCopyButtons(codeElements) {
+  codeElements.forEach((codeElement) => {
+    if (codeElement.querySelector('.copy-btn')) return;
+    // 创建复制按钮
+    const codeCopyBtn = document.createElement('div');
+    codeCopyBtn.className = 'copy-btn';
+    codeCopyBtn.textContent = ctx.copycode.default_text;
+    codeElement.appendChild(codeCopyBtn);
 
-  // 添加点击事件监听
-  codeCopyBtn.addEventListener('click', async () => {
-    const codeToCopy = codeElement.querySelector('pre')?.innerText || '';
-    if (navigator.clipboard) {
-      try {
-        await navigator.clipboard.writeText(codeToCopy);
-        codeCopyBtn.textContent = ctx.copycode.success_text;
-        codeCopyBtn.classList.add('success');
-        hud.toast(ctx.copycode.toast, 2500);
-      } catch (error) {
-        codeCopyBtn.textContent = '未获得用户许可';
+    // 添加点击事件监听
+    codeCopyBtn.addEventListener('click', async () => {
+      const codeToCopy = codeElement.querySelector('pre')?.innerText || '';
+      if (navigator.clipboard) {
+        try {
+          await navigator.clipboard.writeText(codeToCopy);
+          codeCopyBtn.textContent = ctx.copycode.success_text;
+          codeCopyBtn.classList.add('success');
+          hud.toast(ctx.copycode.toast, 2500);
+        } catch (error) {
+          codeCopyBtn.textContent = '未获得用户许可';
+          codeCopyBtn.classList.add('warning');
+        }
+      } else {
+        codeCopyBtn.textContent = '浏览器不支持/非HTTPS';
         codeCopyBtn.classList.add('warning');
       }
-    } else {
-      codeCopyBtn.textContent = '浏览器不支持/非HTTPS';
-      codeCopyBtn.classList.add('warning');
-    }
 
-    // 3秒后恢复默认文本
-    setTimeout(() => {
-      codeCopyBtn.textContent = ctx.copycode.default_text;
-      codeCopyBtn.classList.remove('success', 'warning');
-    }, 3000);
+      // 3秒后恢复默认文本
+      setTimeout(() => {
+        codeCopyBtn.textContent = ctx.copycode.default_text;
+        codeCopyBtn.classList.remove('success', 'warning');
+      }, 3000);
+    });
   });
-});
+}
+
+if (typeof window.codeElements !== 'undefined') {
+  createCopyButtons(window.codeElements);
+}