Merge pull request #2 from FoxerLee/v0.9.1

V0.9.1 public

.travis.yml

@@ -21,4 +21,9 @@ before_script:
 
 script:
   - cd ../../
-  - hexo g
+  - hexo g
+
+
+branches:
+  only:
+    - master

CHANGELOG.md

@@ -1,5 +1,11 @@
 # 更新日志
 
+## v0.9.1 (Oct-17-2020)
+
+- 增加 gitalk 支持
+- 可自定义 favicon
+- 增加 lazyload 支持
+
 ## v0.8.2 (Sep-30-2020)
 
 - 修复了主页文章顺序错误的 bug

_config.yml

@@ -14,6 +14,8 @@ menu:
   Friends: /friends
   About: /about
 
+favicon: /images/logo.jpeg
+
 
 # Profile
 profile_title: Foxerlee's Journal
@@ -83,7 +85,22 @@ stylesheets:
 # scripts loaded in the end of the body
 scripts:
 - /js/hexo-theme-terran.js
-
+- /js/md5.js
+- /js/lazyLoad.js
+
+gitalk:
+  enable: true
+  ClientID: # Client ID
+  ClientSecret:  # Client Secret
+  repo:  # repo which stores your blog
+  owner: FoxerLee # Github account name
+  adminUser: ['FoxerLee']
+  ID: location.pathname
+  labels: ['Gitalk'] # GitHub issues' tag
+  perPage: 10 # How many comments in per page
+  pagerDirection: last # first - old to new; last - new to old
+  createIssueManually: false # if need admin user to create issue
+  distractionFreeMode: false # if cmd|ctrl + enter can submit comment
 
 about:
   avatar: /images/avatar.jpeg
@@ -98,4 +115,9 @@ about:
     3: Research Intern, National Instruments
     4: Software Intern, Microsoft
   interest: Machine Learning, Computer Vision, OCR, Segmentation, Few-shot Learning, Cybersecurity, Coding, Reading, Dota2, Fitness
-  github_chart: Foxerlee
+  github_chart: Foxerlee
+
+lazyload:
+  enable: true
+  onlypost: false
+  loadingImage: https://cdn.jsdelivr.net/npm/skx@0.0.9/img/lazy.gif

layout/_page/post.ejs

@@ -70,4 +70,8 @@
               </li>
           <% } %>
       </ul>
+
+    <% if (theme.gitalk.enable) { %>
+        <%- partial('_partials/gitalk') %>
+    <% } %>
   </div>

layout/_partials/gitalk.ejs

@@ -0,0 +1,20 @@
+<div id="gitalk-container"></div>
+
+<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
+<script src="/js/md5.js"></script>
+<script type="text/javascript">
+      var gitalk = new Gitalk({
+        clientID: '<%= theme.gitalk.ClientID %>',
+        clientSecret: '<%= theme.gitalk.ClientSecret %>',
+        repo: '<%= theme.gitalk.repo %>',
+        owner: '<%= theme.gitalk.owner %>',
+        admin: '<%= theme.gitalk.adminUser %>',
+        id: md5(<%= theme.gitalk.ID %>),      
+        labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),
+        perPage: <%= theme.gitalk.perPage %>,
+        pagerDirection: '<%= theme.gitalk.pagerDirection %>',
+        createIssueManually: <%= theme.gitalk.createIssueManually %>,
+        distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>
+      })
+      gitalk.render('gitalk-container')
+</script>

layout/_partials/head.ejs

@@ -17,5 +17,13 @@ if (is_tag()){
 <!-- Google Roboto Mono Font -->
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
+<!-- Gitalk -->
+<% if (is_post()) { %>
+  <link type="text/css" rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
+<% } %>
 <!-- Mathjax support -->
-<%- partial('_partials/mathjax',{cache: true}) %>
+<%- partial('_partials/mathjax',{cache: true}) %>
+<!-- website icon -->
+<% if (theme.favicon){ %>
+  <link rel="icon" href="<%- url_for(theme.favicon) %>">
+<% } %>

scripts/index.js

@@ -0,0 +1,5 @@
+
+hexo.on('generateBefore', function () {
+    require('./replace').replace(hexo);
+    require('./lazyLoad').lazyload(hexo);
+  })

scripts/lazyLoad.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports.lazyload = function (hexo) {
+    if (!hexo.theme.config.lazyload || !hexo.theme.config.lazyload.enable) {
+        return;
+    }
+    if (hexo.theme.config.lazyload.onlypost) {
+        hexo.extend.filter.register('after_post_render', require('./lazyProcess').processPost);
+    } else {
+        hexo.extend.filter.register('after_render:html',  require('./lazyProcess').processSite);
+    }
+}

scripts/lazyProcess.js

@@ -0,0 +1,21 @@
+'use strict';
+
+function lazyProcess(htmlContent)  {
+    let loadingImage = this.theme.config.lazyload.loadingImage;
+    let className = 'lazyload';
+    return htmlContent.replace(/<img([^>]*)src="([^"]*)"([^>]*)>/gim, function (match, attrBegin, src, attrEnd) {
+        if (!src || /class="(.*?)"/gi.test(match)) {
+          return match;
+        }
+        return `<img ${attrBegin} class="${className}" data-src="${src}" src="${loadingImage}" ${attrEnd}>`;
+    });
+}
+
+module.exports.processPost = function(data) {
+    data.content = lazyProcess.call(this, data.content);
+    return data;
+};
+
+module.exports.processSite = function (htmlContent) {
+    return lazyProcess.call(this, htmlContent);
+};

scripts/replace.js

@@ -1,9 +1,9 @@
 /**
  * Note: configs in _data/temp.yml will replace configs in hexo.theme.config.
  */
-hexo.on('generateBefore', function () {
-    if (hexo.locals.get) {
-      var data = hexo.locals.get('data') // 获取_data文件夹下的内容
-      data && data.temp && (hexo.theme.config = data.temp) // 如果temp.yml 存在，就把内容替换掉主题的config
-    }
-  })
+module.exports.replace = function (hexo) {
+  if (hexo.locals.get) {
+    var data = hexo.locals.get('data') // 获取_data文件夹下的内容
+    data && data.temp && (hexo.theme.config = data.temp) // 如果temp.yml 存在，就把内容替换掉主题的config
+  }
+}

source/js/lazyLoad.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var lazyloadImages = document.querySelectorAll("img.lazyload");    
+    var lazyloadThrottleTimeout;
+
+    function lazyload () {
+      if(lazyloadThrottleTimeout) {
+        clearTimeout(lazyloadThrottleTimeout);
+      }
+
+      lazyloadThrottleTimeout = setTimeout(function() {
+          var scrollTop = window.pageYOffset;
+          lazyloadImages.forEach(function(img) {
+              if(img.offsetTop < (window.innerHeight + scrollTop)) {
+                img.setAttribute('src', img.getAttribute('data-src'));
+                img.classList.remove('lazyload');
+              }
+          });
+          if(lazyloadImages.length == 0) { 
+            document.removeEventListener("scroll", lazyload);
+            window.removeEventListener("resize", lazyload);
+            window.removeEventListener("orientationChange", lazyload);
+          }
+      }, 20);
+    }
+
+    document.addEventListener("scroll", lazyload);
+    window.addEventListener("resize", lazyload);
+    window.addEventListener("orientationChange", lazyload);
+  });