pref: perfect configuration & optimize style

_config.yml

@@ -1,17 +1,30 @@
-# theme basic info
+# ------------------------------------------------------------
+# Theme basic info (please don't change)
+# ------------------------------------------------------------
 theme_info:
   name: ILS
   version: 2.0.1
   author: XPoet
   repository: https://github.com/XPoet/hexo-theme-ils
 
-# favicon
-favicon: images/favicon.png
 
-# avatar
+# ------------------------------------------------------------
-avatar: images/avatar.png
+# Theme style settings
+# ------------------------------------------------------------
+style:
+  # Theme color
+  theme_color: "#0066CC"
 
-# navigation menu
+  # favicon
+  favicon: images/favicon.png
+
+  # avatar
+  avatar: images/avatar.png
+
+
+# ------------------------------------------------------------
+# Navigation menu
+# ------------------------------------------------------------
 menu:
   Home: /
   Archives: /archives
@@ -21,13 +34,22 @@ menu:
   # About: /about
   # ...
 
-# RSS
-rss:
-  enable: true
 
-# comment plugin
+# ------------------------------------------------------------
+# RSS
+# Dependencies: hexo-generator-feed
+# See: https://github.com/hexojs/hexo-generator-feed
+# ------------------------------------------------------------
+rss:
+  enable: false
+
+
+# ------------------------------------------------------------
+# Comment plugin
+# ------------------------------------------------------------
 comments:
-  # Valine https://github.com/xCss/Valine
+  # Valine
+  # See: https://github.com/xCss/Valine
   valine:
     enable: false
     appid:                # your leancloud application appid
@@ -35,25 +57,34 @@ comments:
     meta:                 # comment input meta, type: Array, values: ['nick','mail','link']
     placeholder:          # your placeholder
 
-  # Gitalk https://github.com/gitalk/gitalk
+  # Gitalk
+  # See: https://github.com/gitalk/gitalk
   gitalk:
     enable: false
     github_id:             # GitHub repo owner
-      repository:          # Repository name to store issues
+    repository:            # Repository name to store issues
     client_id:             # GitHub Application Client ID
     client_secret:         # GitHub Application Client Secret
 
-# website count
+
+# ------------------------------------------------------------
+# Website count
+# ------------------------------------------------------------
 website_count:
-  # busuanzi http://ibruce.info/2015/04/04/busuanzi/
+  # busuanzi
+  # See: http://ibruce.info/2015/04/04/busuanzi/
   busuanzi_count:
     enable: false
     site_uv: false
     site_pv: false
     page_pv: false
 
+
+# ------------------------------------------------------------
 # Local Search
-# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
+# Dependencies: hexo-generator-searchdb
+# See: https://github.com/theme-next/hexo-generator-searchdb
+# ------------------------------------------------------------
 local_search:
   enable: true
 
@@ -67,36 +98,57 @@ local_search:
   # Preload the search data when the page loads.
   preload: false
 
+
+# ------------------------------------------------------------
 # Post word count
-# Dependencies: https://github.com/willin/hexo-wordcount
+# Dependencies: hexo-wordcount
+# See: https://github.com/willin/hexo-wordcount
+# ------------------------------------------------------------
 post_wordcount:
+  enable: false
   wordcount: false  # word count, one article
   min2read: false   # time to read, one article
 
-# Home page article block display settings
-home_article:
-  category: true # show category in article block
-  tag: true # show tags in article block
-  tag_limit: 5 # max number of tags shown in article block
 
-# Code Copy
+# ------------------------------------------------------------
+# Home page article block display settings
+# ------------------------------------------------------------
+home_article:
+  category:
+    enable: false     # show category in home page article block
+    limit: 3          # max number of categories shown in home page article block
+  tag:
+    enable: false     # show tags in home page article block
+    limit: 5          # max number of tags shown in home page article block
+
+
+# ------------------------------------------------------------
+# Code copy
+# ------------------------------------------------------------
 code_copy:
   enable: true
-  style: flat  # values: default | flat | mac
+  style: flat        # values: default | flat | mac
 
-# sidebar tools
+
+# ------------------------------------------------------------
+# Sidebar tools
+# ------------------------------------------------------------
 side_tools:
-  enable: true
+  enable: false
-  position: right  # values: left | right
 
