基本設定

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

滾動條外觀

  • /source/css/_global/index.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 滾動條
    *::-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

    • 個別調整

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      [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

    • 個別調整

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

文章頁隱藏卡片

讓卡片經過判斷後產生

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
      <!-- 刪除 -->
      #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

當搜尋引擎爬蟲機器人進入我們網站後，我們可以在 head 中的 meta 設定 robots，告訴機器人這個頁面我是否想要在搜尋引擎上建立索引，還有我是否要傳遞權重給我網站頁面中的連結，例如：meta(name="robots" content="index,follow")。

需要注意的是，如果頁面設定是 noindex，也就是不希望機器人將這個頁面建立索引，在網站中的 sitemap.xml 中也不應該包含該頁面，因為這時爬蟲機器人被你叫來建立索引，結果你的頁面告訴他禁止建立索引，在後台報表會出現報錯，雖然對我們來說實際效果差不多，但 GoogleBot 不希望我們這樣做。

  • /themes/butterfly/layout/includes/head.pug

    1
    include ./head/robots.pug

  • /themes/butterfly/layout/includes/head/robots.pug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    if page.robots
        meta(name="robots" content=page.robots)
    else if is_home()
        if page.prev == 0
            meta(name="robots" content="index,follow")
        else
            meta(name="robots" content="noindex,follow")
    else if is_archive()
        meta(name="robots" content="noindex,follow")
    else if is_category()
        meta(name="robots" content="noindex,follow")
    else if is_tag()
        meta(name="robots" content="noindex,follow")
    else if is_post()
        meta(name="robots" content="index,nofollow")

Gitalk 留言板 ID

主題預設會使用網址的 MD5 碼當 Issues 的 ID，此處改回使用網址當 ID。

  • /themes/butterfly/layout/includes/third-party/comments/gitalk.pug

    1
    2
    3
    4
      <!-- 刪除 -->
    -         id: '!{md5(page.path)}',
      <!-- 新增 -->
    +         id: '!{page.path}',

調整文字大小

先調整主題配置檔案，字體放大後，有些佈局排版也會變化，跟著一起調整。

  • /_config.butterfly.yml

    1
    2
    3
    4
    5
    font:
      global-font-size: 18px
      code-font-size: 18px
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
      code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

  • /themes/butterfly/source/css/_page/homepage.styl

    1
    2
    3
    4
    // 調整首頁卡片高度
    #recent-posts
      & > .recent-post-item
        height: 15.5em

  • /themes/butterfly/source/css/_layout/aside.styl

    1
    2
    3
    4
    5
    6
    // 調整文章目錄字型大小
    #aside_content
      #card-toc
        .toc-content
          font-size: 14px

  • /themes/butterfly/source/css/_page/common.styl

    1
    2
    3
    4
    5
    6
    7
    // 調整文章內容邊界
    .layout
      & > div:first-child:not(.recent-posts)
        padding: 25px 40px

        +maxWidth768()
          padding: 0.9rem .7rem !important

  • /themes/butterfly/source/css/_layout/post.styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 調整段落間距
    #article-container
      p
        margin: 0 0 1.6rem

    beautify()
      ol,
      ul
        margin-bottom: 2rem

      ul
        > li:not(.tab)
          padding: 0 .2em 0 1.4em

    no-beautify()
      ol,
      ul
        margin-bottom: 2rem