feat: preconnect 根據 CDN 配置引入

feat: 移除 anchor 的 button, 直接點擊標題跳轉 feat: 更改 headline 的 hover 效果 improvement: tabs content 裏最後一個元素 margin-bottom 改為 0 fix: float 浮動佈局導致評論寬度異常的 bug
2026-04-08 12:07:06 +08:00 · 2023-09-23 02:00:02 +08:00
parent deccde649b
commit f9a2ad70ce
16 changed files with 109 additions and 108 deletions
--- a/README.md
+++ b/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.

--- a/README_CN.md
+++ b/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)修改的主題

--- a/_config.yml
+++ b/_config.yml
@@ -125,11 +125,10 @@ index_post_content:

 # anchor
 anchor:
-  button:
-    enable: false
-    always_show: false
-    icon: # the unicode value of Font Awesome icon, such as '\3423'
-  auto_update: false # when you scroll in post, the URL will update according to header id.
+  # when you scroll, the URL will update according to header id.
+  auto_update: false
+  # Click the headline to scroll and update the anchor
+  click_to_scroll: false

 # figcaption (圖片描述文字)
 photofigcaption: false
@@ -933,58 +932,58 @@ CDN:
  custom_format:

  option:
-    # main_css:
-    # main:
-    # utils:
-    # translate:
-    # local_search:
+    # abcjs_basic_js:
+    # activate_power_mode:
    # 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:
-    # artalk_js:
-    # artalk_css:
-    # busuanzi:
-    # abcjs_basic_js:
+    # pjax:
+    # sharejs:
+    # sharejs_css:
+    # snackbar:
+    # snackbar_css:
+    # translate:
+    # twikoo:
+    # typed:
+    # utils:
+    # valine:
+    # waline_css:
+    # waline_js:
--- a/layout/includes/head.pug
+++ b/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()})

--- a/layout/includes/head/noscript.pug
+++ b/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>
--- a/layout/includes/head/preconnect.pug
+++ b/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='')
--- a/package.json
+++ b/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": {
--- a/source/css/_global/index.styl
+++ b/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
--- a/source/css/_highlight/highlight.styl
+++ b/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
--- a/source/css/_highlight/prismjs/line-number.styl
+++ b/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
--- a/source/css/_layout/aside.styl
+++ b/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)
--- a/source/css/_layout/comments.styl
+++ b/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
--- a/source/css/_layout/post.styl
+++ b/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, 'px')
+      font-size: unit(fontsize - 2, '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
-        @extend .fontawesomeIcon
-        float: right
-        color: var(--headline-presudo)
-        content: $archor-button-icon
-        font-size: .95em
-        transition: all .3s
-
-      &: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
+      position: absolute
+      top: 0
+      right: 0
+      left 0
+      bottom: 0
+      width 100%
+      height: 100%

  ol,
  ul
--- a/source/css/_tags/tabs.styl
+++ b/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%
--- a/source/css/var.styl
+++ b/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'
--- a/source/js/main.js
+++ b/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
-      document.getElementById('card-toc').classList.toggle('open')
+    'mobile-toc-button': item => { // Show mobile toc
+      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()