hexo-theme-volantis 4.3.1 → 5.0.0-beta.2

package/layout/_partial/header.ejs

@@ -1,13 +1,12 @@
-<%- include('scripts/coverCtrl') %>
-<header id="l_header" class="l_header <%- theme.navbar.visiable %> <%- theme.custom_css.navbar.effect.join(' ') %> <%- theme.pjax_cover.headerShow %>" <%- (theme.navbar.visiable == 'auto' && theme.cover.height_scheme) ? "style='opacity: 0'" : "" %> >
+<header itemscope itemtype="http://schema.org/WPHeader" id="l_header" class="l_header <%- theme.navbar.visiable %> <%- theme.custom_css.navbar.effect.join(' ') %> <%- theme.pjax_cover.headerShow %>" <%- (theme.navbar.visiable == 'auto' && theme.cover.height_scheme) ? "style='opacity: 0'" : "" %> >
   <div class='container'>
   <div id='wrapper'>
     <div class='nav-sub'>
       <p class="title"></p>
       <ul class='switcher nav-list-h m-phone' id="pjax-header-nav-list">
-        <li><a id="s-comment" class="fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
+        <li><a id="s-comment" class="fas fa-comments fa-fw" target="_self"  href="/" onclick="return false;" title="comment"></a></li>
         <% if (page.sidebar == undefined || page.sidebar != false) { %>
-          <li><a id="s-toc" class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
+          <li><a id="s-toc" class="s-toc fas fa-list fa-fw" target="_self"  href="/" onclick="return false;" title="toc"></a></li>
         <% } %>
       </ul>
     </div>
@@ -50,7 +49,7 @@
                   <ul class="list-v">
                     <li>
                       <div class="aplayer-container">
-                        <%- partial('../_third-party/aplayer/layout', {post: null, where: 'footer'}) %>
+                        <%- partial('../_plugins/aplayer/layout', {post: null, where: 'footer'}) %>
                       </div>
                     </li>
                   </ul>
@@ -62,7 +61,9 @@
               </li>
             <% } else { %>
               <li>
-                <a class="menuitem flat-box faa-parent animated-hover" <%= value.url ? 'href='+ url_for(value.url)+'' : ''%>
+                <a class="menuitem flat-box faa-parent animated-hover" 
+                <%- value.url ? `href="` + url_for(value.url) + `" title="` + (value.description || value.name) + `"`
+                        : ` href="/" onclick="return false;" title="` + (value.description || value.name) + `"` %>
                   <% if (value.rel) { %>
                     rel="<%- value.rel %>"
                   <% } %>
@@ -70,7 +71,7 @@
                     target="<%- value.target %>"
                   <% } %>
                   <% if (value.url) { %>
-                    id="<%= url_for(value.url).replace(/\/|%|\./g, "")?url_for(value.url).replace(/\/|%|\./g, ""):"home" %>"
+                    active-action="action-<%= url_for(value.url).replace(/\/|%|\./g, "")?url_for(value.url).replace(/\/|%|\./g, ""):"home" %>"
                   <% } %>>
                   <% if (value.icon) { %><i class='<%= value.icon %> fa-fw'></i><% } %><%- value.name %>
                 </a>
@@ -89,20 +90,21 @@
           <% }) %>
 				</ul>
 			</div>
-
+      <% if (theme.search.enable) { %>
       <div class="m_search">
         <form name="searchform" class="form u-search-form">
           <i class="icon fas fa-search fa-fw"></i>
           <input type="text" class="input u-search-input" placeholder="<%- theme.navbar && theme.navbar.search %>" />
         </form>
       </div>
+      <% } %>
 
 			<ul class='switcher nav-list-h m-phone'>
 				<% if (theme.search.enable === true) { %>
-					<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
+					<li><a class="s-search fas fa-search fa-fw" target="_self" href="/" onclick="return false;" title="search"></a></li>
 				<% } %>
 				<li>
