Hello Hexo！NexT 主題太單調？跟著這些美化步驟為部落格加入個人風格！(5)

發表於 分類於 閱讀次數： 文章字數： 1.8k 所需閱讀時間 ≈ 8 分鐘

前言

cover

Hexo Next雖然已經將許多常見的設定整合到主題當中，但大家都採用一樣的設定的話其實挺無聊的，所以今天要在Hexo Next的基礎上帶大家來美化自己的部落格，為部落格加入個人風格，如果還不知道Hexo或者NexT是什麼可以參考我之前寫的Hello Hexo！系列文章。

大綱

功能

套用背景圖片

  1. 準備一張圖片放到themes/next/source/images/路徑中。
  2. 到themes/next/_config.yml中，找到custom_file_path，將style的註解取消掉。
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl
  1. 在source內新增_data資料夾(注意是blog的，不是next裡面的!)，接著在裡面新增一個styles.styl文件。
  2. 在styles.styl中加入:
1
2
3
4
5
6
7
body {
  background:url(/images/background.jpg);  // 背景圖片位置
  background-repeat: no-repeat;
  background-attachment: fixed;            // 是否滾動，fixed固定
  background-size: cover;                  // 填滿畫面
  background-position: center;
}

調整區塊透明度

套用背景圖片後，你可能會發現你的圖片大部分都被區塊擋住了!為了讓大家看到你美美的圖片，所以我們要來調整一下區跨的透明度，網路上很多調整透明度的方法都沒有用我試過了，最後在這篇文章中找到讓我滿意的效果，這邊直接講結論，在styles.styl加入:

1
2
3
4
:root {
  --content-bg-color:#ffffffe6;  // 白色半透明
  --content-bg-color:#000000e6;  // 黑色半透明，兩者擇一
}

補充: 上面的設定是直接將區塊換成指定顏色，如果有開啟深色模式可以用黑色半透明，如果沒有的話可以用白色半透明，但切記不要混者用，否則文字會看不清楚。

設置區塊圓角

  1. 到themes/next/_config.yml中，找到custom_file_path，將variable的註解也取消掉。
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl
  1. 在source內新增_data資料夾(注意是blog的，不是next裡面的!)，接著在裡面新增一個variables.styl文件。
  2. 在variables.styl中加入:
1
2
$border-radius-inner     = 30px 30px 30px 30px;  // (內角) 左上 右上 右下 左下
$border-radius           = 30px;                 // (外角) 只填一個數字表示4個角

文章區塊版面寬度

我們先來看一下預設的寬度(指的是網頁版，手機或平板都是用響應式網頁):

  • Muse / Mist
1
2
3
$content-desktop         = 700px   // when screen width < 1200px
$content-desktop-large   = 800px   // when screen width >= 1200px
$content-desktop-largest = 900px   // when screen width >= 1600px
  • Pisces / Gemini
1
2
3
$content-desktop         = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px')
$content-desktop-large   = 1160px
$content-desktop-largest = 73%

可以看到不同主題的寬度定義方式不太一樣，如果要更改的話，我們可以到variables.styl中把預設的寬度覆蓋掉，舉例來說我使用Gemini，下面是我採用的設定:

1
2
$content-desktop         = 90%  // 可以用百分比
$content-desktop-large   = 80%  // 也可用絕對數值 ex: 1000px

程式碼區塊主題

Hexo提供了highlight.js以及prism.js兩種程式碼區塊主題engine，可以參考NexT Highlight Theme Preview來做挑選，以下已我自己套用highlight.js中的night-owl主題為例。

  1. 到_config.yml中(不是next裡的)，找到highlight，將enable改成true。
1
2
3
4
5
6
7
8
9
10
11
12
highlight:
  enable: true
  line_number: true   # 是否顯示行數
  auto_detect: false  # 是否自動偵測語言(建議不要開，聽說很吃效能)
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false       # 如果是用prismjs的話那就是這裡改true，不要同時開兩個
  preprocess: true
  line_number: true
  tab_replace: ''
  1. 到themes/next/_config.yml中，找到codeblock，根據是否開啟深色模式來填入主題名稱。
1
2
3
4
5
6
7
8
9
10
codeblock:
  theme:                      # highlight.js 改這
    light: night-owl          # (範例)淺色模式下套用night-owl 
    dark: stackoverflow-dark
  prism:                      # prism.js 改這
    light: prism
    dark: prism-dark
  copy_button:
    enable: false             # 是否顯示複製按鈕
    style:                    # 風格(Available values: default | flat | mac)

變更文字樣式

這部分主要是分享我在網路上找到的，覺得很不錯的設定，以下修改都是加在source/_data/styles.styl中。

  1. 短網址樣式
1
2
3
4
5
code {
    color: #c7254e; //文字顏色
    background: #f9f2f4; //底色
    margin: 2px;
}
  1. 內文連結樣式
1
2
3
4
5
6
7
8
9
10
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
  1. 修改選中文字底色
1
2
3
4
5
6
7
8
9
10
/* webkit, opera, IE9 */
::selection { 
    background: #00c4b6;
    color: #f7f7f7; 
}
/* firefox */
::-moz-selection { 
    background: #00c4b6;
    color: #f7f7f7;    
}
  1. 修改頁腳配色
1
2
3
4
5
6
7
8
9
10
11
12
//頁腳統計文字顏色
.footer{
  color: #F0D784
}
//修改頁腳備案鏈接顏色
.footer a{
  color: #F0D784
}
//修改頁腳統計人數的顏色
.footer .with-love{
  color: #F0D784
}

變更字體類型

NexT可以直接使用Google Fonts提供的字體，但如果你使用的是繁體中文的話，你會發現其實也就只有兩種可以選而已XDDD，NexT預設是使用微軟正黑體，另外一種是唐宋思源體，我們今天就來試者把字體換成唐宋思源體看看吧!

  1. 到themes/next/_config.yml中，找到font將enable改成true，接著更改global的設定(後面的不用改)。
1
2
3
4
5
6
7
font:
  enable: true              # 設成true
  host: 
  global:
    external: true          # 設成true
    family: Noto Serif TC   # 唐宋思源體(TC: Traditional Chinese)
    size:                   # 字體大小，默認為1（16px）
  1. 這邊特別說明host部分，在台灣基本上是不用設，但因為預設的host是Google的api，所以大陸地區的用戶在看我們的網站時可能會遇到一些穩定性上的問題?如果你部落格的target是整個大中華地區的話可以另外設個host，這邊提供cdnjs的鏡像api給有需要的人:
1
host: https://fonts.loli.net

補充: 你可能會想問「如果我想要用的字體Google Fonts沒有提供怎麼辦?」，其實也是有辦法使用本地的字體喔，不過這部分稍微麻煩一丟丟，所以之後另外寫一篇文章介紹!

圖片放大檢視

NexT目前提供兩種片放大檢視的工具，分別是FancyBox以及Medium Zoom，可以看一下自己喜歡哪種。

到themes/next/_config.yml中找到fancybox/mediumzoom，將其改為true，注意不要同時開啟兩個功能!!!

1
2
fancybox: false
mediumzoom: false

補充: FancyBox的功能比較多且可以顯示註解，不過有issue表示FancyBox對於行動裝置似乎不是很友好? 不知道改了沒，Medium Zoom就跟Medium放大圖片的功能一樣，介面比較簡潔。

參考資料

文章內容大多是網路上的資料整理而來，再加上自己的採坑經驗，如果有遺漏來源的話再麻煩告知補上!