hexo-theme-stellar 1.33.1 → 1.34.0

package/layout/_partial/comments/artalk/script.ejs

@@ -1,42 +1,57 @@
-<script type="module">
-  const el = document.getElementById('artalk_container');
-  util.viewportLazyload(el, load_artalk, <%= theme.comments.lazyload ?? false %>);
-
-  function load_artalk() {
-    if (!el) return;
-    utils.css('<%- theme.comments.artalk.css %>');
-    utils.js('<%- theme.comments.artalk.js %>', {defer: true}).then(function () {
-      // 监听 Artalk 事件
-      // FIXME: Artalk开启了懒加载会导致评论输入预览框里的图也变成data-src，导致看不到图
-      // Artalk.use((ctx) => {
-      //   ctx.on('list-loaded', () => window.lazyLoadInstance?.update())
-      // })
-      const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
-      const artalk = Artalk.init({
-        el: '#artalk_container',
-        pageKey: path,
-        pageTitle: '<%= page.title %>',
-        server: '<%= theme.comments.artalk.server %>',
-        site: '<%= theme.comments.artalk.site %>',
-        darkMode: '<%= theme.comments.artalk.darkMode %>',
-        <% if (theme.comments.artalk.imageUploader?.api) { %>
-        imgUploader: function(file) {
-          let headers = new Headers();
-          headers.set('Accept', 'application/json');
-          <% if (theme.comments.artalk.imageUploader?.token) { %>
-            headers.set('Authorization', '<%- theme.comments.artalk.imageUploader?.token %>')
-          <% } %>
-          let formData = new FormData();
-          formData.append('file', file);
-          return fetch('<%- theme.comments.artalk.imageUploader?.api %>',{
-            method: 'POST',
-            body: formData,
-            headers: headers
-            }).then((resp) => resp.json())
-              .then((resp) => resp.<%- theme.comments.artalk.imageUploader?.resp %>)
-          },
-        <% } %>
-      });
-    });
-  }
+<script>
+  (function() {
+    const lazyload = <%= theme.comments.lazyload ?? false %>;
+    
+    function initArtalk() {
+      const el = document.getElementById('artalk_container');
+      if (!el) return;
+      
+      function load_artalk() {
+        utils.css('<%- theme.comments.artalk.css %>');
+        utils.js('<%- theme.comments.artalk.js %>', {defer: true}).then(function () {
+          // 监听 Artalk 事件
+          // FIXME: Artalk开启了懒加载会导致评论输入预览框里的图也变成data-src，导致看不到图
+          // Artalk.use((ctx) => {
+          //   ctx.on('list-loaded', () => window.lazyLoadInstance?.update())
+          // })
+          const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
+          const artalk = Artalk.init({
+            el: '#artalk_container',
+            pageKey: path,
+            pageTitle: '<%= page.title %>',
+            server: '<%= theme.comments.artalk.server %>',
+            site: '<%= theme.comments.artalk.site %>',
+            darkMode: '<%= theme.comments.artalk.darkMode %>',
+            <% if (theme.comments.artalk.imageUploader?.api) { %>
+            imgUploader: function(file) {
+              let headers = new Headers();
+              headers.set('Accept', 'application/json');
+              <% if (theme.comments.artalk.imageUploader?.token) { %>
+                headers.set('Authorization', '<%- theme.comments.artalk.imageUploader?.token %>')
+              <% } %>
+              let formData = new FormData();
+              formData.append('file', file);
+              return fetch('<%- theme.comments.artalk.imageUploader?.api %>',{
+                method: 'POST',
+                body: formData,
+                headers: headers
+                }).then((resp) => resp.json())
+                  .then((resp) => resp.<%- theme.comments.artalk.imageUploader?.resp %>)
+              },
+            <% } %>
+          });
+        });
+      }
+      
+      util.viewportLazyload(el, load_artalk, lazyload);
+    }
+    
+    // Store in global stellar namespace for PJAX reinitialization
+    window.stellar = window.stellar || {};
+    window.stellar.initComments = window.stellar.initComments || {};
+    window.stellar.initComments.artalk = initArtalk;
+    
+    // Initialize on page load
+    initArtalk();
+  })();
 </script>

package/layout/_partial/comments/beaudar/script.ejs

