perf: optimize article content page

layout/_partial/article-meta-info.ejs

@@ -26,19 +26,19 @@
             </ul>
         </span>
     <% } %>
-    <% if (theme.website_count.busuanzi_count.enable && theme.website_count.busuanzi_count.page_pv && is_post()) { %>
-        <span class="article-pv article-meta-item">
-            <i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
-        </span>
-    <% } %>
     <% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.wordcount){ %>
         <span class="article-wordcount article-meta-item">
-        <i class="fa fa-book"></i> <span><%= wordcount(page.content) %> <%- __('wordcount') %></span>
+            <i class="fa fa-file-word-o"></i> <span><%= wordcount(page.content) %> <%- __('wordcount') %></span>
         </span>
     <% } %>
     <% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.min2read){ %>
         <span class="article-min2read article-meta-item">
-        <i class="fa fa-clock-o"></i> <span><%= min2read(page.content) %> <%- __('min2read') %></span>
+            <i class="fa fa-clock-o"></i> <span><%= min2read(page.content) %> <%- __('min2read') %></span>
+        </span>
+    <% } %>
+    <% if (is_post() && theme.website_count.busuanzi_count.enable && theme.website_count.busuanzi_count.page_pv) { %>
+        <span class="article-pv article-meta-item">
+            <i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
         </span>
     <% } %>
 </div>

layout/article-content.ejs

@@ -2,12 +2,25 @@
     <div class="article-content-container">
 
         <div class="article-title">
-            <h3><a class="title-hover-animation"><%= page.title %></a></h3>
+            <span class="title-hover-animation"><%= page.title %></span>
         </div>
 
-        <div class="meta-info">
+        <% if (theme.style.avatar && config.author) { %>
-            <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
+            <div class="article-header">
-        </div>
+                <div class="avatar">
+                    <%- image_tag(theme.style.avatar) %>
+                </div>
+                <div class="info">
+                    <div class="author">
+                        <span><%= config.author %></span>
+                        <span class="level">Lv<%- getLevel(site.posts.length) %></span>
+                    </div>
+                    <div class="meta-info">
+                        <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
+                    </div>
+                </div>
+            </div>
+        <% } %>
 
         <div class="article-content markdown-body">
             <%- page.content %>

scripts/helpers/helper.js

@@ -1,24 +1,28 @@
 hexo.extend.helper.register('isInHomePaging', function (pagePath, route) {
-    if (pagePath.length > 5 && route === '/') {
+  if (pagePath.length > 5 && route === '/') {
-        return pagePath.slice(0, 5) === 'page/';
+    return pagePath.slice(0, 5) === 'page/';
-    } else {
+  } else {
-        return false;
+    return false;
-    }
+  }
 });
 
 hexo.extend.helper.register('createNewArchivePosts', function (posts) {
-    const postList = [], postYearList = [];
+  const postList = [], postYearList = [];
-    posts.forEach(post => postYearList.push(post.date.year()));
+  posts.forEach(post => postYearList.push(post.date.year()));
-    Array.from(new Set(postYearList)).forEach(year => {
+  Array.from(new Set(postYearList)).forEach(year => {
-        postList.push({
+    postList.push({
-            year: year,
+      year: year,
-            postList: []
+      postList: []
-        })
+    })
-    });
+  });
-    postList.sort((a, b) => b.year - a.year)
+  postList.sort((a, b) => b.year - a.year)
-    postList.forEach(item => {
+  postList.forEach(item => {
-        posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
+    posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
-    });
+  });
-    postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
+  postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
-    return postList;
+  return postList;
+});
+
+hexo.extend.helper.register('getLevel', function (postCount) {
+  return Math.ceil(postCount / 10);
 });

source/css/layout/_partial/article-meta-info.styl

@@ -13,6 +13,7 @@
     }
   }
 
+
   .article-tags, .article-categories {
     display: inline;
 
@@ -28,4 +29,19 @@
       }
     }
   }
+
+
+  .article-wordcount, .article-tags {
+    +ils-mobile() {
+      display: none;
+    }
+  }
+
+  .article-min2read, .article-categories {
+
+    +ils-tablet() {
+      display: none;
+    }
+
+  }
 }

