Hexo 實戰（二）：Hexo 基本設定和使用

Hexo 站點配置檔案

官方關于配置的文檔：https://hexo.io/zh-cn/docs/configuration

網站的配置資訊在檔案 _config.yml 中，完整的初始配置資訊（除了修改 Deployment）如下：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 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: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/kungge/kungge.github.io.git
  branch: master
           

主要分成如下：

• Site：網站
• URL：網址
• Directory：目錄
• Writing：文章寫作
• Category & Tag：分類和标簽
• Date / Time format：日期 / 時間格式
• Pagination：分頁
• Include / Exclude file(s)：包括或不包括目錄和檔案
• Extensions：擴充

網站資訊配置

# Site
title: 坤哥部落格小站
subtitle: 熱愛生活,熱愛技術,聽聽故事
description: 生活是一門藝術,更是一門技術
keywords: 坤哥部落格小站,坤哥部落格網,坤哥部落格技術網
author: wankun
language: zh-CN
timezone: Asia/Shanghai
           

渲染效果：

寫作

上一篇文章講過通過指令 hexo new [layout] <title> 可以建立一篇文章，layout 表示布局，Hexo 有三種預設布局：post、page 和 draft，不指定布局則會使用預設布局，預設布局配置使用 default_layout: post 設定，不同的布局會存儲在不同的目錄中，前面使用指令 hexo new "Hello by hexo newcommand" 新增檔案【Hello-by-hexo-new-command.md】存儲在目錄【source/_posts】中，如果是 draft 則是【source/_drafts】，page 則是【source】。

【Hello-by-hexo-new-command.md】檔案内容為空，但是有“頭”資訊：

---
title: Hello by hexo new command
date: 2020-03-29 01:09:05
tags:
---
           

渲染效果：

這裡的“頭”資訊叫 Front-matter，是檔案最上方以 --- 分隔的區域，用于指定個别檔案的變量，以下是預先定義的參數

參數	描述	預設值
layout	布局	不指定則使用預設_config.yml中配置的
title	标題	文章的檔案名
date	建立日期	檔案建立日期
updated	更新日期	檔案更新日期
comments	開啟文章的評論功能	true
tags	标簽（不适用于分頁）
categories	分類（不适用于分頁）
permalink	覆寫文章網址
keywords	僅用于 meta 标簽和 Open Graph 的關鍵詞（不推薦使用）

修改該檔案内容如下：

---
title: Hello by hexo new command
date: 2020-03-29 01:09:05
updated: 2020-03-31 23:10:05
tags: 
- 标簽1
- 标簽2
- 标簽3
categories: 
- 類别1
- [類别2, 類别2-1]
- [類别2, 類别2-2]
- [類别3]
---

這裡是文章内容。。。
           

注：在hexo中類别有父子之分，[類别2, 類别2-1] 表示 類别2-1 是 類别2 的子類别。

标簽和類别也可以使用 [],如：

tags: [hexo,Hexo 基本設定]
categories:  開源部落格
           

生成靜态檔案時，發現不光生成了檔案本身，還生成了類别和标簽頁面：

渲染結果：

進入類别頁面：

檔案名稱使用 new_post_name: :title.md # File name of new posts 來配置，預設使用 :title.md 表示使用文章标題名來命名，可使用加入時間資訊來命名友善文章管理：

變量	描述
:title	标題（小寫，空格将會被替換為短杠）
:year	建立的年份，比如， 2015
:month	建立的月份（有前導零），比如， 04
:i_month	建立的月份（無前導零），比如， 4
:day	建立的日期（有前導零），比如， 07
:i_day	建立的日期（無前導零），比如， 7

文章位址

站點配置檔案，預設：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
           

渲染效果：

這樣的位址對seo不太友好。

修改如下：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: p/:id/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
           

每篇文章 ---xx--- 中指定一個 Id 唯一值，如 id: nas-network，渲染效果：

常見問題

網站中文亂碼

為什麼會出現亂碼？

先檢視網站用的主題，在 # Extensions 一欄，使用指令 npm install hexo-generator-searchdb --save 安裝：

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

用的主題是 landscape，然後再主題的目錄下找到語言配置檔案：

那麼在 # Site 一欄中語言配置 language: 也要在使用的主題語言配置中。

如上中文應使用 zh-CN，設定 language: zh-CN。

如果還不行，那可能是配置檔案【_config.yml】本身的編碼格式，另存為 UTF-8 格式：

.yml 可讀性差

在華為雲的 windows 伺服器上用記事本打開成這樣：

可讀性太差。

而在本機的 windows 打開卻是正常的：

在華為雲的 windows 伺服器上記事本也設定了自動換行，這是怎麼回事？

不做深究，強烈建議使用第三方編輯器編寫即可，如 vs code、sublime等。

網站全空白

檢視頁面元素，發現都在：

說明是樣式的問題，檢視日志：

檢視使用主題的 font-asesome.min.css 檔案，發現确實不存在，剛才誤删了：

恢複就好了。