@@ -1,23 +1,38 @@
-<script type="module">
-  const el = document.querySelector('#comments #beaudar');
-  util.viewportLazyload(el, load_beaudar, <%= theme.comments.lazyload ?? false %>);
-
-  function load_beaudar() {
-    if (!el) return;
-    try {
-      el.innerHTML = '';
-    } catch (error) {
-      console.error(error);
-    }
-    const script = document.createElement('script');
-    script.src = 'https://beaudar.lipk.org/client.js';
-    script.async = true;
-    for (const key of Object.keys(el.attributes)) {
-      const attr = el.attributes[key];
-      if (['class', 'id'].includes(attr.name) === false) {
-        script.setAttribute(attr.name, attr.value);
+<script>
+  (function() {
+    const lazyload = <%= theme.comments.lazyload ?? false %>;
+    
+    function initBeaudar() {
+      const el = document.querySelector('#comments #beaudar');
+      if (!el) return;
+      
+      function load_beaudar() {
+        try {
+          el.innerHTML = '';
+        } catch (error) {
+          console.error(error);
+        }
+        const script = document.createElement('script');
+        script.src = 'https://beaudar.lipk.org/client.js';
+        script.async = true;
+        for (const key of Object.keys(el.attributes)) {
+          const attr = el.attributes[key];
+          if (['class', 'id'].includes(attr.name) === false) {
+            script.setAttribute(attr.name, attr.value);
+          }
+        }
+        el.appendChild(script);
       }
+      
+      util.viewportLazyload(el, load_beaudar, lazyload);
     }
-    el.appendChild(script);
-  }
+    
+    // Store in global stellar namespace for PJAX reinitialization
+    window.stellar = window.stellar || {};
+    window.stellar.initComments = window.stellar.initComments || {};
+    window.stellar.initComments.beaudar = initBeaudar;
+    
+    // Initialize on page load
+    initBeaudar();
+  })();
 </script>

package/layout/_partial/comments/giscus/script.ejs

@@ -1,22 +1,37 @@
-<script type="module">
-  const el = document.querySelector('#comments #giscus');
-  util.viewportLazyload(el, load_discus, <%= theme.comments.lazyload ?? false %>);
-
-  function load_discus() {
-    if (!el) return;
-    try {
-        el.innerHTML = '';
-      } catch (error) {
-        console.error(error);
-      }
-      const script = document.createElement('script');
-      script.async = true;
-      for (const key of Object.keys(el.attributes)) {
-        const attr = el.attributes[key];
-        if (['class', 'id'].includes(attr.name) === false) {
-          script.setAttribute(attr.name, attr.value);
+<script>
+  (function() {
+    const lazyload = <%= theme.comments.lazyload ?? false %>;
+    
+    function initGiscus() {
+      const el = document.querySelector('#comments #giscus');
+      if (!el) return;
+      
+      function load_giscus() {
+        try {
+          el.innerHTML = '';
+        } catch (error) {
+          console.error(error);
+        }
+        const script = document.createElement('script');
+        script.async = true;
+        for (const key of Object.keys(el.attributes)) {
+          const attr = el.attributes[key];
+          if (['class', 'id'].includes(attr.name) === false) {
+            script.setAttribute(attr.name, attr.value);
+          }
         }
+        el.appendChild(script);
       }
-      el.appendChild(script);
-  }
+      
+      util.viewportLazyload(el, load_giscus, lazyload);
+    }
+    
+    // Store in global stellar namespace for PJAX reinitialization
+    window.stellar = window.stellar || {};
+    window.stellar.initComments = window.stellar.initComments || {};
+    window.stellar.initComments.giscus = initGiscus;
+    
+    // Initialize on page load
+    initGiscus();
+  })();
 </script>

package/layout/_partial/comments/twikoo/script.ejs

@@ -1,15 +1,30 @@
-<script type="module">
-  const el = document.getElementById('twikoo_container');
-  util.viewportLazyload(el, load_twikoo, <%= theme.comments.lazyload ?? false %>);
-
-  function load_twikoo() {
-    if (!el) return;
-    utils.js('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
-      const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
-      twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
-        el: '#twikoo_container',
-        path: path,
-      }));
-    });
-  }
+<script>
+  (function() {
+    const lazyload = <%= theme.comments.lazyload ?? false %>;
+    
+    function initTwikoo() {
+      const el = document.getElementById('twikoo_container');
+      if (!el) return;
+      
+      function load_twikoo() {
+        utils.js('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
+          const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
+          twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
+            el: '#twikoo_container',
+            path: path,
+          }));
+        });
+      }
+      
+      util.viewportLazyload(el, load_twikoo, lazyload);
+    }
+    
+    // Store in global stellar namespace for PJAX reinitialization
+    window.stellar = window.stellar || {};
+    window.stellar.initComments = window.stellar.initComments || {};
+    window.stellar.initComments.twikoo = initTwikoo;
+    
+    // Initialize on page load
+    initTwikoo();
+  })();
 </script>

package/layout/_partial/comments/utterances/script.ejs

