LaplaceTW

Appearance

先別管Hexo如何發文了，你聽過NexT嗎?
📆2018-07-12 | 📂Blog

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

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

安裝NexT主題 ​

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

設定主題 ​

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

yaml
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Local Host測試 ​

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

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

shell
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

yaml
# 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

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

favicon ​

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

yaml
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顯示於何處。

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

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

自定義footer文字 ​
yaml
# 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。

yaml
# 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主題目前有四種外觀模式可選擇，將偏好的模式取消註解即可。

yaml
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

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

yaml
# ---------------------------------------------------------------
# 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。

yaml
# Tag Plugins - code block語法
# {% codeblock [title] [lang:language] [url] [link text] %}
# your code here
# ```

# Code Highlight theme  #代碼高亮主題設置
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

mathjax ​

yaml
# 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加入：

markdown
mathjax: true

third party services ​

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

note ​

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

Last updated:

hexo
<< 翻缸Day21:藍綠藻來襲
翻缸Day8:除藻生物 >>