V2.0.0

Breaking change
1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容
2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式
3. 增加medium-zoom大圖查看模式
4. 增加鼠標點擊特效：文字和愛心 兩個點擊特效
5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞)
6. 添加 snackbar 彈窗
7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode
8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo)
9. 主題所需要的css和js可根據需要配置CDN
10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下
11. 背景特效和背景圖片在手機界面也會顯示
12. 增加justified-gallery圖片顯示(Tag Plugins)
Feature
1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon
2. 更改懶加載js
3. 升級typed.js/instantpage.js到最新版
4. 搜索和右下角按鈕添加退出特效
Fixed
1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug
2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug
3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug
4. 優化sidebar的打開速度
5. 修復文章頁標題左右邊距不平等的bug
6. 修復keywords讀取的bug
7. 修復當post/page 內容為空時，footer位置錯亂的bug
8. 修復在手機safari，toc sidebar底部內容被遮擋的bug
9. 完善Dark mode,一些界面的配色
10. 修復 card-archives 查看更多 跳轉bug
Remove
1. 移除Gitment
2. 移除Gallery

source/css/_global/index.styl

@@ -19,6 +19,13 @@ body
     -webkit-user-select: none
     -ms-user-select: none
 
+#body-wrap
+  position relative
+  flex: 1 auto
+  display: flex
+  flex-direction: column
+  transition: all .3s
+
 *::-webkit-scrollbar
   width: 8px
   height: 8px
@@ -160,10 +167,10 @@ table
 .is_hidden
   overflow: hidden
 
-.pull-left
+.pull_left
   float: left
 
-.pull-right
+.pull_right
   float: right
 
 .fireworks
@@ -171,12 +178,9 @@ table
   z-index: -1
   pointer-events: none
 
-// 去掉加載黑框
-img[src=""],img:not([src])
-  opacity: 0
 
-#body-wrap
-  transition: all .3s
+.fireworks
+  z-index: 99999
 
 @media screen and (max-width: $bg)
   i#toggle-sidebar,
@@ -184,4 +188,185 @@ img[src=""],img:not([src])
     display: none
 
   body
-    padding-left: 0 !important
+    padding-left: 0 !important
+
+
+// 懶加載
+.lazyload,
+.lazyloading 
+	opacity: 0
+
+.lazyloaded 
+	opacity: 1
+	transition: opacity 0.3s
+
+img[src=""],img:not([src])
+  opacity: 0
+
+.justified-gallery
+  img 
+    opacity 0
+  .fancybox 
+    width: auto
+    text-align: inherit    
+  .img-alt
+    display: none
+
+.medium-zoom-image--opened
+  margin: 0 !important
+  z-index: 99999 !important
+
+.medium-zoom-overlay
+  z-index: 99999 !important
+
+// hexo tag video
+.video-container
+  position: relative
+  padding-top: 56.25%
+  height: 0
+  overflow: hidden
+  margin-bottom: 0.8rem
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    margin-top: 0
+
+
+.layout_page,
+.layout_post,
+#footer
+  animation: main 1s
+
+#nav,
+#top-container
+  animation: header 1s
+
+#site-title
+  animation: titlescale 1s
+
+canvas,
+#web_bg
+  animation: to_show 4s
+
+.card-announcement-animation
+  animation: announ_animation .8s linear infinite
+  color: #FF0000
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config("avatar_effect") == true
+  .avatar_img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+#rightside-config-hide
+  animation: rightside_in_animate .3s
+
+@keyframes scroll-down-effect
+  0%
+    opacity: 0.4
+    top: 0
+  50%
+    opacity: 1
+    top: -16px
+  100%
+    opacity: 0.4
+    top: 0
+    
+@keyframes header 
+  0% 
+    opacity: 0
+    transform: translateY(-50px)
+  100% 
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0% 
+    transform: translateY(-50px)
+  100% 
+    transform: translateY(0)
+
+@keyframes main
+  0% 
+    opacity: 0
+    transform: translateY(50px)
+  100% 
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(0.7)
+  100% 
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+  100% 
+    opacity: 0
+    transform: scale(0.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+ 
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,to
+    transform: scale(1)
+  50%
+    transform: scale(1.2)
+
+@keyframes rightside_in_animate
+  0%    
+    transform: translateX(28px)
+  100%
+    transform: translateX(0)
+
+@keyframes rightside_out_animate
+  0%    
+    transform: translateX(0)
+  100%
+    transform: translateX(28px)
+
+@keyframes right_to_left
+  0%    
+    transform: translateX(100px)
+  100%
+    transform: translateX(0)
+