@@ -1,23 +1,38 @@
-<script type="module">
-  const el = document.querySelector("#comments #utterances");
-  util.viewportLazyload(el, load_utterances, <%= theme.comments.lazyload ?? false %>);
-
-  function load_utterances() {
-    if (!el) return;
-    try {
-      el.innerHTML = '';
-    } catch (error) {
-      console.error(error);
-    }
-    const script = document.createElement('script');
-    script.src = 'https://utteranc.es/client.js';
-    script.async = true;
-    for (const key of Object.keys(el.attributes)) {
-      const attr = el.attributes[key];
-      if (['class', 'id'].includes(attr.name) === false) {
-        script.setAttribute(attr.name, attr.value);
+<script>
+  (function() {
+    const lazyload = <%= theme.comments.lazyload ?? false %>;
+    
+    function initUtterances() {
+      const el = document.querySelector("#comments #utterances");
+      if (!el) return;
+      
+      function load_utterances() {
+        try {
+          el.innerHTML = '';
+        } catch (error) {
+          console.error(error);
+        }
+        const script = document.createElement('script');
+        script.src = 'https://utteranc.es/client.js';
+        script.async = true;
+        for (const key of Object.keys(el.attributes)) {
+          const attr = el.attributes[key];
+          if (['class', 'id'].includes(attr.name) === false) {
+            script.setAttribute(attr.name, attr.value);
+          }
+        }
+        el.appendChild(script);
       }
+      
+      util.viewportLazyload(el, load_utterances, lazyload);
     }
-    el.appendChild(script);
-  }
+    
+    // Store in global stellar namespace for PJAX reinitialization
+    window.stellar = window.stellar || {};
+    window.stellar.initComments = window.stellar.initComments || {};
+    window.stellar.initComments.utterances = initUtterances;
+    
+    // Initialize on page load
+    initUtterances();
+  })();
 </script>

package/layout/_partial/comments/waline/script.ejs

@@ -1,36 +1,48 @@
 <script type="module">
   import { init } from '<%- theme.comments.waline.js %>';
 
-  const el = document.getElementById('waline_container');
-  util.viewportLazyload(el, load_waline, <%= theme.comments.lazyload ?? false %>);
-
-  function load_waline(){
+  const lazyload = <%= theme.comments.lazyload ?? false %>;
+  
+  function initWaline() {
+    const el = document.getElementById('waline_container');
     if (!el) return;
 
-    utils.css('<%- theme.comments.waline.css %>');
-    utils.css('<%- theme.comments.waline.meta_css %>');
+    function load_waline() {
+      utils.css('<%- theme.comments.waline.css %>');
+      utils.css('<%- theme.comments.waline.meta_css %>');
 
-    const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
-    const waline = init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
-      el: '#waline_container',
-      path: path,
-      <% if(!!theme.comments.waline.imageUploader?.api){ %>
-        imageUploader: function(file) {
-          const headers = new Headers();
-          headers.set('Accept', 'application/json');
-          <% if(!!theme.comments.waline.imageUploader?.token) { %>
-            headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
-          <% } %>
-          const formData = new FormData();
-          formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
-          return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
-            method: 'POST',
-            body: formData,
-            headers: headers
-            }).then((resp) => resp.json())
-              .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
-        },
-      <% } %>
-    }));
+      const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
+      const waline = init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
+        el: '#waline_container',
+        path: path,
+        <% if(!!theme.comments.waline.imageUploader?.api){ %>
+          imageUploader: function(file) {
+            const headers = new Headers();
+            headers.set('Accept', 'application/json');
+            <% if(!!theme.comments.waline.imageUploader?.token) { %>
+              headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
+            <% } %>
+            const formData = new FormData();
+            formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
+            return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
+              method: 'POST',
+              body: formData,
+              headers: headers
+              }).then((resp) => resp.json())
+                .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
+          },
+        <% } %>
+      }));
+    }
+    
+    util.viewportLazyload(el, load_waline, lazyload);
   }
+  
+  // Store in global stellar namespace for PJAX reinitialization
+  window.stellar = window.stellar || {};
+  window.stellar.initComments = window.stellar.initComments || {};
+  window.stellar.initComments.waline = initWaline;
+  
+  // Initialize on page load
+  initWaline();
 </script>

package/layout/_partial/cover/wiki_cover.ejs

