hexo-theme-stellar 1.32.4 → 1.33.1

package/source/css/_components/tag-plugins/vote.styl

@@ -0,0 +1,49 @@
+.tag-plugin.ds-vote
+  text-align: center
+.tag-plugin.ds-vote .header
+  margin: .5rem
+  font-weight: 500
+  color: var(--text)
+.tag-plugin.ds-vote .body
+  width 50%
+  min-width: 240px
+  max-width: 320px
+  margin: 1rem auto
+  display: grid
+  grid-template-columns: 1fr 1fr
+  grid-gap: 2rem
+  button
+    color: var(--text-p1)
+    font-size: 1rem
+    display: inline-flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    padding: .5rem
+    background: var(--block)
+    border-radius: $border-button
+    font-weight: 500
+    svg
+      font-size: 1.5em
+      margin: 8px
+    span
+      line-height: 1
+      font-size: 1em
+      margin-bottom: 4px
+    trans1 all
+    color: var(--theme)
+    background: var(--theme-a10)
+    @media (prefers-color-scheme: dark)
+      background: var(--theme-a20)
+    &.vote-up
+      x-set-theme-with-color($c-green)
+    &.vote-down
+      x-set-theme-with-color($c-red)
+    &:hover,&.active
+      color: white
+      background: var(--theme)
+
+
+// 已经投过票了
+.tag-plugin.ds-vote.voted
+  pointer-events: none

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

@@ -36,7 +36,7 @@
         background: var(--bg-a50)
       
       
-  .tag-plugin.timeline[api] .body .footer
+  .tag-plugin.timeline[data-api] .body .footer
     background: none
 
 .l_left .widget-wrapper.timeline

package/source/css/_custom.styl

@@ -35,8 +35,10 @@ $leftbar-background-color = hexo-config('style.leftbar.background-color')
 
 
 // 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,13 @@ 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)
+  @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)
+    @media (prefers-color-scheme: dark)
+      filter: none
   &:before,&:after
     z-index -1
     position: absolute
@@ -149,17 +156,18 @@ newblur()
   &:before
     backdrop-filter: blur(8px)
     -webkit-backdrop-filter: blur(8px)
-    background: var(--bg-a20)
+    background: rgba(white, 0.3)
+    margin: 1px
+    @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
     @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

@@ -13,6 +13,7 @@ x-set-theme-with-color($color)
   --light: lightness($color)
   --alpha: alpha($color)
   --theme: x-theme-alpha(1)
+  --theme-a10: x-theme-alpha(0.1)
   --theme-a20: x-theme-alpha(0.2)
   --theme-a30: x-theme-alpha(0.3)
 
@@ -90,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

@@ -69,6 +69,10 @@
       height: 3rem
       width: 12rem
       margin: -1.5rem auto 0
+      &:hover
+        background: var(--card)
+  .atk-list-footer .atk-copyright
+    padding: 1rem
   .atk-error-layer
     background: none
 
@@ -97,17 +101,52 @@
     --at-color-green: $c-green
     --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))
 
-.md-text .atk-comment>.atk-main>.atk-body
-  overflow: visible
-.md-text .artalk pre code, .atk-layer-wrap pre code
-  background: none
-.md-text .atk-main-editor>.atk-textarea-wrap>.atk-textarea
-  background: none
-  padding: 0.5rem 1rem
 
-.md-text .atk-notify-wrap .atk-notify
-  border-radius: $border-bar
-  margin: 8px
+// fix style
+.cmt-body.artalk
+  .atk-comment>.atk-main>.atk-body
+    overflow: visible
+  .artalk pre code, .atk-layer-wrap pre code
+    background: none
+  .atk-main-editor>.atk-textarea-wrap>.atk-textarea
+    background: none
+    padding: 1rem
+    margin: 0
+    border: none
+
+  .atk-loading
+    border-radius: $border-card
+  .atk-main-editor .atk-editor-user-wrap .atk-editor-user .atk-user-profile-btn
+    padding: 0
+  &:hover
+    background: none
+  
+  .artalk>.atk-list>.atk-list-header 
+    padding: .5rem 1rem
+    .atk-comment-count
+      display: flex
+      align-items: baseline
+  .artalk>.atk-list>.atk-list-header .atk-dropdown-wrap .atk-arrow-down-icon
+    height: 8px
+  .artalk>.atk-list>.atk-list-header .atk-text
+    display: block
+
+  .atk-notify-wrap .atk-notify
+    border-radius: $border-bar
+    margin: 8px
+  
+  // emoticons
+  .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp
+    padding: .5rem
+    margin-bottom: 32px
+  .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp[data-type=image]>.atk-item
+    width 3rem
+    height: 3rem
+    margin: 0
+    border-radius: 4px
+    padding: .5rem
+    >img
+      border-radius: 4px
 
 
 // override
