本部落格已搬遷, 3秒後跳轉...

先別管Hexo如何發文了，你聽過NexT嗎? | Laplace's Lab

先別管Hexo如何發文了，你聽過NexT嗎?

| |

2020/05/29更新。
部署完部落格別急著發文，先來找個喜歡的佈景主題。

Hexo如此熱門的框架，有許多第三方主題能套用，或者想打造一個自己的主題也行，而我選擇的是最熱門的經典主題──NexT。

安裝NexT主題

1
2
cd blog    # 移動至Blog根目錄下 
git clone https://github.com/theme-next/hexo-theme-next themes/next

設定主題


打開Blog根目錄下的root配置檔(_config.yml)，找到#Extensions區塊，將theme屬性設置為next

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Local Host測試

1
2
hexo clean        # 清除hexo cache
hexo s --debug    # 以debug模式啟動local host server

如果CLI沒有輸出錯誤訊息，應該會見到這段文字:

1
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

接著打開瀏覽器輸入localhost:4000便能在本機查看、測試Blog囉。

配置檔(_config.yml)

詳細Config設定請參考官方文件，僅紀錄個人設定部分

*官方文件:
1.Hexo docs
2.NexT docs

Root Config


檔案位址:~/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# Site
title:              # 網站標題
subtitle:           # 網站副標題
description:        # 網站描述
keywords:           # 網站關鍵字
author:             # 作者名稱
language:           # 網站語言
timezone:           # 時區

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://username.github.io/  # 網站首頁網址
root: /
permalink: :title/                # 文章永久連結，基於SEO考量不建議使用預設值(:year/:month/:day/:title/)
permalink_defaults:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:          # 代碼高亮
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5      # 每頁顯示文章數(預設值為10)
order_by: -date  # 排序

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://{username}:{password}@github.com/{username}/{username}.github.io.git
  branch: master

Root Config沒什麼複雜設定，不過在#site設定部分，我以為subtitle文字會顯示在author下方(紅框處)…結果顯示的文字是description，所以我說內個subtitle呢???

Theme Config


檔案位址:~/themes/next/_config.yml

1
2
3
# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
  enable: false    #啟用cache可改善網站載入速度

favicon


尺寸調整好後，修改為同樣的檔名直接取代掉就行(懶)
圖片位址:~/themes/next/source/images

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

↓SVG Editor

subtitle

index_with_subtitle改為true依然不見subtitle顯示於何處。

1
2
3
# If true, will add site-subtitle to index page, added in main hexo config.
#subtitle: Subtitle
index_with_subtitle: false

網站底部顯示起始年份、icon、版權宣告、框架＆主題版本等設定，Config註解相當詳細。

自定義footer文字
1
2
3
4
5
# Any custom text can be defined here.
  custom_text: >
    <span style="color:#3b5998;"><i class="fa fa-hand-o-right fa-lg"></i></span>&nbsp;All articles in this blog are 
    licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> 
    unless stating additionally.

creative commons

覺得有點礙眼所以將side bar跟文末的版權宣告拿掉，直接寫在footer。

1
2
3
4
5
6
7
8
9
10
11
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.fr, deed.de, etc.
creative_commons:
  license: by
  sidebar: false
  post: false
  language:

scheme settings

NexT主題目前有四種外觀模式可選擇，將偏好的模式取消註解即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

側邊欄依設定的Scheme不同，細部設定會有些微差異。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# Posts / Categories / Tags in sidebar.  #sidebar顯示統計(文章/分類/標籤)
site_state: true

# Social Links                           ＃社群連結設置
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/{username} || github
  Linkedin: https://www.linkedin.com/ || linkedin-square  #可自行增加項目
  Twitter: https://twitter.com/ || twitter
  E-Mail: mailto:{username}@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: true  #省略文字僅顯示社群icon
  transition: false

# Blog rolls        #友情連結設置
links_icon: link
links_title: Links
#links_layout: block
links_layout: inline
links:
  #Title1: http://example.com

# Sidebar Avatar  #頭像設置(方框或圓框/放大倍率/滑鼠游標碰觸旋轉XD)
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

# Table Of Contents in the Sidebar  ＃文章目錄顯示設置
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false    #false＝truncate
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front Matter.
  max_depth: 6

sidebar:
  # Sidebar Position, available values: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display, available values (only for Muse | Mist):    #sidebar顯示時機設置
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: true
  # Click any blank part of the page to close sidebar (only for Muse | Mist).
  dimmer: false

back2top:    #返回頂部按鈕設置
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

code highlight

代碼高亮問題讓我困擾了好一段時間，也就是部落格更改為ICARUS主題的時候(只設置了一週又換回NexT)，因此才開始追究代碼高亮無作用的原因。實測後我的結論是，在Hexo框架下使用內建的Tag Plugins來標記程式碼區塊，最能確保代碼高亮的顯示，縮進跟反引號(backtick)的用法都不是很可靠。另外，自動偵測語言也並非完全準確，建議程式區塊要註記language。

1
2
3
# Tag Plugins - code block語法
# <figure class="highlight plain"><figcaption><span>[title] [] [url] [link text]</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># your code here</span><br><span class="line"># </span><br></pre></td></tr></table></figure></p>
<h1 id="Code-Highlight-theme-代碼高亮主題設置"><a href="#Code-Highlight-theme-代碼高亮主題設置" class="headerlink" title="Code Highlight theme  #代碼高亮主題設置"></a>Code Highlight theme  #代碼高亮主題設置</h1><h1 id="Available-values-normal-night-night-eighties-night-blue-night-bright"><a href="#Available-values-normal-night-night-eighties-night-blue-night-bright" class="headerlink" title="Available values: normal | night | night eighties | night blue | night bright"></a>Available values: normal | night | night eighties | night blue | night bright</h1><h1 id="https-github-com-chriskempson-tomorrow-theme"><a href="#https-github-com-chriskempson-tomorrow-theme" class="headerlink" title="https://github.com/chriskempson/tomorrow-theme"></a><a href="https://github.com/chriskempson/tomorrow-theme">https://github.com/chriskempson/tomorrow-theme</a></h1><p>highlight_theme: night eighties<br>

mathjax

1
2
3
4
5
6
7
8
9
10
11
# Math Equations Render Support
math:
  enable: True

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front Matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

per_page預設值為true，也就是針對個別頁面啟用，不需要對所有頁面進行Latex語法渲染，加速頁面載入。
所以欲啟用Latex語法渲染的文章須在Front-matter加入：

1
mathjax: true

third party services

關於NexT所支援之第三方服務可參考官方文件說明

note

NexT config隨著版本演進，設定項目變得更多、更細，就不逐項列出了，只寫重點。

0%