@@ -6,7 +6,7 @@ function layoutWikiCover() {
     return el;
   }
   if (proj.homepage.path !== page.path) {
-    return;
+    return el;
   }
   if (proj.coverpage == undefined || proj.coverpage === false || proj.coverpage === '[]') {
     return el;

package/layout/_partial/head.ejs

@@ -70,6 +70,46 @@ function og_args() {
   return Object.assign(args, page.open_graph);
 }
 
+function escape_meta_content(content) {
+  return String(content || '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function generate_og_title() {
+  return escape_meta_content(strip_html(page.title || config.title));
+}
+
+function generate_og_site_name() {
+  if (page.layout === 'post' && page.title) {
+    return generate_og_title();
+  }
+  return escape_meta_content(strip_html(config.title));
+}
+
+function render_open_graph() {
+  if (!(theme.open_graph && theme.open_graph.enable)) {
+    return '';
+  }
+  let meta = open_graph(og_args());
+  meta = meta.replace(/<meta property="og:title" content="[^"]*">/, `<meta property="og:title" content="${generate_og_title()}">`);
+  if (meta.match(/<meta property="og:site_name" content="[^"]*">/)) {
+    meta = meta.replace(/<meta property="og:site_name" content="[^"]*">/, `<meta property="og:site_name" content="${generate_og_site_name()}">`);
+  } else {
+    meta += `<meta property="og:site_name" content="${generate_og_site_name()}">`;
+  }
+  if (page.title) {
+    if (meta.match(/<meta name="twitter:title" content="[^"]*">/)) {
+      meta = meta.replace(/<meta name="twitter:title" content="[^"]*">/, `<meta name="twitter:title" content="${generate_og_title()}">`);
+    } else {
+      meta += `<meta name="twitter:title" content="${generate_og_title()}">`;
+    }
+  }
+  return meta;
+}
+
 function preconnect() {
   var el = '';
   for (let href of (theme.preconnect || [])) {
@@ -127,18 +167,27 @@ function generate_canonical() {
   <meta name="theme-color" content="#f9fafb">
   <title><%- generate_title() %></title>
 
-  <% if (theme.open_graph && theme.open_graph.enable) { %>
-    <%- open_graph(og_args()) %>
-  <% } %>
+  <%- render_open_graph() %>
   <%- generate_description() %>
   
   <%- generate_keywords() %>
 
   <!-- feed -->
   <% if (config.feed && config.feed.path) { %>
-    <%- feed_tag(config.feed.path, {title: config.title}) %>
+    <%
+      var paths = Array.isArray(config.feed.path)
+        ? config.feed.path
+        : [config.feed.path];
+    %>
+
+    <% paths.forEach(function (path) { %>
+      <% if (path) { %>
+        <%- feed_tag(path, { title: config.title }) %>
+      <% } %>
+    <% }) %>
   <% } %>
 
+  <link rel="preload" href="<%- url_for(`${theme.stellar.main_css}?v=${stellar_info('version')}`) %>" as="style">
   <link rel="stylesheet" href="<%- url_for(`${theme.stellar.main_css}?v=${stellar_info('version')}`) %>">
 
 

package/layout/_partial/scripts/defines.ejs

@@ -4,10 +4,30 @@
   const canonicalWithEncoded = Object.assign({}, canonical, {
     encoded: encoded
   });
+  const permalink = page.permalink || canonical.originalHost;
+  const checklink = theme.data_services.video.js
 %>
 
 <script type="text/javascript">
   window.canonical = <%- JSON.stringify(canonicalWithEncoded) %>;
+  window.canonical["param"] = <%- JSON.stringify({permalink, checklink}) %>;
+  // Fix: Ensure page is at the correct top position on data load
+  if (history.scrollRestoration) {
+    history.scrollRestoration = 'auto';
+  }
+  (function() {
+    const scrollHandler = () => {
+      const wikiCover = document.querySelector('#l_cover .l_cover.wiki');
+      const startEl = document.getElementById('start');
+      if (wikiCover && startEl) {
+        window.scrollTo(0, startEl.offsetTop);
+      } else {
+        window.scrollTo(0, 0);
+      }
+    };
+    if (document.readyState !== 'loading') scrollHandler();
+    else document.addEventListener('DOMContentLoaded', scrollHandler);
+  })();
   const ctx = {
     date_suffix: {
       just: `<%- __('meta.date_suffix.just') %>`,
@@ -38,8 +58,6 @@
   const deps = {
     jquery: `<%- url_for(theme.dependencies.jquery) %>`,
     marked: `<%- url_for(theme.dependencies.marked) %>`,
-    lazyload: `<%- url_for(theme.dependencies.lazyload) %>`
+    lazyload: `<%- url_for(theme.dependencies.lazyload.js) %>`
   }
-  
-
 </script>

package/layout/_partial/scripts/lazyload.ejs

@@ -30,7 +30,7 @@
       container = document.querySelector(container);
     }
     if (!container) return;
-    
+
     const images = container.querySelectorAll('img');
     images.forEach((img) => {
       if (img.classList.contains('lazy')) return;
@@ -63,5 +63,5 @@
       window.lazyLoadInstance.update();
     }
   }
-  
+
 </script>