✨ feat: 在設置裏配置js/css(CDN_USE)時可以設定其他參數 closes #152

✨ feat: readmode下可以切換darkmode和lightmode
💄 fix: 高分辨率下的界面適配 closes #163
🐛 fix: 修復DarkMode下，note標簽的顯示bug

.github/ISSUE_TEMPLATE.md

@@ -1,8 +1,15 @@
 <!--
 IMPORTANT: Please follow the template to create a new issue.
 重要：請依照該模板來提交。
+
+If you upgrade from the old version, and an error occurs when running, please copy the new content in the config to the butterfly.yml
+如果你是由舊版本升級到新版，運行時出現報錯，請首先把config裏新的內容複製到舊的butterfly設置去
+
+If you are a problem when visit the website, please open your browser 'developer tools (shortcut F12)' and check the console if there is an error, include your website address in the feedback
+如果你是線上訪問出現問題，請檢查瀏覽器‘開發人員工具（快捷鍵F12）’的console是否有報錯，反饋時附上你的網站
 -->
 
+
 ## I want to create a new issue <!-- 我想要建立一個新的issue --> 
 
 <!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) -->

layout/includes/head.pug

@@ -59,8 +59,7 @@ script(src=url_for(theme.CDN.js_cookies))
 if theme.darkmode.enable
   !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
 
-each item in theme.CDN_USE.css
-  link(rel='stylesheet', href=url_for(item))
+!=fragment_cache('my_css', function(){return my_html('css',theme.CDN_USE.css)})
 
 if theme.fontawesome_v5 && theme.fontawesome_v5.enable
   link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))

layout/includes/layout.pug

@@ -41,10 +41,6 @@ html(lang=config.language data-theme=theme.display_mode)
 
     !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
 
-    each item in theme.CDN_USE.js
-      script(src=url_for(item))
-      
-    include ./additional-js.pug
-    
+    !=fragment_cache('my_js', function(){return my_html('js',theme.CDN_USE.js)})
 
-    
+    include ./additional-js.pug

scripts/helpers/my-html.js

@@ -0,0 +1,23 @@
+"use strict";
+
+hexo.extend.helper.register("my_html", function(type, data) {
+  var result = "";
+  var tag = type === "css" ? "css" : "script";
+  for (var i = 0; i < data.length; i++) {
+    var src = data[i].split("||")[0].trim();
+    var other = data[i].split("||")[1] ? data[i].split("||")[1].trim() : "";
+
+    if (tag === "css") {
+      result +=
+        '<link rel="stylesheet" href="' +
+        this.url_for(src) +
+        '" ' +
+        other +
+        ">";
+    } else {
+      result +=
+        '<script src="' + this.url_for(src) + '" ' + other + "></script>";
+    }
+  }
+  return result;
+});

source/css/_global/index.styl

@@ -243,11 +243,13 @@ img:not([src])
   font-size: 20px
 
 .post-ad
-  margin: 2rem 0 !important
+  margin: 2rem 0
+  overflow-x: scroll
 
 .ad_height
   display: block !important
   height: auto !important
+  overflow-x: scroll !important
 
 #content-inner,
 #footer
@@ -256,8 +258,6 @@ img:not([src])
 #nav
   animation: nav-effect 1s
 
-// #page-header
-// animation: header-effect 1s
 #site_title,
 #site_subtitle
   animation: titlescale 1s
@@ -292,13 +292,13 @@ if hexo-config('avatar.effect') == true
 
 .tocOpenMobile
   .sidebar-toc__title
-    animation: tocsidebarRtoL .5s
+    animation: tocsidebarRtoL .4s
 
   .sidebar-toc__progress
-    animation: tocsidebarRtoL .7s
+    animation: tocsidebarRtoL .6s
 
   .sidebar-toc__content
-    animation: tocsidebarRtoL .9s
+    animation: tocsidebarRtoL .7s
 
 @keyframes scroll-down-effect
   0%
@@ -322,18 +322,6 @@ if hexo-config('avatar.effect') == true
     opacity: 1
     transform: translateY(0)
 
-@keyframes header-effect
-  0%
-    opacity: 0
-
-  60%
-    opacity: 0
-    transform: translateY(-30px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
 @keyframes headerNoOpacity
   0%
     transform: translateY(-50px)

source/css/_layout/page.styl

@@ -130,7 +130,7 @@
         display: -webkit-box
         overflow: hidden
         margin-top: .3rem
-        height: 85px
+        // height: 85px
         word-break: break-word
         -webkit-line-clamp: 3
         -webkit-box-orient: vertical
@@ -379,4 +379,10 @@
 @media screen and (max-width: 900px)
   .layout_page
     & > div:first-child:not(.recent-posts)
-      width: 100% !important
+      width: 100% !important
+
+//ie10-ios11使用
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
+  .recent-post-info
+    .content
+      height: 90px

source/css/_layout/post.styl

@@ -337,4 +337,15 @@ img
     padding: 1rem 5px
 
     & > #post
-      padding: 1.8rem .7rem
+      padding: 1.8rem .7rem
+
+// adjust the layout width in big screen
+@media screen and (min-width: $lr)
+  .layout_post
+    max-width: 1300px
+
+  .layout_page
+    max-width: 1500px
+
+    &.hide-aside
+      max-width: 1300px

source/css/_mode/readmode.styl

@@ -42,7 +42,6 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
 
         .note
           border: 2px solid #eee
-          border-left-color: transparent
           background-color: transparent
 
       #mobile-sidebar-menus,
@@ -76,7 +75,6 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
 
         .note
           border: 2px solid rgba(255, 255, 255, .6)
-          border-left-color: transparent
           filter: none
           background-color: transparent
           color: rgba(255, 255, 255, .6)
@@ -114,10 +112,6 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
     .highlight
       display: block !important
 
-    #rightside
-      #darkmode
-        display: none
-
     & > canvas
       display: none !important
 

source/css/var.styl

@@ -39,6 +39,7 @@ $rem = 20px
 $text-line-height = 2
 $sm = 768px
 $bg = 1024px
+$lr = 2000px
 $web-bg = convert(hexo-config('background'))
 $index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
 $index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%