• Table of Contents

基本設定

將主題內的配置檔 /themes/butterfly/_config.yml 複製到根目錄 /，並重新命名成 _config.butterfly.yml，這樣根目錄的配置檔案設定會覆蓋主題內的配置檔案設定，在升級主題時比較好升級。

• Butterfly 安裝文檔 (一) 快速開始
• Butterfly 安裝文檔 (二) 主題頁面
• Butterfly 安裝文檔 (三) 主題配置 - 1
• Butterfly 安裝文檔 (四) 主題配置 - 2
• Butterfly 安裝文檔 (五) 主題問答
• Butterfly 安裝文檔 (六) 進階教程
• Butterfly 安裝文檔 (七) 更新日誌

滾動條外觀

• /source/css/_global/index.styl

  // 滾動條
  *::-webkit-scrollbar
    width: 12px
    height: 12px
  
  // 滾動條背景
  *::-webkit-scrollbar-track
    background-color: transparent
  
  // 滾動條背景: 懸停
  ::-webkit-scrollbar-track:hover
  
  // 滾動條方塊
  *::-webkit-scrollbar-thumb
    background: var(--btn-bg)
    border-radius: 8px
  
  // 滾動條方塊: 懸停
  *::-webkit-scrollbar-thumb:hover
    background-color: var(--btn-hover-color)
  
  // 滾動條方塊: 點擊
  *::-webkit-scrollbar-thumb:active
  

深色模式顏色

• /source/css/_mode/darkmode.styl

  • 顏色取代

    1. #121212 -> #2F3437
    2. #2c2c2c -> #60666C

  • 個別調整

    [data-theme='dark']
      // 調整 1
      --card-bg: lighten(#2F3437, 5)
      // 調整 2
      --btn-bg: lighten(#2F3437, 10)
    
      #page-header:before
        // 調整 3
        background-color: darken(#2F3437, 2)
    
      #article-container
        figure.highlight
          box-shadow: none
          .highlight-tools
            // 調整 4
            background: lighten(#2F3437, 0) !important
    

閱讀模式顏色

• /source/css/_mode/readmode.styl

  • 個別調整

    if hexo-config('readmode')
      [data-theme='dark']
          .read-mode
            --readmode-light-color: darken(#2F3437, 2)
    

文章頁隱藏卡片

讓卡片經過判斷後產生

• /themes/butterfly/layout/includes/widget/index.pug

    <!-- 刪除 -->
    #aside_content.aside_content
  -   if theme.aside.card_author.enable
  -     !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
  -   if theme.aside.card_announcement.enable
  -     !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
      .sticky_layout
    <!-- 新增 -->
      else
  +    if theme.aside.card_author.enable
  +      !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
  +    if theme.aside.card_announcement.enable
  +      !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
        if theme.aside.card_recent_post.enable
          !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
  

Head 加入 robots