@@ -121,11 +160,12 @@
       border-radius: $border-image-s
   a>img
     display: inline
-  p>img[atk-emoticon]
+  img[atk-emoticon]
     max-height: 1.5em
     transform: scale(1.2)
     margin: 0 4px
     vertical-align: bottom
+    border-radius: 4px
   ul li, ol li
     font-size: $fs-14
   blockquote

package/source/css/_plugins/lazyload.styl

@@ -1,6 +1,9 @@
 $lazyTransitionType = hexo-config('plugins.lazyload.transition')
 $loadingImageSize = 2rem
 
+img:not([src])
+  visibility: hidden
+
 .lazy-box
   position: relative
   overflow: hidden

package/source/js/main.js

@@ -229,20 +229,27 @@ const init = {
       document.body.appendChild(notice);
     }
     if (!canonical.originalHost) return;
+    const currentURL = new URL(window.location.href);
+    const currentHost = currentURL.hostname.replace(/^www\./, '');
+    if (currentHost == 'localhost') return;
+    const encodedCurrentHost = window.btoa(currentHost);
+    const isCurrentHostValid = canonical.encoded === encodedCurrentHost;
     const canonicalTag = document.querySelector('link[rel="canonical"]');
     if (!canonicalTag) {
+      if (isCurrentHostValid) {
+        return;
+      }
+      if (canonical.officialHosts?.includes(currentHost)) {
+        showTip(true);
+        return;
+      }
       showTip(false);
       return;
     }
     const canonicalURL = new URL(canonicalTag.href);
-    const currentURL = new URL(window.location.href);
     const canonicalHost = canonicalURL.hostname.replace(/^www\./, '');
-    const currentHost = currentURL.hostname.replace(/^www\./, '');
-    if (currentHost == 'localhost') return;
     const encodedCanonicalHost = window.btoa(canonicalHost);
-    const encodedCurrentHost = window.btoa(currentHost);
     const isCanonicalHostValid = canonical.encoded === encodedCanonicalHost;
-    const isCurrentHostValid = canonical.encoded === encodedCurrentHost;
     if (isCanonicalHostValid && isCurrentHostValid) {
       return;
     }

package/source/js/search/local-search.js

@@ -48,7 +48,9 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
         var dataContent = data.content;
         var dataContentLowerCase = dataContent.toLowerCase();
         var dataUrl = data.path.startsWith('//') ? data.path.slice(1) : data.path;
-
+        dataUrl = dataUrl.replace(/\/?index\.html$/, '/'); // index.html → /
+        dataUrl = dataUrl.replace(/\.html$/, '/'); // xxx.html → xxx/
+        
         var indexTitle = -1;
         var indexContent = -1;
         var firstOccur = -1;

package/source/js/services/artalk_latest_comment.js

@@ -5,7 +5,7 @@ utils.jq(() => {
         const el = els[i];
         const limit = parseInt(el.getAttribute('limit')) || 10;
   
-        const api = el.getAttribute('api') + '&limit=' + limit;
+        const api = el.dataset.api + '&limit=' + limit;
         if (api == null) {
           continue;
         }

package/source/js/services/contributors.js

@@ -29,7 +29,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-contributors');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/fcircle.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-fcircle');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/friends.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-friends');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/friends_and_posts.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-friends_and_posts');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/ghinfo.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-ghinfo');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/giscus_latest_comment.js

