基本設定

將主題內的配置檔 /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