-          <a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
+          <a class="s-menu fas fa-bars fa-fw" target="_self" href="/" onclick="return false;" title="menu"></a>
           <ul class="menu-phone list-v navigation white-box">
             <% menu_list.forEach(function(value){ %>
               <% menu(value, 'mobile') %>
@@ -110,6 +112,10 @@
           </ul>
         </li>
 			</ul>
+
+      <!-- Custom Files header begin -->
+      <%- volantis_inject('header') %>
+      <!-- Custom Files header end -->
 		</div>
 	</div>
   </div>

package/layout/_partial/meta.ejs

@@ -13,21 +13,25 @@ if (post.bottom_meta == false) {
   <% if (post.headimg) { %>
     <div class='headimg-div'>
       <a class='headimg-a'>
-        <img class='headimg' src='<%- post.headimg %>'/>
+        <img itemprop="image" class='headimg' src='<%- post.headimg %>'/>
       </a>
     </div>
+  <% } else { %>
+    <span hidden>
+      <meta itemprop="image" content="<%- theme.structured_data.data.logo.path %>">
+    </span>
   <% } %>
   <div class="article-meta" id="top">
     <% if (post.music && post.music.enable != false) { %>
-      <%- partial('../_third-party/aplayer/layout', {post: post, where: 'meta'}) %>
+      <%- partial('../_plugins/aplayer/layout', {post: post, where: 'meta'}) %>
     <% } %>
     <% if (post.thumbnail && post.thumbnail.length){ %>
       <a title='<%- post.title %>' href='<%- url_for(post.link || post.path) %>'>
-        <img class='thumbnail' src='<%- post.thumbnail %>'>
+        <img itemprop="image" class='thumbnail' src='<%- post.thumbnail %>'>
       </a>
     <% } %>
     <% if (post.title) { %>
-      <h1 class="title">
+      <h1 class="title" itemprop="name headline">
         <%- post.title %>
       </h1>
       <div class='new-meta-box'>
@@ -36,7 +40,14 @@ if (post.bottom_meta == false) {
             <%- partial('../_meta/' + meta, {post: post}) %>
           <% } %>
         <% }) %>
+        <!-- Custom Files topMeta begin-->
+        <%- volantis_inject('topMeta') %>
+        <!-- Custom Files topMeta end-->
       </div>
+    <% } else { %>
+      <span hidden itemprop="name headline">
+        <%- post.title %>
+      </span>
     <% } %>
   </div>
 <% } else if (position == 'bottom') { %>
@@ -48,5 +59,8 @@ if (post.bottom_meta == false) {
         <% } %>
       <% }) %>
     </div>
+    <!-- Custom Files bottomMeta begin -->
+    <%- volantis_inject('bottomMeta') %>
+    <!-- Custom Files bottomMeta end -->
   </div>
 <% } %>

package/layout/_partial/post.ejs

@@ -1,4 +1,12 @@
-<div class="post post-v3 white-box reveal <%- theme.custom_css.body.effect.join(' ') %>">
+<div class="post post-v3 white-box reveal <%- theme.custom_css.body.effect.join(' ') %>"  itemscope itemtype="http://schema.org/Article" >
+  <link itemprop="mainEntityOfPage" href="<%- post.permalink %>">
+  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
+    <meta itemprop="name" content="<%- config.title %>">
+  </span>
+  <span hidden itemprop="post" itemscope itemtype="http://schema.org/Post">
+    <meta itemprop="name" content="<%- config.title %>">
+    <meta itemprop="description" content="<%- config.description %>">
+  </span>
   <%
   let showPin = false;
   if (post.pin && (post.title || theme.article.preview.auto_title) && theme.article.preview.pin_icon) {
@@ -19,15 +27,19 @@
   %>
   <% if (showPin == true) { %>
     <div class='pin'>
-      <img src='<%- theme.article.preview.pin_icon %>'/>
+      <img alt="<%- post.title %>" src='<%- theme.article.preview.pin_icon %>'/>
     </div>
   <% } %>
   <% if (post.headimg) { %>
     <div class='headimg-div'>
       <a class='headimg-a' href="<%- url_for(post.link || post.path) %>">
-        <img class='headimg' src='<%- post.headimg %>'/>
+        <img itemprop="image" class='headimg' alt="<%- post.title %>" src='<%- post.headimg %>'/>
       </a>
     </div>
+  <% } else { %>
+    <span hidden>
+      <meta itemprop="image" content="<%- theme.structured_data.data.logo.path %>">
+    </span>
   <% } %>
   <% if (showTitle) { %>
     <%
@@ -36,13 +48,17 @@
       pinTitle = true;
     }
     %>
-    <h2 class="article-title" <%- pinTitle ? 'pin' : '' %>>
-      <a href="<%- url_for(post.link || post.path) %>">
+    <h2 class="article-title" <%- pinTitle ? 'pin' : '' %> itemprop="name headline">
+      <a href="<%- url_for(post.link || post.path) %>"  itemprop="url">
         <%- (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, theme.article.body.meta_library.date.format) %>
       </a>
     </h2>
+  <% } else { %>
+    <span hidden itemprop="name headline">
+      <%- (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, theme.article.body.meta_library.date.format) %>
+    </span>
   <% } %>
