perf: optimize article content page

layout/_partial/article-meta-info.ejs

@@ -26,14 +26,9 @@
             </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){ %>
@@ -41,4 +36,9 @@
             <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>
 
+        <% if (theme.style.avatar && config.author) { %>
+            <div class="article-header">
+                <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

@@ -22,3 +22,7 @@ hexo.extend.helper.register('createNewArchivePosts', function (posts) {
   postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
   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,10 +11,8 @@
     magic-container(1.008, 1.002, 30px);
   }
 
-
   .article-title {
-
+    color: var(--second-text-color);
-    h3 {
     font-weight: 600;
     font-size: 1.8em;
 
@@ -23,21 +23,75 @@
     +ils-mobile() {
       font-size: 1.2em;
     }
-
-      margin: 0;
   }
 
-    a {
+
-      color: var(--second-text-color);
+  .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%;
       }
 
     }
 
-  .meta-info {
+
-    margin: 10px 0 30px 0;
+    .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;
         }
+      }
+    }
+
+  }
+
 
   .article-content {
+    margin-top: 30px;
     text-align: justify;
     padding-bottom: 30px;
     border-bottom: 1px solid var(--border-color);

source/css/layout/common/variables.styl

@@ -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;
   },