-# back to top
+
+# ------------------------------------------------------------
+# Back to top
+# ------------------------------------------------------------
 back2top:
-  enable: true
+  enable: false
-  position: right  # values: left | right
 
+
+# ------------------------------------------------------------
 # Table of Contents in the Sidebar
+# ------------------------------------------------------------
 toc:
-  enable: true
+  enable: false
 
   # Automatically add list number to toc.
   number: true
@@ -104,8 +156,11 @@ toc:
   # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
   expand_all: true
 
-# magic theme
+
+# ------------------------------------------------------------
+# Magic
+# ------------------------------------------------------------
 magic:
   enable: true
-  scale: false
+  scale: false    # scale effect when the mouse hover
-  shadow: true
+  shadow: false   # shadow effect when the mouse hover

layout/_partial/article-meta-info.ejs

@@ -31,12 +31,12 @@
             <i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
         </span>
     <% } %>
-    <% if(theme.post_wordcount.wordcount && is_post()){ %>
+    <% 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>
         </span>
     <% } %>
-    <% if(theme.post_wordcount.min2read && is_post()){ %>
+    <% 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>
         </span>

layout/_partial/footer.ejs

@@ -3,10 +3,6 @@
         <div class="copyright-info info-item">
             &copy; <%= date(new Date(), 'YYYY') %> <i class="fa fa-heart-o"></i> <a href="/"><%= config.author %></a>
         </div>
-        <div class="theme-info info-item">
-            <%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %> <a
-                    href="https://github.com/XPoet/hexo-theme-ils" target="_blank"><%= theme.theme_info.name %> v<%= theme.theme_info.version %></a>
-        </div>
         <% if (theme.website_count.busuanzi_count.enable) { %>
             <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
             <div class="website-count info-item">
@@ -22,5 +18,9 @@
                 <% } %>
             </div>
         <% } %>
+        <div class="theme-info info-item">
+            <%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %> <a
+                    href="https://github.com/XPoet/hexo-theme-ils" target="_blank"><%= theme.theme_info.name %> v<%= theme.theme_info.version %></a>
+        </div>
     </div>
 </footer>

layout/_partial/head.ejs

@@ -21,8 +21,8 @@
         <% if (title){ %><%= title %> | <% } %><%= config.title %>
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <% if (theme.favicon){ %>
+    <% if (theme.style.favicon){ %>
-        <%- favicon_tag(theme.favicon) %>
+        <%- favicon_tag(theme.style.favicon) %>
     <% } %>
     <%- css('css/style') %>
     <%- export_config() %>

layout/_partial/scripts.ejs

@@ -15,9 +15,7 @@
     <% } %>
 
     <% if (theme.toc.enable) { %>
-        <%- js(['lib/anime.min.js', 'js/toc.js']) %>
+        <%- js(['lib/anime.min.js', 'js/toc.js', 'js/post-toc.js']) %>
     <% } %>
-
-    <%- js('js/post.js') %>
 <% } %>
 

layout/home-content.ejs

