breaking change: 增加 macstyle 配置，取消配置 mac / mac light 主題

feat: 可更改文章標題位置 feat: 增加代碼全屏 improvement: 當代碼塊 toolbar 其它功能設為 false 時，仍能顯示 macstyle improvement: 優化文章標題在左邊時，不同寬度的位置顯示 improvement: 代碼優化
2026-04-08 12:07:06 +08:00 · 2024-04-29 13:35:18 +08:00
parent ae35499658
commit f74ede6d15
11 changed files with 189 additions and 113 deletions
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ npm i hexo-theme-butterfly
 - [x] Read Mode
 - [x] Conversion between Traditional and Simplified Chinese
 - [X] TOC catalog is available for both computers and mobile phones
- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean/mac/mac light), also support customization
+- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean), also support customization
 - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
 - [X] Disable copy/Add a Copyright Notice to the Copied Text
 - [X] Search (Algolia Search/Local Search)
--- a/README_CN.md
+++ b/README_CN.md
@@ -67,7 +67,7 @@ theme: butterfly
 - [x] 文章閲讀模式
 - [x] 簡體和繁體轉換
 - [X] 電腦和手機都可查看TOC目錄
- [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色
+- [X] 內置多種代碼配色（darker/pale night/light/ocean），可自定義代碼配色
 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
 - [X] 可關閉文字複製/可開啟內容複製增加版權信息）
 - [X] 兩種搜索（ Algolia 搜索和本地搜索）
--- a/_config.yml
+++ b/_config.yml
@@ -22,12 +22,16 @@ menu:
 # Code Blocks (代碼相關)
 # --------------------------------------

-highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
+highlight_theme: light # darker / pale night / light / ocean / false
+highlight_height_limit: false # unit: px
+code_word_wrap: false
+
+# highlight toolbar
+highlight_theme_macStyle: false # use mac style
 highlight_copy: true # copy button
 highlight_lang: true # show the code language
 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
-highlight_height_limit: false # unit: px
-code_word_wrap: false
+highlight_fullpage: true # true: add button to toggle full page

 # Social Settings (社交圖標設置)
 # formal:
@@ -108,6 +112,7 @@ post_meta:
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
+    position: left # left or center 文章頁標題位置
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -85,7 +85,9 @@
      plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs',
      highlightCopy: theme.highlight_copy,
      highlightLang: theme.highlight_lang,
-      highlightHeightLimit: theme.highlight_height_limit
+      highlightHeightLimit: theme.highlight_height_limit,
+      highlightFullpage: theme.highlight_fullpage,
+      highlightMacStyle: theme.highlight_theme_macStyle
    })
  }

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "4.14.0-b2",
+  "version": "4.14.0-b3",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/scripts/events/merge_config.js
+++ b/scripts/events/merge_config.js
@@ -7,9 +7,11 @@ hexo.extend.filter.register('before_generate', () => {
    },
    menu: null,
    highlight_theme: 'light',
+    highlight_theme_macStyle: false,
    highlight_copy: true,
    highlight_lang: true,
    highlight_shrink: false,
+    highlight_fullpage: true,
    highlight_height_limit: false,
    code_word_wrap: false,
    social: null,
@@ -51,6 +53,7 @@ hexo.extend.filter.register('before_generate', () => {
        label: true
      },
      post: {
+        position: 'left',
        date_type: 'both',
        date_format: 'date',
        categories: true,
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -1,4 +1,5 @@
 $highlight_theme = hexo-config('highlight_theme')
+$highlight_macstyle = hexo-config('highlight_theme_macStyle')
 wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')

@require 'theme'
@@ -95,36 +96,38 @@ $code-block
        opacity: 0

  .highlight-tools
-    position: relative
    display: flex
    align-items: center
-    overflow: hidden
+    padding: 0 8px
    min-height: 24px
    height: 2.15em
    background: var(--hltools-bg)
    color: var(--hltools-color)
    font-size: $code-font-size

+    & > *
+      margin: 0 3px
+
+    i
+      cursor: pointer
+      transition: all .3s
+
+      &:hover
+        color: $theme-color
+
    &.closed
      & ~ *
        display: none

      .expand
-        transition: all .3s
-        transform: rotate(-90deg) !important
+        transform: rotate(-90deg)

-    .expand
-      position: absolute
-      padding: .57em .7em
-      cursor: pointer
-      transition: transform .3s
-
-      & + .code-lang
-        left: 1.7em
+    if !$highlight_macstyle
+      & > .macStyle
+        margin: 0

    .code-lang
-      position: absolute
-      left: 14px
+      flex: 1
      text-transform: uppercase
      font-weight: bold
      font-size: 1.15em
@@ -132,19 +135,19 @@ $code-block
      -webkit-user-select: none

    .copy-notice
-      position: absolute
-      right: 2.4em
+      padding-right: 2px
      opacity: 0
      transition: opacity .4s

-    .copy-button
-      position: absolute
-      right: 14px
-      cursor: pointer
-      transition: color .2s
-
-      &:hover
-        color: $theme-color
+    if hexo-config('highlight_lang')
+      .code-lang
+        flex: 1
+    else if (!$highlight_macstyle && hexo-config('highlight_shrink') != 'none')
+      & > div:nth-child(2)
+        flex: 1
+    else
+      .macStyle
+        flex: 1

  .gutter
    user-select: none
@@ -156,7 +159,8 @@ $code-block
    td
      border: none

-  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
+if $highlight_macstyle
+  #article-container
    figure.highlight
      margin: 0 0 24px
      border-radius: 7px
@@ -164,33 +168,39 @@ $code-block
      -webkit-transform: translateZ(0)

      .highlight-tools
-        &:after
-          position: absolute
-          left: 14px
-          width: 12px
-          height: 12px
-          border-radius: 50%
-          background: #fc625d
-          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
-          content: ' '
+        padding: 0 10px

-        .expand
-          right: 0
+        .macStyle
+          display: flex
+
+          & > *
+            margin-right: 8px
+            width: 12px
+            height: 12px
+            border-radius: 50%
+
+          & > :last-child
+            margin-right: 5px
+
+          .mac-close
+            background: #fc625d
+
+          .mac-minimize
+            background: #fdbc40
+
+          .mac-maximize
+            background: #35cd4b
+
+        if hexo-config('highlight_shrink') != 'none'
+          & > div:nth-child(2)
+            order: 8

          &.closed
-            transition: all .3s
-            transform: rotate(90deg) !important
+            .expand
+              transform: rotate(90deg)

-          & ~ .copy-notice
-            right: 3.45em
-
-          & ~ .copy-button
-            right: 2.1em
-
-        .code-lang
-          left: 75px
-
-  if hexo-config('highlight_height_limit')
+if hexo-config('highlight_height_limit')
+  #article-container
    .code-expand-btn
      position: absolute
      bottom: 0
@@ -219,13 +229,51 @@ $code-block
        & ~ pre
          overflow: hidden
          height: unit(hexo-config('highlight_height_limit'), px)
+  
+  @keyframes code-expand-key
+    0%
+      opacity: .6

-@keyframes code-expand-key
-  0%
-    opacity: .6
+    50%
+      opacity: .1

-  50%
-    opacity: .1
+    100%
+      opacity: .6

-  100%
-    opacity: .6
+if hexo-config('highlight_fullpage')
+  #article-container
+    figure.highlight.code-fullpage
+      position: fixed
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      z-index: 9999
+      margin: 0
+      border-radius: 0
+      animation: code-fullpage .3s
+
+      .code-expand-btn,
+      .expand
+        display: none
+
+      .highlight-tools
+        & ~ pre,
+        & ~ table
+          display: block
+          overflow: auto
+          height: calc(100vh - 2.15em)
+          margin-bottom: 0
+
+  @keyframes code-fullpage
+    0%,
+    100%
+      transform: translateX(0)
+
+    20%,
+    60%
+      transform: translateX(-5px)
+
+    40%,
+    80%
+      transform: translateX(5px)
--- a/source/css/_highlight/prismjs/diff.styl
+++ b/source/css/_highlight/prismjs/diff.styl
@@ -1,4 +1,4 @@
-if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+if $highlight_theme == 'light'
  // prism-base16-ateliersulphurpool.light
  pre[class*='language-']
    .token.function
@@ -82,7 +82,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
      outline: .4em solid #c94922
      outline-offset: .4em

-if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+if $highlight_theme == 'darker'
  // prism-atom-dark
  pre[class*='language-']
    .token.comment,
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -1,4 +1,4 @@
-if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+if $highlight_theme == 'darker'
  $highlight-background = #212121
  $highlight-selection = #61616150
  $highlight-foreground = #EEFFFF
@@ -29,6 +29,7 @@ if $highlight_theme == 'pale night'
  $highlight-background = #292D3E
  $highlight-selection = #717CB450
  $highlight-foreground = #A6ACCD
+  $highlight-mac-border = rgba($highlight-background, .4)
  $highlight-gutter = {
    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
@@ -55,6 +56,7 @@ if $highlight_theme == 'ocean'
  $highlight-background = #0F111A
  $highlight-selection = #717CB450
  $highlight-foreground = #8F93A2
+  $highlight-mac-border = rgba($highlight-background, .4)
  $highlight-gutter = {
    color: alpha($highlight-foreground, .5),
    bg-color: $highlight-background
@@ -77,7 +79,7 @@ if $highlight_theme == 'ocean'
    $highlight-deletion = #BF42BF
    $highlight-addition = #105EDE

-if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+if $highlight_theme == 'light'
  $highlight-background = #F6F8FA
  $highlight-selection = #80CBC440
  $highlight-foreground = #90A4AE
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -99,13 +99,29 @@

  #post-info
    position: absolute
-    bottom: 30px
-    padding: 0 8%
    width: 100%

-    +maxWidth768()
-      bottom: 22px
-      padding: 0 22px
+    if hexo-config('post_meta.post.position') == 'center'
+      top: calc(50% + 30px)
+      padding: 0 8%
+      text-align: center
+      transform: translateY(-50%)
+
+      +maxWidth768()
+        padding: 0 15px
+    else
+      bottom: 30px
+
+      & > *
+        margin: 0 auto
+        padding: 0 15px
+        max-width: 1200px
+
+        @media screen and (min-width: 768px) and (max-width: 1300px)
+          padding: 0 30px
+
+        +minWidth2000()
+          max-width: 70%

  &.not-top-img
    margin-bottom: 10px
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -63,26 +63,27 @@ document.addEventListener('DOMContentLoaded', function () {
    const highLight = GLOBAL_CONFIG.highlight
    if (!highLight) return

-    const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight
+    const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight
    const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
-    const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined
+    const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle
    const $figureHighlight = plugin === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')

    if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return

    const isPrismjs = plugin === 'prismjs'
    const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
-    const highlightShrinkEle = isHighlightShrink !== undefined ? '<i class="fas fa-angle-down expand"></i>' : ''
+    const highlightShrinkEle = isHighlightShrink !== undefined ? '<div><i class="fas fa-angle-down expand"></i></div>' : ''
    const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
+    const highlightMacStyleEle = '<div class="macStyle"><div class="mac-close"></div><div class="mac-minimize"></div><div class="mac-maximize"></div></div>'
+    const highlightFullpageEle = highlightFullpage ? '<i class="fa-solid fa-up-right-and-down-left-from-center fullpage-button"></i>' : ''

    const alertInfo = (ele, text) => {
      if (GLOBAL_CONFIG.Snackbar !== undefined) {
        btf.snackbarShow(text)
      } else {
-        const prevEle = ele.previousElementSibling
-        prevEle.textContent = text
-        prevEle.style.opacity = 1
-        setTimeout(() => { prevEle.style.opacity = 0 }, 800)
+        ele.textContent = text
+        ele.style.opacity = 1
+        setTimeout(() => { ele.style.opacity = 0 }, 800)
      }
    }

@@ -96,16 +97,16 @@ document.addEventListener('DOMContentLoaded', function () {
    }

    // click events
-    const highlightCopyFn = ele => {
+    const highlightCopyFn = (ele, clickEle) => {
      const $buttonParent = ele.parentNode
      $buttonParent.classList.add('copy-true')
      const selection = window.getSelection()
      const range = document.createRange()
      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
-      range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
+      range.selectNodeContents($buttonParent.querySelector(`${preCodeSelector}`))
      selection.removeAllRanges()
      selection.addRange(range)
-      copy(ele.lastChild)
+      copy(clickEle.previousElementSibling)
      selection.removeAllRanges()
      $buttonParent.classList.remove('copy-true')
    }
@@ -114,23 +115,33 @@ document.addEventListener('DOMContentLoaded', function () {
      ele.classList.toggle('closed')
    }

+    const codeFullpage = (item, clickEle) => {
+      const wrapEle = item.closest('figure.highlight')
+      const isFullpage = wrapEle.classList.toggle('code-fullpage')
+
+      document.body.style.overflow = isFullpage ? 'hidden' : ''
+      clickEle.classList.toggle('fa-down-left-and-up-right-to-center', isFullpage)
+      clickEle.classList.toggle('fa-up-right-and-down-left-from-center', !isFullpage)
+    }
+
    const highlightToolsFn = function (e) {
      const $target = e.target.classList
      if ($target.contains('expand')) highlightShrinkFn(this)
-      else if ($target.contains('copy-button')) highlightCopyFn(this)
+      else if ($target.contains('copy-button')) highlightCopyFn(this, e.target)
+      else if ($target.contains('fullpage-button')) codeFullpage(this, e.target)
    }

    const expandCode = function () {
      this.classList.toggle('expand-done')
    }

-    const createEle = (lang, item, service) => {
+    const createEle = (lang, item) => {
      const fragment = document.createDocumentFragment()

      if (isShowTool) {
        const hlTools = document.createElement('div')
        hlTools.className = `highlight-tools ${highlightShrinkClass}`
-        hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
+        hlTools.innerHTML = highlightMacStyleEle + highlightShrinkEle + lang + highlightCopyEle + highlightFullpageEle
        btf.addEventListenerPjax(hlTools, 'click', highlightToolsFn)
        fragment.appendChild(hlTools)
      }
@@ -143,37 +154,26 @@ document.addEventListener('DOMContentLoaded', function () {
        fragment.appendChild(ele)
      }

-      if (service === 'hl') {
-        item.insertBefore(fragment, item.firstChild)
-      } else {
-        item.parentNode.insertBefore(fragment, item)
-      }
+      isPrismjs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
    }

-    if (isPrismjs) {
-      $figureHighlight.forEach(item => {
-        if (highlightLang) {
-          const langName = item.getAttribute('data-language') || 'Code'
-          const highlightLangEle = `<div class="code-lang">${langName}</div>`
-          btf.wrap(item, 'figure', { class: 'highlight' })
-          createEle(highlightLangEle, item)
-        } else {
-          btf.wrap(item, 'figure', { class: 'highlight' })
-          createEle('', item)
-        }
-      })
-    } else {
-      $figureHighlight.forEach(item => {
-        if (highlightLang) {
-          let langName = item.getAttribute('class').split(' ')[1]
-          if (langName === 'plain' || langName === undefined) langName = 'Code'
-          const highlightLangEle = `<div class="code-lang">${langName}</div>`
-          createEle(highlightLangEle, item, 'hl')
-        } else {
-          createEle('', item, 'hl')
-        }
-      })
-    }
+    $figureHighlight.forEach(item => {
+      let langName = ''
+      if (isPrismjs) btf.wrap(item, 'figure', { class: 'highlight' })
+
+      if (!highlightLang) {
+        createEle('', item)
+        return
+      }
+
+      if (isPrismjs) {
+        langName = item.getAttribute('data-language') || 'Code'
+      } else {
+        langName = item.getAttribute('class').split(' ')[1]
+        if (langName === 'plain' || langName === undefined) langName = 'Code'
+      }
+      createEle(`<div class="code-lang">${langName}</div>`, item)
+    })
  }

  /**