update

+ darkmode
+ fix lazyload disqus

README.md

@@ -108,11 +108,11 @@ tagscloud:
 - [x] 图片窗口内打开
 - [x] 回到顶部
 - [x] 加载进度条
+- [x] 夜间模式
 - [ ] 添加动画效果
 - [ ] 不蒜子阅读量统计
 - [ ] 多语言支持
 - [ ] 一言 支持
 - [ ] Gitment 支持
 - [ ] 代码高亮优化
-- [ ] 夜间模式
 - [ ] 侧边目录优化

layout/partial/footer.ejs

@@ -12,6 +12,7 @@
         <% if(theme.totop){ %>
         <script src="/js/totop.js"></script>
         <% } %>
+        <script src="/js/night.js"></script>
         <div id="footer">Copyright © <%- theme.sitesince %> - <%- date(Date.now(), 'YYYY') %> <a href="/."
                         rel="nofollow"><%- config.title %>.</a><br>Powered by<a rel="nofollow" target="_blank"
                         href="https://hexo.io">

layout/partial/header.ejs

@@ -29,4 +29,8 @@
 <div class="totop">
 <i class="fas fa-angle-double-up fa-3x" onclick="totop()"></i>
 </div>
+<div class="daynight">
+<i class="fas fa-moon fa-2x" onclick="daynight()"></i>
+<i class="fas fa-sun fa-2x" onclick="daynight()"></i>
+</div>
 <% } %>

source/css/default.css

@@ -10,6 +10,10 @@ body {
     padding-top: 2px;
 }
 
+pre {
+    border-radius: 0px !important;
+}
+
 .post-copyright {
     margin: 2em 0 0;
     padding: 0.5em 1em;
@@ -207,6 +211,15 @@ figure.highlight {
 }
 
 .totop {
+    right: 20px;
+    position: fixed;
+    z-index: 99;
+    bottom: 50px;
+    transition-duration: 0.5s;
+    color: rgba(0, 0, 0, 0.658);
+}
+
+.daynight {
     right: 20px;
     position: fixed;
     z-index: 99;
@@ -217,4 +230,80 @@ figure.highlight {
 
 .totop:hover {
     color: rgba(0, 0, 0, 1);
-}
+}
+
+/*夜间部分*/
+
+body.night {
+    background: rgba(0, 0, 0, 0.6);
+}
+
+body.night a {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.night .panel {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 5px white;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.night p {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+body.night .post-time {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+body.night #footer {
+    color: white;
+}
+
+body.night .tag-list-item {
+    background: none;
+    border: none;
+}
+
+body.night .tag-list-link {
+    color: rgba(255, 255, 255, 0.8) !important;
+    background: none !important;
+}
+
+body.night .tag-list-count {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+body.night .frlink {
+    border: none;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.night nav.navbar.navbar-default.navbar-fixed-top {
+    background: #3d3d3d;
+    border: none;
+    box-shadow: 0 0 8px white;
+}
+
+body.night .fas {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+body.night img {
+    filter: brightness(70%);
+}
+
+body.night .post-copyright {
+    background: rgba(0, 0, 0, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.night .post {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.night pre {
+    background-color: rgba(0, 0, 0, 0.4);
+    color: rgba(255, 255, 255, 0.8);
+}

source/js/disqus-lazyload.js

@@ -7,41 +7,18 @@ function isInViewPortOfOne(el) {
     // 这里有个+100是为了提前加载+ 100
     return top <= viewPortHeight + 100
 }
-var scrollAction = { x: 'undefined', y: 'undefined' }, scrollDirection;
-function scrollFunc() {
-    if (typeof scrollAction.x == 'undefined') {
-        scrollAction.x = window.pageXOffset;
-        scrollAction.y = window.pageYOffset;
-    }
-    var diffX = scrollAction.x - window.pageXOffset;
-    var diffY = scrollAction.y - window.pageYOffset;
-    if (diffX < 0) {
-        // Scroll right
-        scrollDirection = 'right';
-    } else if (diffX > 0) {
-        // Scroll left
-        scrollDirection = 'left';
-    } else if (diffY < 0) {
-        // Scroll down
-        scrollDirection = 'down';
-    } else if (diffY > 0) {
-        // Scroll up
-        scrollDirection = 'up';
-    } else {
-        // First scroll event
-    }
-    scrollAction.x = window.pageXOffset;
-    scrollAction.y = window.pageYOffset;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
 }
-scrollFunc();
-var status = 0;
-window.onscroll = function (e) {
-    scrollFunc();
-    if (scrollDirection == 'down') {
+var check = async function () {
+    while (true) {
         if (isInViewPortOfOne($('#disqus_thread')[0]) && status == 0) {
             disqusload();
             status = 1;
             $('#loaddisqus')[0].innerText = "";
+            break;
         }
+        await sleep(1000);
     }
-}
+}
+check();

source/js/night.js

@@ -0,0 +1,36 @@
+var c = document.cookie.split(';');
+for (let index = 0; index < c.length; index++) {
+    c[index] = c[index].split('=');
+}
+var darkmode = "";
+for (let index = 0; index < c.length; index++) {
+    if (c[index][0].replace(' ', '') == "darkmode") {
+        darkmode = c[index][1].replace(' ', '');
+    }
+};
+function daynight() {
+    if (darkmode == "day") {
+        darkmode = "night";
+        document.cookie = "darkmode=night;path=/;";
+        $('body').addClass('night');
+        $('.fa-moon')[0].style.display = "none";
+        $('.fa-sun')[0].style.display = "";
+    } else {
+        darkmode = "day";
+        document.cookie = "darkmode=day;path=/;";
+        $('body').removeClass('night');
+        $('.fa-moon')[0].style.display = "";
+        $('.fa-sun')[0].style.display = "none";
+    }
+}
+if (darkmode == "") {
+    darkmode = "day";
+    $('.fa-moon')[0].style.display = "none";
+} else {
+    if (darkmode == "night") {
+        $('body').addClass('night');
+        $('.fa-moon')[0].style.display = "none";
+    } else {
+        $('.fa-sun')[0].style.display = "none";
+    }
+}