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 邦幫忙