Day 7：設定你的 Hexo 佈景主題：Next（下）

由於篇幅太長，所以拆分成上下篇啦！經過昨天的一些設定，相信大家已經慢慢上手了。接著今天也要接續昨天沒有介紹到的設定。一起加油設定起來！！

網站 Favicon

Favicon 就是在瀏覽器標題旁邊的小 Icon，Next 預設有提供一個 N 字樣的 Favicon，但身為一個可以識別自己網站的地方，當然是不要放過啦！

產生 Favicon

至於 Favicon 的產生方式除了自行製作之外，網路上也有許多 Favicon 製作與產生器，可以嘗試看看哦～

設定 Hexo Favicon

當 Favicon 製作好後就要設定到 Hexo 啦，首先一樣到 next 目錄下的 _config.yml，找到以下這段語法：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

換成自己的圖示網址，或是放置到 ./themes/next/source/images 目錄內，在指定檔案名稱即可。（或是直接覆蓋原先檔案）

回到頂部按鈕

在 ./themes/next/_config.yml 找到以下這段語法：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false
  • 將 sidebar 設定為 true：設定在側邊欄的個人資訊區塊中，Social Links 下，顯示回到頂部按鈕。
  • 將 scrollpercent 設定為 true：回到頂部按鈕旁加上閱讀進度百分比。

回到頂部按鈕

閱讀進度條

上一段剛好有介紹到閱讀進度數值，而這一段則是可以在讀者滑動的過程中，頂部或是底部有個進度條，隨著你的閱讀進度進行滑動。

在 ./themes/next/_config.yml 找到以下這段語法：

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px
  • enable：設定是否開啟進度條，開啟則設定 true
  • position：設定進度條在頂部還是底部顯示
  • color：進度條背景顏色
  • height：進度條高度

閱讀進度條

我設定個高度 10px 在底部顯示讓大家看比較清楚，目前閱讀進度 62%，進度條的寬度就會在可視範圍內寬度 62% 位置處。

大家也可以把高度設定為 100vh 來看看部落格被進度條整個蓋住的效果哦（笑）

語法區塊樣式

我們可以看到預設範例文章就有語法區塊的範例，但是我想改變呈現的樣式，該怎麼做呢？

預設語法區塊樣式

找到以下這段語法：

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

highlight_theme 是整體區塊主題、copy_button 則是設定複製語法的按鈕位置與樣式。一樣，每個都嘗試套用看看，找到一個你滿意的語法區塊樣式吧！

留言區塊、GA 設定、…… 還有其它

Next 留了非常多區塊讓我們可以直接將留言的功能或是 GA 代碼貼到指定的地方就可以直接運行，不過這些部分又牽涉到第三方服務，我們就留待之後再說明，請大家敬請期待 XD

後記

坦白說為了寫這兩篇文章，讓我對 Next 有了更全面的認識啊！就像主選單使用絕對路徑是我突發奇想想說可不可以這樣，然後就成功了！結果寫到社群鏈結部分時，才發現似乎是相同概念的東西，社群鏈結都可以使用絕對路徑了，主選單當然也可以啊 XD

想想開始使用 Hexo 至今也差不多七個多月的時間，現在回頭來看這些收穫跟視野又不同了，所以剛開始用 Hexo 的各位也不用太過於慌張，每天進步一點點，或許沒什麼感覺，但回頭來看真的累積了很多啊！

本篇文章同步發布於 iT 邦幫忙