1.根据时间切换背景

先把原来layout.ejs中根据config.yml设置背景的代码删了，调整一下样式。

不多废话了，直接上代码，简单得很。

<script type="text/javascript">
  (function () {
    var date = new Date();
    var hour = date.getHours();
    var bgView = document.getElementById("background");

    if (hour >= 6 && hour < 16) {
      bgView.style.backgroundImage = "url(https://example.com/example2.png)"
    }
    if (hour >= 16 && hour < 19) {
      bgView.style.backgroundImage = "url(https://example.com/example3.png)"
    }
    if (hour >= 21 || hour < 7) {
      bgView.style.backgroundImage = "url(https://example.com/example4.png)"
    }
  })();
</script>

2.添加夜间模式

照例，先上代码。这是body部分的css，具体基本覆盖所有class，太冗长了，感兴趣的可以F12扒一下我的。

/* 夜间模式 */
body.dark {
 background-color: #212121;
 color: #cccccc;

 a {
  color: #e1e1e1;

  &:hover {
   color: #82b1ff;
  }
 }
}

然后是js，太冗长了。用了大量if，可读性比较差，用switch重写效果应该也不太好，先这样吧。

<script type="text/javascript">
    function closeDarkMode0() {
        document.body.classList.remove('dark');
        document.cookie = "dark=0;path=/"
        bgView.style.backgroundImage = "url(https://cdn.jsdelivr.net/gh/wtrwx/wtrwxIMG/background.png)"
        header.style.height = "100%";
        //console.log('夜间模式关闭0');
    }
    function openDarkMode1() {
        document.body.classList.add('dark');
        document.cookie = "dark=1;path=/"
        bgView.style.backgroundImage = ""
        header.style.height = "50%";
        //console.log('夜间模式开启1');
    }
    function closeDarkMode2() {
        document.body.classList.remove('dark');
        document.cookie = "dark=2;path=/"
        bgView.style.backgroundImage = "url(https://cdn.jsdelivr.net/gh/wtrwx/wtrwxIMG/background.png)"
        header.style.height = "100%";
        //console.log('夜间模式关闭2');
    }
    function openDarkMode3() {
        document.body.classList.add('dark');
        document.cookie = "dark=3;path=/"
        bgView.style.backgroundImage = ""
        header.style.height = "50%";
        //console.log('夜间模式开启3');
    }
    (function () {
        var date = new Date();
        var hour = date.getHours();
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (matchMedia('(prefers-color-scheme: dark)').matches) {
            openDarkMode3();
        } else {
            if (hour >= 21 || hour < 7) {
                if (dark == '' || dark == '0' || dark == '1' || dark == '3') {
                    openDarkMode3();
                } else if (dark == '2') {
                    closeDarkMode2();
                }
            } else {
                if (dark == '' || dark == '0' || dark == '3') {
                    closeDarkMode0();
                } else if (dark == '2') {
                    closeDarkMode2();
                }
                if (dark == '1') {
                    openDarkMode1();
                }
            }
        }
    })();
    function switchDarkMode() {
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        var date = new Date();
        var hour = date.getHours();
        if (hour >= 21 || hour < 7) {
            if (dark == '1' || dark == '3') {
                closeDarkMode2();
            } else if (dark == '2') {
                openDarkMode1();
            }
        } else {
            if (dark == '0' || dark == '2') {
                openDarkMode1();
            } else if (dark == '1' || dark == '3') {
                closeDarkMode0();
            }
        }
    }
</script>

3.自定义滚动条样式

在\myBlog\themes\fluid\source\css\_pages\_base\base.styl中添加以下代码。

/* 自定义滚动条 */
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  width: 10px;
  height: 16px;
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: rgba(227, 242, 253, 1);
}

/* 定义滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgba(26, 115, 232, 0.502);
}

4.添加Sncakbar

Snackbar是Android挺好用的一个组件，用css仿一下吧，效果可以点代码框旁边的copy体验。

这部分是抄菜鸟工具的。

#snackbar {
  visibility: hidden;
  min-width: 300px;
  margin-left: -150px;
  background-color: #323232;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 12px;
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 0px;
  font-size: 15px;
}

#snackbar.show {
  visibility: visible;
  z-index: 4;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: -20px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: -20;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 0;
    opacity: 1;
  }

  to {
    bottom: -20px;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 0;
    opacity: 1;
  }

  to {
    bottom: -20px;
    opacity: 0;
  }
}

html：

<div id="snackbar">内容</div>

js：

function showSnackbar(text) {
  var x = document.getElementById("snackbar")
  x.innerHTML = text;
  x.className = "show";
  setTimeout(function () {
  x.className = x.className.replace("show", "");
  }, 3000);
}

调用方法：

showSnackbar("提示内容");