@@ -24,23 +24,26 @@
                     <div class="article-date">
                         <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
                         <% if (theme.magic.enable === true) { %>
-                            <% if (theme.home_article.category === true) { %>
+                            <% if (theme.home_article.category.enable === true) { %>
                                 <span>
                             <i class="fa fa-folder"></i>
                             <ul>
-                                <% post.categories.forEach((category, i) => { %>
+                                <% post.categories.forEach((category, i) => {
-                                    <li><%= i === 0 ? '' : '> ' %><a
+                                if (theme.home_article.category.limit === 0 || i + 1 <= theme.home_article.category.limit) { %>
-                                                href="<%- url_for(category.path) %>"><%= category.name %></a></li>
+                                    <li>
+                                        <%= i === 0 ? '' : '> ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
+                                    </li>
+                                <% } %>
                                 <% }); %>
                             </ul>
                             </span>
                             <% } %>
-                            <% if (theme.home_article.tag === true) { %>
+                            <% if (theme.home_article.tag.enable === true) { %>
                                 <span>
                             <i class="fa fa-tags"></i>
                             <ul>
                                 <% post.tags.forEach((tag, i) => {
-                                if (theme.home_article.tag_limit === 0 | i + 1 <= theme.home_article.tag_limit) { %>
+                                if (theme.home_article.tag.limit === 0 || i + 1 <= theme.home_article.tag.limit) { %>
                                     <li>
                                         <%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
                                     </li>

layout/page.ejs

@@ -59,8 +59,6 @@
         <%- partial('_partial/tools') %>
     </div>
 
-
-
     <!-- page aside -->
     <aside class="page-aside">
         <% if (is_post()) { %>
@@ -71,7 +69,6 @@
 </div>
 
 
-
 <% if (theme.local_search.enable) { %>
     <%- partial('_partial/local-search') %>
 <% } %>

source/css/layout/_partial/tools.styl

@@ -57,6 +57,9 @@ $li-margin-bottom = 12px;
 
       &.scroll-to-top {
         display: none;
+        position: fixed;
+        right: $component-interspace;
+        bottom: $component-interspace;
       }
 
       &.page-aside-toggle {

source/css/layout/common/variables.styl

@@ -51,16 +51,16 @@ $z-index-8 = 1008;
 // color
 // ===================================
 // normal mode color
-$primary-color = rgba(30, 88, 217, 0.96);             // 主题颜色
+$primary-color = convert(hexo-config("style.theme_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, 20%);      // 文字选中的颜色
+$selection-color = lighten($primary-color, 10%);            // 文字选中的颜色
 
 // dark mode color
 $dark-primary-color = $primary-color;

source/css/layout/page.styl

@@ -137,6 +137,7 @@ $page-aside-width = 248px;
     the-transition-ease-out();
   }
 
+
   .sidebar-tools {
     position: fixed;
     top: $header-height + $component-interspace;
@@ -155,4 +156,10 @@ $page-aside-width = 248px;
       transform-origin: right top;
     }
   }
+
+
+  .sidebar-tools-shrink {
+    transition();
+    top: $header-shrink-height + $component-interspace;
+  }
 }

source/js/header-shrink.js

@@ -1,41 +1,36 @@
 const pageTemplateDom = document.querySelector('.page-main-content');
-const articleTocContainerDom = document.querySelector('.article-toc-container');
+const sidebarToolsDom = document.querySelector('.sidebar-tools');
 const headerDom = document.querySelector('.header-wrapper');
 const menuBarDom = document.querySelector('.menu-bar');
 const windowMaskDom = document.querySelector('.window-mask');
-const scrollPercentDom = document.querySelector('.scroll-percent');
+
 
 let isHeaderShrink = false;
 const headerHeight = headerDom.getBoundingClientRect().height;
 
 window.addEventListener('scroll', function (_e) {
-    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-    if (!isHeaderShrink && scrollTop > headerHeight) {
+  if (!isHeaderShrink && scrollTop > headerHeight) {
-        isHeaderShrink = true;
+    isHeaderShrink = true;
-        headerDom.classList.add('header-wrapper-shrink');
+    headerDom.classList.add('header-wrapper-shrink');
-        pageTemplateDom.classList.add('page-main-content-top-shrink');
+    pageTemplateDom.classList.add('page-main-content-top-shrink');
+    sidebarToolsDom.classList.add('sidebar-tools-shrink');
 
-        if (articleTocContainerDom) {
+  } else if (isHeaderShrink && scrollTop <= headerHeight) {
-            articleTocContainerDom.classList.add('article-toc-container-shrink');
+    isHeaderShrink = false;
-        }
+    headerDom.classList.remove('header-wrapper-shrink');
-    } else if (isHeaderShrink && scrollTop <= headerHeight) {
+    pageTemplateDom.classList.remove('page-main-content-top-shrink');
-        isHeaderShrink = false;
+    sidebarToolsDom.classList.remove('sidebar-tools-shrink');
-        headerDom.classList.remove('header-wrapper-shrink');
+  }
-        pageTemplateDom.classList.remove('page-main-content-top-shrink');
-
-        if (articleTocContainerDom) {
-            articleTocContainerDom.classList.remove('article-toc-container-shrink');
-        }
-    }
 });
 
 
 menuBarDom.addEventListener('click', function (_e) {
-    headerDom.classList.toggle('header-drawer-show');
+  headerDom.classList.toggle('header-drawer-show');
 });
 
 windowMaskDom.addEventListener('click', function (_e) {
-    headerDom.classList.toggle('header-drawer-show');
+  headerDom.classList.toggle('header-drawer-show');
 });