iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

30 天利用 Hexo 打造技術部落格系列 第 7

Day 7:設定你的 Hexo 佈景主題:Next(下)

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

網站 Favicon

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

產生 Favicon

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

設定 Hexo Favicon

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

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 找到以下這段語法:

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 找到以下這段語法:

# 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 來看看部落格被進度條整個蓋住的效果哦(笑)

語法區塊樣式

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

預設語法區塊樣式

找到以下這段語法:

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 的各位也不用太過於慌張,每天進步一點點,或許沒什麼感覺,但回頭來看真的累積了很多啊!

本篇文章同步發布於我的部落格 Gui Blog


上一篇
Day 6:設定你的 Hexo 佈景主題:Next(上)
下一篇
Day 8:先別急著撰寫文章,你聽過 Markdown 嗎?
系列文
30 天利用 Hexo 打造技術部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言