@@ -3,7 +3,7 @@ utils.jq(() => {
       const els = document.getElementsByClassName('ds-giscus');
       for (var i = 0; i < els.length; i++) {
         const el = els[i];
-        const api = el.getAttribute('api');
+        const api = el.dataset.api;
         if (api == null) {
           continue;
         }

package/source/js/services/memos.js

@@ -2,7 +2,7 @@ utils.jq(() => {
   const els = Array.from(document.getElementsByClassName('ds-memos'));
 
   els.forEach(el => {
-    const api = el.getAttribute('api');
+    const api = el.dataset.api;
     if (!api) return;
 
     const default_avatar = el.getAttribute('avatar') || def.avatar;

package/source/js/services/rating.js

@@ -0,0 +1,142 @@
+function getRatingKey(id) {
+  return `rating-${id}`;
+}
+
+function hasRated(id) {
+  return !!localStorage.getItem(getRatingKey(id));
+}
+
+function getRatedValue(id) {
+  return parseInt(localStorage.getItem(getRatingKey(id)) || '0');
+}
+
+function storeRating(id, value) {
+  localStorage.setItem(getRatingKey(id), value);
+}
+
+function clearHover(el) {
+  el.querySelectorAll('.star').forEach(s => s.classList.remove('hover'));
+}
+
+function updatePreview(el, avg) {
+  const rounded = Math.floor(avg);
+  el.querySelectorAll('.star').forEach(s => {
+    const v = parseInt(s.dataset.value);
+    s.classList.toggle('preview', v <= rounded);
+  });
+}
+
+function setupHoverEffect(el) {
+  const stars = el.querySelectorAll('.star');
+  if (!stars.length) return;
+
+  stars.forEach(star => {
+    const value = parseInt(star.dataset.value);
+
+    star.addEventListener('mouseenter', () => {
+      stars.forEach(s => {
+        s.classList.remove('preview');
+        const v = parseInt(s.dataset.value);
+        s.classList.toggle('hover', v <= value);
+      });
+    });
+
+    star.addEventListener('mouseleave', () => {
+      clearHover(el);
+      // 恢复平均分预览
+      const avg = parseFloat(el.querySelector('.avg')?.textContent.replace(/[()]/g, '') || '0');
+      updatePreview(el, avg);
+    });
+  });
+}
+
+function calculateAverage(rating = {}) {
+  const validScores = Object.entries(rating).filter(([k]) => !isNaN(Number(k)));
+  const total = validScores.reduce((sum, [k, c]) => sum + Number(k) * c, 0);
+  const votes = validScores.reduce((sum, [, c]) => sum + c, 0);
+  return votes > 0 ? (total / votes).toFixed(1) : '0.0';
+}
+
+async function loadRating(el) {
+  const id = el.dataset.id;
+  const api = el.dataset.api;
+  if (!id || !api) return;
+
+  try {
+    const res = await fetch(`${api}/info?id=${encodeURIComponent(id)}`);
+    const data = await res.json();
+    const rating = data.rating || {};
+    const avg = calculateAverage(rating);
+
+    // 计算评分人数
+    const validScores = Object.entries(rating).filter(([k]) => !isNaN(Number(k)));
+    const totalVotes = validScores.reduce((sum, [, c]) => sum + c, 0);
+
+    // 设置平均分
+    let avgEl = el.querySelector('.avg');
+    if (!avgEl) {
+      avgEl = document.createElement('span');
+      avgEl.className = 'avg';
+      el.appendChild(avgEl);
+    }
+    avgEl.textContent = `(${avg})`;
+
+    // 设置评分人数
+    let countEl = el.querySelector('.count');
+    if (!countEl) {
+      countEl = document.createElement('span');
+      countEl.className = 'count';
+      el.appendChild(countEl);
+    }
+    countEl.textContent = `${totalVotes}`;
+
+    updatePreview(el, avg);
+  } catch (e) {
+    console.warn(`[rating] 加载失败: id=${id}`, e);
+  }
+}
+
+async function submitRating(el, value) {
+  const id = el.dataset.id;
+  const api = el.dataset.api;
+  if (!id || !api || hasRated(id)) return;
+
+  storeRating(id, value);
+  el.classList.add('rated');
+
+  try {
+    await fetch(`${api}/update?id=${encodeURIComponent(id)}&value=${value}`, {
+      method: 'POST'
+    });
+    loadRating(el);
+  } catch (e) {
+    console.warn(`[rating] 提交失败: id=${id}`, e);
+  }
+}
+
+function initRatings() {
+  document.querySelectorAll('.ds-rating').forEach(el => {
+    const { id, api } = el.dataset;
+    if (!id || !api) return;
+
+    loadRating(el);
+    setupHoverEffect(el);
+
+    if (hasRated(id)) {
+      el.classList.add('rated');
+    }
+
+    el.querySelectorAll('.star').forEach(star => {
+      const value = star.dataset.value;
+      star.addEventListener('click', () => {
+        if (!hasRated(id)) submitRating(el, value);
+      });
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  window.addEventListener('DOMContentLoaded', initRatings);
+} else {
+  initRatings();
+}

package/source/js/services/siteinfo.js

@@ -6,7 +6,7 @@ function setCardLink(nodes) {
     // If it is not a tag element then it is not processed
     if (el.nodeType !== 1) return;
     el.removeAttribute('cardlink');
-    const api = el.getAttribute('api');
+    const api = el.dataset.api;
     if (api == null) return;
     fetch(api).then(function(response) {
       if (response.ok) {

package/source/js/services/sites.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-sites');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/timeline.js

@@ -13,7 +13,7 @@ utils.jq(() => {
     const timelines = document.getElementsByClassName('ds-timeline');
     for (var i = 0; i < timelines.length; i++) {
       const el = timelines[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }

package/source/js/services/twikoo_latest_comment.js

@@ -3,7 +3,7 @@ utils.jq(() => {
       const el = document.querySelector('.ds-twikoo');
       utils.onLoading(el); // 加载动画
   
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       const limit = parseInt(el.getAttribute('limit')) || 10;
       const reply = el.getAttribute('hide') !== 'reply';
       if (!api) return;

package/source/js/services/vote.js

@@ -0,0 +1,113 @@
+function getVoteKey(id) {
+  return `vote-${id}`;
+}
+
+function hasVoted(id) {
+  return !!localStorage.getItem(getVoteKey(id));
+}
+
+function getVotedValue(id) {
+  return localStorage.getItem(getVoteKey(id)); // 'up' 或 'down'
+}
+
+function storeVote(id, value) {
+  localStorage.setItem(getVoteKey(id), value);
+}
+
+function removeVote(id) {
+  localStorage.removeItem(getVoteKey(id));
+}
+
+function markVoted(el, value) {
+  el.classList.add('voted');
+  if (value === 'up') {
+    el.querySelector('.vote-up')?.classList.add('active');
+  } else if (value === 'down') {
+    el.querySelector('.vote-down')?.classList.add('active');
+  }
+}
+
+function revertVote(el, value) {
+  const id = el.dataset.id;
+
+  // 回退数值
+  if (value === 'up') {
+    const upEl = el.querySelector('.up');
+    if (upEl) upEl.textContent = Math.max(0, parseInt(upEl.textContent || '1') - 1);
+  } else if (value === 'down') {
+    const downEl = el.querySelector('.down');
+    if (downEl) downEl.textContent = Math.max(0, parseInt(downEl.textContent || '1') - 1);
+  }
+
+  // 回退样式和状态
+  el.classList.remove('voted', 'active');
+  el.querySelector('.vote-up')?.classList.remove('active');
+  el.querySelector('.vote-down')?.classList.remove('active');
+  removeVote(id);
+}
+
+async function loadVote(el) {
+  const id = el.dataset.id;
+  const api = el.dataset.api;
+  if (!id || !api) return;
+
+  try {
+    const res = await fetch(`${api}/info?id=${encodeURIComponent(id)}`);
+    const data = await res.json();
+
+    el.querySelector('.up').textContent = data.votes?.up ?? 0;
+    el.querySelector('.down').textContent = data.votes?.down ?? 0;
+  } catch (e) {
+    console.warn(`[vote] 加载失败: id=${id}`, e);
+  }
+}
+
+function submitVote(el, value) {
+  const id = el.dataset.id;
+  const api = el.dataset.api;
+  if (!id || !api || hasVoted(id)) return;
+
+  const upEl = el.querySelector('.up');
+  const downEl = el.querySelector('.down');
+
+  // 乐观更新
+  if (value === 'up' && upEl) upEl.textContent = parseInt(upEl.textContent || '0') + 1;
+  if (value === 'down' && downEl) downEl.textContent = parseInt(downEl.textContent || '0') + 1;
+
+  storeVote(id, value);
+  markVoted(el, value);
+
+  // 后台同步
+  fetch(`${api}/update?id=${encodeURIComponent(id)}&value=${encodeURIComponent(value)}`, {
+    method: 'POST'
+  }).catch(e => {
+    console.warn(`[vote] 后台同步失败，撤销投票: id=${id}`, e);
+    revertVote(el, value);
+  });
+}
+
+function initVotes() {
+  document.querySelectorAll('.ds-vote').forEach(el => {
+    const { id, api } = el.dataset;
+    if (!id || !api) return;
+
+    loadVote(el);
+
+    const votedValue = getVotedValue(id);
+    if (votedValue) markVoted(el, votedValue);
+
+    el.querySelector('.vote-up')?.addEventListener('click', () => {
+      if (!el.classList.contains('active')) submitVote(el, 'up');
+    });
+
+    el.querySelector('.vote-down')?.addEventListener('click', () => {
+      if (!el.classList.contains('active')) submitVote(el, 'down');
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  window.addEventListener('DOMContentLoaded', initVotes);
+} else {
+  initVotes();
+}

package/source/js/services/waline_latest_comment.js

@@ -4,7 +4,7 @@ utils.jq(() => {
       for (var i = 0; i < els.length; i++) {
         const el = els[i];
         const limit = parseInt(el.getAttribute('limit')) || 10;
-        const apiBase = el.getAttribute('api');
+        const apiBase = el.dataset.api;
         if (apiBase == null) {
           continue;
         }

package/source/js/services/weibo.js

@@ -3,7 +3,7 @@ utils.jq(() => {
     const els = document.getElementsByClassName('ds-weibo');
     for (var i = 0; i < els.length; i++) {
       const el = els[i];
-      const api = el.getAttribute('api');
+      const api = el.dataset.api;
       if (api == null) {
         continue;
       }