source/css/layout/_partial/header.styl

@@ -272,12 +272,12 @@ $header-progress-height = 2.8px;
       .menu-item {
         a:hover {
           &::after {
-            bottom: -($header-shrink-height / 2 - 10);
+            bottom: -($header-shrink-height / 2 - 11);
           }
         }
 
         .active::after {
-          bottom: -($header-shrink-height / 2 - 10);
+          bottom: -($header-shrink-height / 2 - 11);
         }
       }
 

source/css/layout/article-content.styl

@@ -1,6 +1,8 @@
 @require 'common/variables.styl'
 @require 'common/magic-theme.styl'
 
+$avatarWidth = 46px;
+
 .article-content-container {
 
   background: var(--background-color);
@@ -9,35 +11,87 @@
     magic-container(1.008, 1.002, 30px);
   }
 
-
   .article-title {
+    color: var(--second-text-color);
+    font-weight: 600;
+    font-size: 1.8em;
 
-    h3 {
+    +ils-tablet() {
-      font-weight: 600;
+      font-size: 1.5em;
-      font-size: 1.8em;
-
-      +ils-tablet() {
-        font-size: 1.5em;
-      }
-
-      +ils-mobile() {
-        font-size: 1.2em;
-      }
-
-      margin: 0;
     }
 
-    a {
+    +ils-mobile() {
-      color: var(--second-text-color);
+      font-size: 1.2em;
+    }
+  }
+
+
+  .article-header {
+    margin-top: 16px;
+    position: relative;
+    padding-left: $avatarWidth;
+    width: 100%;
+    height: $avatarWidth;
+    box-sizing: border-box;
+
+    +ils-tablet() {
+      transform: scale(0.9);
+      transform-origin: left top;
+    }
+
+    .avatar {
+      position: absolute;
+      top: 0
+      left: 0;
+      width: $avatarWidth;
+      height: $avatarWidth;
+      padding: 1px;
+      box-sizing: border-box;
+      border: 1px solid var(--border-color);
+      border-radius: 50%;
+
+      img {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+
+
+    .info {
+      padding: 2px 0;
+      margin-left: 10px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+
+      .author {
+        font-weight: 600;
+        font-size: 1.18em;
+        display: flex;
+        align-items: center;
+
+        .level {
+          margin-left: 10px;
+          color: #fff;
+          font-size: 12px;
+          font-weight: 500;
+          background: var(--selection-color);
+          padding: 0 4px;
+          border-radius: 5px;
+        }
+      }
     }
 
   }
 
-  .meta-info {
-    margin: 10px 0 30px 0;
-  }
 
   .article-content {
+    margin-top: 30px;
     text-align: justify;
     padding-bottom: 30px;
     border-bottom: 1px solid var(--border-color);

source/css/layout/common/variables.styl

@@ -6,25 +6,25 @@
 // layout
 // ========================================================================
 if (hexo-config('magic.enable')) {
-  $header-height = 72px;        // magic 风格：头部默认高度
+  $header-height = 72px; // magic 风格：头部默认高度
 } else {
-  $header-height = 100px;       // normal 风格：头部默认高度
+  $header-height = 100px; // normal 风格：头部默认高度
 }
 
-$main-content-width = 62%;          // 中间内容区域宽度（PC）
+$main-content-width = 62%; // 中间内容区域宽度（PC）
-$main-content-width-tablet = 80%;   // 中间内容区域宽度（平板）
+$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
-$main-content-width-mobile = 88%;   // 中间内容区域宽度（手机）
+$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
 
-$header-shrink-height = 56px;       // 头部收缩高度
+$header-shrink-height = 56px; // 头部收缩高度
-$circle-button-width = 40px;        // tools 圆形工具按钮宽度
+$circle-button-width = 40px; // tools 圆形工具按钮宽度
-$tools-button-width = 32px;         // tools 方形工具按钮宽度
+$tools-button-width = 32px; // tools 方形工具按钮宽度
-$component-interspace = 40px;       // 组件/模块的间隔值（px）
+$component-interspace = 40px; // 组件/模块的间隔值（px）
 
 // ========================================================================
 // 媒体查询
 // ========================================================================
-$media-max-width = 760px;         // 媒体查询最大宽度 (平板)
+$media-max-width = 760px; // 媒体查询最大宽度 (平板)
-$media-max-width-mobile = 480px;  // 媒体查询最大宽度（手机）
+$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
 
 ils-tablet()
   @media (max-width: $media-max-width)
@@ -54,15 +54,15 @@ $z-index-9 = 1009;
 // ========================================================================
 // normal mode color
 $primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
-$background-color = #fff;                                   // normal 风格 背景颜色
+$background-color = #fff; // normal 风格 背景颜色
-$magic-background-color = #fafafa;                          // magic 风格 背景颜色
+$magic-background-color = #fafafa; // magic 风格 背景颜色
-$normal-text-color = #43404d;                               // 通用文本颜色（默认字体颜色）
+$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
-$first-text-color = darken($normal-text-color, 8%);         // 第一文本颜色
+$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
-$second-text-color = darken($normal-text-color, 4%);        // 第二文本颜色
+$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
-$third-text-color = lighten($normal-text-color, 40%);       // 第三文本颜色
+$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
-$fourth-text-color = #eee;                                  // 第四文本颜色
+$fourth-text-color = #eee; // 第四文本颜色
-$border-color = darken($background-color, 30%);             // 边框颜色
+$border-color = darken($background-color, 30%); // 边框颜色
-$selection-color = lighten($primary-color, 10%);            // 文字选中的颜色
+$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
 
 // dark mode color
 $dark-primary-color = $primary-color;
@@ -80,12 +80,8 @@ $dark-selection-color = $selection-color;
 // ========================================================================
 // font
 // ========================================================================
-// 'PingHei', 'PingFang SC', 'Microsoft YaHei';
-// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
-// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
-// "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
 $default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-//$default-font-family = Roboto, Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans CJK", sans-serif;
+//$default-font-family = -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
 $default-font-size = 15.2px;
 $default-font-line-height = 20px;
 $default-font-weight = 400;

source/js/left-side-toggle.js

@@ -33,7 +33,6 @@ window.addEventListener('DOMContentLoaded', () => {
       const pageAsideWidth = '258px';
       this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
       this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
-      this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
       this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
       this.headerContentDom.style.width = isOpen ? '76%' : '62%';
       this.mainContentDom.style.width = isOpen ? '76%' : '62%';

source/js/toc.js

@@ -3,7 +3,6 @@ window.addEventListener('DOMContentLoaded', () => {
   ILS.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
   ILS.utils.articleToc_dom = document.querySelector('.article-toc');
   ILS.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
-  ILS.utils.headerWrapper_dom = document.querySelector('.header-wrapper');
 
   if (ILS.utils.navItems.length > 0) {
 
@@ -37,7 +36,7 @@ window.addEventListener('DOMContentLoaded', () => {
               scrollTop: offset - 10,
               complete: function () {
                 setTimeout(() => {
-                  ILS.utils.headerWrapper_dom.style.display = 'none';
+                  ILS.utils.pageTop_dom.style.transform = 'translateY(-100%)';
                 }, 100)
               }
             });

source/js/utils.js

@@ -9,7 +9,7 @@ ILS.utils = {
   ...ILS.utils,
 
   headerProgress_dom: document.querySelector('.header-progress'),
-  headerWrapper_dom: document.querySelector('.header-wrapper'),
+  pageTop_dom: document.querySelector('.page-main-content-top'),
 
   // Scroll Style Handle
   prevScrollValue: 0,
@@ -27,9 +27,9 @@ ILS.utils = {
 
     // hide header handle
     if (scrollTop > this.prevScrollValue && scrollTop > 500) {
-      this.headerWrapper_dom.style.display = 'none';
+      this.pageTop_dom.style.transform = 'translateY(-100%)';
     } else {
-      this.headerWrapper_dom.style.display = 'flex';
+      this.pageTop_dom.style.transform = 'translateY(0)';
     }
     this.prevScrollValue = scrollTop;
   },