-  <div class='md'>
+  <div class='md article-desc' itemprop="articleBody">
     <% if (post.excerpt) { %>
       <%- post.excerpt %>
     <% } else if (post.description) { %>
@@ -50,7 +66,7 @@
     <% } else if (post.content) { %>
       <% if (theme.article.preview.auto_excerpt) { %>
         <%- truncate(strip_html(post.content), {length: 200}) %>
-      <% } else { %>
+      <% } else if(!theme.article.preview.hide_excerpt) { %>
         <%- post.content %>
       <% } %>
     <% } %>
@@ -67,8 +83,13 @@
           }
           %>
           <a class='avatar' href='<%- author.url %>'><img src='<%- author.avatar %>'></a>
+          <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
+            <meta itemprop="image" content="<%- author.avatar %>">
+            <meta itemprop="name" content="<%- author.name %>">
+            <meta itemprop="url" content="<%- author.url %>">
+          </span>
         <% } %>
-        <time><%= date(post.date, config.date_format) %></time>
+        <time itemprop="dateCreated datePublished" datetime="<%- moment(post.date).format() %>"><%= date(post.date, config.date_format) %></time>
         <% if (post.categories && post.categories.length > 0) { %>
           <span class="dot"></span>
           <%- list_categories(post.categories, {
@@ -76,11 +97,16 @@
               separator: '<span class="sep"></span>',
               style: 'none'
               }) %>
+          <% for(cat of post.categories.toArray()){ %>
+            <span hidden itemprop="about" itemscope itemtype="http://schema.org/Thing">
+              <a href="<%- url_for(cat.path) %>" itemprop="url"><span itemprop="name"><%- cat.name %></span></a>
+            </span>
+          <% } %>
         <% } %>
       </div>
       <% if (showReadmore) { %>
         <div>
-          <a class='readmore' href='<%- url_for(post.link || post.path) %>'>
+          <a class='readmore' href='<%- url_for(post.link || post.path) %>' itemprop="url">
             <%- post.link ? __('post.readoriginal') : __('post.readmore') %>
           </a>
         </div>

package/layout/_partial/scripts/_ctrl/cdnCtrl.ejs

@@ -0,0 +1,113 @@
+<%_
+  // 这里存放全局 CDN 资源控制变量 此处是硬编码
+  // theme.cdn.addJS("search","search/"+theme.search.service,theme.search.js)  => theme.cdn.map.js.search
+  // theme.cdn.addCSS("first","first",theme.cdn.set.css.first)  => theme.cdn.map.css.first
+
+  theme.cdnCtrl={}
+  if (theme.cdn.enable&&theme.cdn.prefix) {
+    theme.cdnCtrl.prefix=theme.cdn.prefix.replace(/\/$/g, "")
+  } else {
+    theme.cdnCtrl.prefix="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@"+ theme.info.theme_version +"/source"
+  }
+  theme.cdn.map={}
+  theme.cdn.map.js={}
+  theme.cdn.map.css={}
+  theme.cdn.addJS=(name,source,force)=>{
+    if(force){
+      theme.cdn.map.js[name]=force
+    }else{
+      if(!source){
+        source=name
+      }
+      source = source.replace(/^\//g, "")
+      if (theme.cdn.enable) {
+        let suffix=theme.cdn.prefix&&theme.cdn.prefix.match(/jsdelivr/g)?'.min.js':'.js'
+        source= (suffix==".min.js")?source.replace(/\.min/g, ""):source
+        theme.cdn.map.js[name]=theme.cdnCtrl.prefix + '/js/' + source + suffix + '?time=' + Date.now()
+      } else {
+        theme.cdn.map.js[name]=url_for('/js/')+ source + '.js?time=' + Date.now()
+      }
+    }
+    return theme.cdn.map.js[name]
+  }
+  theme.cdn.addCSS=(name,source,force)=>{
+    if(force){
+      theme.cdn.map.css[name]=force
+    }else{
+      if(!source){
+        source=name
+      }
+      source = source.replace(/^\//g, "")
+      if (theme.cdn.enable&&theme.cdn.prefix) {
+        let suffix=theme.cdn.prefix.match(/jsdelivr/g)?'.min.css':'.css'
+        source= (suffix==".min.js")?source.replace(/\.min/g, ""):source
+        theme.cdn.map.css[name]=theme.cdnCtrl.prefix + '/css/' + source + suffix + '?time=' + Date.now()
+      } else {
+        theme.cdn.map.css[name]=url_for('/css/')+ source + '.css?time=' + Date.now()
+      }
+    }
+    return theme.cdn.map.css[name]
+  }
+  dfs = (n,path) => {
+    for (const key in n) {
+      const element = n[key];
+      if(element && typeof element !="string"){
+        dfs(element,path.concat(key))
+      }else{
+        let op=path.concat(key)
+        let source=""
+        for (let index = 1; index < op.length; index++) {
+          const element = op[index];
+          source+=element
+          if (index!=op.length-1) {
+            source+="/"
+          }
+        }
+        if(op[0]=="js"){
+          theme.cdn.addJS(op[op.length-1],source,element)
+        }
+        if(op[0]=="css"){
+          theme.cdn.addCSS(op[op.length-1],source,element)
+        }
+      }
+    }
+  }
+
+
+  // 默认配置
+  theme.cdn.addCSS("style")
+  theme.cdn.addCSS("message")
+
+  theme.cdn.addJS("app")
+  theme.cdn.addJS("sites","plugins/sites")
+  theme.cdn.addJS("friends","plugins/friends")
+  theme.cdn.addJS("parallax", "plugins/parallax")
+  theme.cdn.addJS("rightMenu", "plugins/rightMenu")
+  theme.cdn.addJS("contributors","plugins/contributors")
+  theme.cdn.addJS("message", "thirdparty/message")
+  theme.cdn.addJS("valine","thirdparty/valine",theme.comments.valine.js)
+  theme.cdn.addJS("search","search/"+theme.search.service,theme.search.js)
+
+  // 以下用于配置项 cdn.set 覆盖配置,下面是覆盖配置的方法
+  // cdn:
+  // enable: true
+  // # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空，但是要使用CDN必须依据路径填写配置项的键
+  // set:
+  //   js:
+  //     app: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/app.js
+  //     rightMenu: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/rightMenu.js
+  //     parallax: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/parallax.js
+  //     plugins:
+  //       contributors: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/contributors.js
+  //       friends: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/friends.js
+  //       sites: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/sites.js
+  //   css:
+  //     style: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/style.css
+  //     message: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/message.css
+  //
+  //  更新：
+  //  在部署时加入了 ?time=' + Date.now()
+  //  使用 js(theme.cdn.map.js.app) 引入的地址会形如: /js/app.js?time=1232123123.js
+  //  但是无伤大雅
+  dfs(theme.cdn.set,[])
+_%>

package/layout/_partial/scripts/{coverCtrl.ejs → _ctrl/coverCtrl.ejs}

@@ -1,10 +1,12 @@
-<%
+<%_
   // 为保证初次进入页面流畅，要求开启pjax且浏览器禁用Javascript时(仅HTML渲染)封面控制正常
+  // layout/_plugins/pjax/pdata.ejs
+  // layout/_partial/cover.ejs
+  // layout/_partial/header.ejs
   theme.pjax_cover={}
   theme.pjax_cover.enableCover = false; // 封面是否开启
   theme.pjax_cover.frontMatterCover = 'none';  // 封面控制
   theme.pjax_cover.coverWrapperDisplay = 'none';
-  theme.pjax_cover.coverWrapperID = 'full';
   theme.pjax_cover.scrollDownDisplay = 'none';
   theme.pjax_cover.headerShow = 'show';
   if(theme.cover && theme.cover.height_scheme) {
@@ -22,30 +24,20 @@
     }
   }
   /*cover*/
-  if (theme.pjax_cover.frontMatterCover == "none") { // 移除封面
+  if (theme.pjax_cover.frontMatterCover == "full") {
+    theme.pjax_cover.coverWrapperDisplay= "";
+    theme.pjax_cover.scrollDownDisplay = "";
+  } else if (theme.pjax_cover.frontMatterCover == "half"){
+    theme.pjax_cover.coverWrapperDisplay= "";
+    theme.pjax_cover.scrollDownDisplay = "none";
+  } else if (theme.pjax_cover.frontMatterCover == "none"){
     theme.pjax_cover.coverWrapperDisplay= "none";
-  } else {
-  if (theme.pjax_cover.frontMatterCover == "half") { // 半屏
-    theme.pjax_cover.coverWrapperID= 'half';
     theme.pjax_cover.scrollDownDisplay = "none";
-  } else if (theme.pjax_cover.frontMatterCover == "full") { // 全屏
-    theme.pjax_cover.coverWrapperID= 'full';
-    theme.pjax_cover.scrollDownDisplay = "";
-  }
-  theme.pjax_cover.coverWrapperDisplay = "";
   }
   /*header*/
-  if (theme.plugins.pjax.enable) {
-    if (theme.pjax_cover.frontMatterCover == "none") { // 移除封面
-      theme.pjax_cover.headerShow="show";
-    } else {
-      theme.pjax_cover.headerShow="";
-    }
-  }else{
-    if(theme.cover.height_scheme){
-      theme.pjax_cover.headerShow="";
-    }else{
-      theme.pjax_cover.headerShow="show";
-    }
-}
-%>
+  if (theme.pjax_cover.frontMatterCover == "none") {
+    theme.pjax_cover.headerShow="show";
+  } else {
+    theme.pjax_cover.headerShow="";
+  }
+_%>

package/layout/_partial/scripts/_ctrl.ejs

@@ -0,0 +1,2 @@
+<%- partial('_partial/scripts/_ctrl/cdnCtrl') _%>
+<%- partial('_partial/scripts/_ctrl/coverCtrl') _%>

package/layout/_partial/scripts/content-visibility-scroll-fix.ejs

@@ -0,0 +1,86 @@
+<script>
+  // https://web.dev/content-visibility/
+  // https://www.caniuse.com/?search=content-visibility
+  // https://infrequently.org/2020/12/content-visibility-scroll-fix/
+  // https://infrequently.org/2020/12/resize-resilient-deferred-rendering/
+
+  // 备注 目前已知的问题:
+  // 动态修改导致的内容高度变化(例如评论框异步渲染的外部盒子高度变化) 无法提前获知, 进而导致的首次滚动条跳动无法去除 (wontfix) 事实上不使用 content-visibility 也会有跳动, 不过是比使用 content-visibility 跳动提前
+  // scrollreveal 插件潜在问题 目前尚不明确
+
+  let eqIsh = (a, b, fuzz = 2) => {
+    return Math.abs(a - b) <= fuzz;
+  };
+
+  let rectNotEQ = (a, b) => {
+    return !eqIsh(a.width, b.width) || !eqIsh(a.height, b.height);
+  };
+
+  // Keep a map of elements and the dimensions of
+  // their place-holders, re-setting the element's
+  // intrinsic size when we get updated measurements
+  // from observers.
+  let spaced = new WeakMap();
+
+  // Only call this when known cheap, post layout
+  let reserveSpace = (el, rect = el.getClientBoundingRect()) => {
+    let old = spaced.get(el);
+    // Set intrinsic size to prevent jumping on un-painting:
+    //    https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override
+    if (!old || rectNotEQ(old, rect)) {
+      spaced.set(el, rect);
+      el.style["contain-intrinsic-size"] = `${rect.width}px ${rect.height}px`;
+    }
+  };
+
+  let iObs = new IntersectionObserver(
+    (entries, o) => {
+      entries.forEach((entry) => {
+        // We don't care if the element is intersecting or
+        // has been laid out as our page structure ensures
+        // they'll get the right width.
+        reserveSpace(entry.target, entry.boundingClientRect);
+      });
+    },
+    { rootMargin: "500px 0px 500px 0px" }
+  );
+
+  let rObs = new ResizeObserver((entries, o) => {
+    entries.forEach((entry) => {
+      reserveSpace(entry.target, entry.contentRect);
+    });
+  });
+
+  let resizeResilientDeferredRendering = (Selector) => {
+    let articles = document.querySelectorAll(Selector);
+
+    if (articles.length) {
+      articles.forEach((el) => {
+        iObs.observe(el);
+        rObs.observe(el);
+      });
+
+      // Workaround for Chrome bug, part 2.
+      //
+      // Re-enable browser management of rendering for the
+      // first article after the first paint. Double-rAF
+      // to ensure we get called after a layout.
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          articles[0].style["content-visibility"] = "auto";
+        });
+      });
+    }
+  };
+
+  let contentVisibilityScrollFix = () => {
+    if (!("content-visibility" in document.documentElement.style)) {
+      return;
+    }
+    resizeResilientDeferredRendering(".post-story");
+    resizeResilientDeferredRendering("article");
+    resizeResilientDeferredRendering(".post-wrapper");
+  };
+  contentVisibilityScrollFix();
+  volantis.pjax.push(contentVisibilityScrollFix);
+</script>