feat: preconnect 根據 CDN 配置引入

feat: 移除 anchor 的 button, 直接點擊標題跳轉
feat: 更改 headline 的 hover 效果
improvement: tabs content 裏最後一個元素 margin-bottom 改為 0
fix: float 浮動佈局導致評論寬度異常的 bug

README.md

@@ -12,9 +12,9 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://blog.crazywong.com/)
+📢 Demo: [Butterfly](https://butterfly.js.org/) || [CrazyWong](https://blog.crazywong.com/)
 
-Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
+📖 Docs: [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) || [Chinese](https://butterfly.js.org/posts/21cfbf15/)
 
 Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
 

README_CN.md

@@ -12,9 +12,9 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://blog.crazywong.com/)
+📢 預覽: [Butterfly](https://butterfly.js.org/) || [CrazyWong](https://blog.crazywong.com/)
 
-文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
+📖 文檔: [中文](https://butterfly.js.org/posts/21cfbf15/) || [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
 
 一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
 

_config.yml

@@ -125,11 +125,10 @@ index_post_content:
 
 # anchor
 anchor:
-  button:
+  # when you scroll, the URL will update according to header id.
-    enable: false
+  auto_update: false
-    always_show: false
+  # Click the headline to scroll and update the anchor
-    icon: # the unicode value of Font Awesome icon, such as '\3423'
+  click_to_scroll: false
-  auto_update: false # when you scroll in post, the URL will update according to header id.
 
 # figcaption (圖片描述文字)
 photofigcaption: false
@@ -933,58 +932,58 @@ CDN:
   custom_format:
 
   option:
-    # main_css:
+    # abcjs_basic_js:
-    # main:
+    # activate_power_mode:
-    # utils:
-    # translate:
-    # local_search:
     # algolia_js:
     # algolia_search:
-    # instantsearch:
-    # docsearch_js:
-    # docsearch_css:
-    # pjax:
-    # gitalk:
-    # gitalk_css:
-    # blueimp_md5:
-    # valine:
-    # disqusjs:
-    # disqusjs_css:
-    # twikoo:
-    # waline_js:
-    # waline_css:
-    # giscus:
-    # sharejs:
-    # sharejs_css:
-    # mathjax:
-    # katex:
-    # katex_copytex:
-    # mermaid:
-    # canvas_ribbon:
-    # canvas_fluttering_ribbon:
-    # canvas_nest:
-    # lazyload:
-    # instantpage:
-    # typed:
-    # pangu:
-    # fancybox_css:
-    # fancybox:
-    # medium_zoom:
-    # snackbar_css:
-    # snackbar:
-    # activate_power_mode:
-    # fireworks:
-    # click_heart:
-    # ClickShowText:
-    # fontawesome:
-    # egjs_infinitegrid:
     # aplayer_css:
     # aplayer_js:
+    # artalk_css:
+    # artalk_js:
+    # blueimp_md5:
+    # busuanzi:
+    # canvas_fluttering_ribbon:
+    # canvas_nest:
+    # canvas_ribbon:
+    # click_heart:
+    # ClickShowText:
+    # disqusjs:
+    # disqusjs_css:
+    # docsearch_css:
+    # docsearch_js:
+    # egjs_infinitegrid:
+    # fancybox:
+    # fancybox_css:
+    # fireworks:
+    # fontawesome:
+    # gitalk:
+    # gitalk_css:
+    # giscus:
+    # instantpage:
+    # instantsearch:
+    # katex:
+    # katex_copytex:
+    # lazyload:
+    # local_search:
+    # main:
+    # main_css:
+    # mathjax:
+    # medium_zoom:
+    # mermaid:
     # meting_js:
+    # pangu:
+    # prismjs_autoloader:
     # prismjs_js:
     # prismjs_lineNumber_js:
-    # prismjs_autoloader:
+    # pjax:
-    # artalk_js:
+    # sharejs:
-    # artalk_css:
+    # sharejs_css:
-    # busuanzi:
+    # snackbar:
-    # abcjs_basic_js:
+    # snackbar_css:
+    # translate:
+    # twikoo:
+    # typed:
+    # utils:
+    # valine:
+    # waline_css:
+    # waline_js:

layout/includes/head.pug

@@ -62,7 +62,6 @@ if theme.blog_title_font && theme.blog_title_font.font_link
 !=partial('includes/head/config', {}, {cache: true})
 
 include ./head/config_site.pug
-include ./head/noscript.pug
 
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 

layout/includes/head/noscript.pug

@@ -1,10 +0,0 @@
-noscript. 
-  <style type="text/css">
-    #nav {
-      opacity: 1
-    }
-    #recent-posts time,
-    #post-meta time {
-      display: inline !important
-    }
-  </style>

layout/includes/head/preconnect.pug

@@ -1,4 +1,20 @@
-link(rel="preconnect" href="//cdn.jsdelivr.net")
+-
+  const { internal_provider, third_party_provider, custom_format } = theme.CDN
+  const providers = {
+    'jsdelivr': '//cdn.jsdelivr.net',
+    'cdnjs': '//cdnjs.cloudflare.com',
+    'unpkg': '//unpkg.com',
+    'custom': custom_format.match(/^((https?:)?(\/\/[^/]+)|([^/]+))(\/|$)/)[1]
+  }
+-
+
+if internal_provider === third_party_provider && internal_provider !== 'local'
+  link(rel="preconnect" href=providers[internal_provider])
+else 
+  if internal_provider !== 'local'
+    link(rel="preconnect" href=providers[internal_provider])
+  if third_party_provider !== 'local'
+  link(rel="preconnect" href=providers[third_party_provider])
 
 if theme.google_analytics
   link(rel="preconnect" href="//www.google-analytics.com" crossorigin='')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.10.0-b1",
+  "version": "4.10.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_global/index.styl

@@ -49,6 +49,7 @@ body
 
   if !hexo-config('copy.enable')
     user-select: none
+    -webkit-user-select: none
 
 // scrollbar - chrome/safari
 *::-webkit-scrollbar

source/css/_highlight/highlight.styl

@@ -87,6 +87,7 @@ $code-block
 
     &.copy-true
       user-select: all
+      -webkit-user-select: all
 
       & > table,
       & > pre
@@ -128,6 +129,7 @@ $code-block
       font-weight: bold
       font-size: 1.15em
       user-select: none
+      -webkit-user-select: none
 
     .copy-notice
       position: absolute
@@ -146,6 +148,7 @@ $code-block
 
   .gutter
     user-select: none
+    -webkit-user-select: none
 
   .gist table
     width: auto

source/css/_highlight/prismjs/line-number.styl

@@ -27,6 +27,7 @@
         font-size: 100%
         pointer-events: none
         user-select: none
+        -webkit-user-select: none
 
         & > span
           display: block

source/css/_layout/aside.styl

@@ -230,9 +230,8 @@
       max-width: $toc-mobile-maxWidth
       max-height: calc(100% - 60px)
       width: $toc-mobile-width
-      transition: transform .3s
+      transition: none
       transform: scale(0)
-      transform-origin: right bottom
 
       &.open
         transform: scale(1)

source/css/_layout/comments.styl

@@ -2,6 +2,11 @@
   .comment-head
     margin-bottom: 20px
 
+    &:after
+      display: block
+      clear: both
+      content: ''
+
     .comment-headline
       display: inline-block
       vertical-align: middle

source/css/_layout/post.styl

@@ -1,13 +1,12 @@
 beautify()
   headStyle(fontsize)
-    padding-left: unit(fontsize + 12, 'px')
+    padding-left: unit(fontsize + 8, 'px')
 
     &:before
-      margin-left: unit((-(fontsize + 6)), 'px')
+      font-size: unit(fontsize - 2, 'px')
-      font-size: unit(fontsize, 'px')
 
     &:hover
-      padding-left: unit(fontsize + 18, 'px')
+      padding-left: unit(fontsize + 12, 'px')
 
   h1,
   h2,
@@ -22,6 +21,7 @@ beautify()
       top: calc(50% - 7px)
       color: $title-prefix-icon-color
       content: $title-prefix-icon
+      left: 0
       line-height: 1
       transition: all .2s ease-out
       @extend .fontawesomeIcon
@@ -106,35 +106,15 @@ beautify()
     font-family: Monaco, 'Ubuntu Mono', monospace
     line-height: 1em
 
-  if hexo-config('anchor.button.enable')
+  if hexo-config('anchor.click_to_scroll')
     a.headerlink
-      &:after
+      position: absolute
-        @extend .fontawesomeIcon
+      top: 0
-        float: right
+      right: 0
-        color: var(--headline-presudo)
+      left 0
-        content: $archor-button-icon
+      bottom: 0
-        font-size: .95em
+      width 100%
-        transition: all .3s
+      height: 100%
-
-      &:hover
-        &:after
-          color: var(--pseudo-hover)
-
-    if !hexo-config('anchor.button.always_show')
-      a.headerlink
-        &:after
-          opacity: 0
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6
-        &:hover
-          a.headerlink
-            &:after
-              opacity: 1
 
   ol,
   ul

source/css/_tags/tabs.styl

@@ -53,6 +53,9 @@
           display: block
           animation: tabshow .5s
 
+        > :last-child
+          margin-bottom: 0
+
     > .tab-to-top
       padding: 0 16px 10px 0
       width: 100%

source/css/var.styl

@@ -182,5 +182,3 @@ $tab-to-top-color = #99a9bf
 $tab-to-top-hover-color = $theme-color
 // Tag Plugins - timeline
 $timeline-default-color = $theme-color
-// archor
-$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'

source/js/main.js

@@ -593,8 +593,15 @@ document.addEventListener('DOMContentLoaded', function () {
       saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
-    'mobile-toc-button': () => { // Show mobile toc
+    'mobile-toc-button': item => { // Show mobile toc
-      document.getElementById('card-toc').classList.toggle('open')
+      const tocEle = document.getElementById('card-toc')
+      tocEle.style.transformOrigin = `right ${item.getBoundingClientRect().top + 17}px`
+      tocEle.style.transition = 'transform 0.3s ease-in-out'
+      tocEle.classList.toggle('open')
+      tocEle.addEventListener('transitionend', () => {
+        tocEle.style.transition = ''
+        tocEle.style.transformOrigin = ''
+      }, { once: true })
     },
     'chat-btn': () => { // Show chat
       window.chatBtnFn()