建立自己Blog系列(三) Hexo next theme 介绍

前言：

为何我会选用Hxeo来当作Blog框架?

有下面几个原因:

1. 因为建立於本地端，所以可以更方便离线进行编辑
2. 使用 Markdown 语法撰写Blog，更方便、通用、容易上手
3. 搭配线上CICD工具部署於 Github 上，完全零成本
4. 中文文件资源多
5. 支援多样不同样板，可随心所欲切换风格
6. 开源社群活跃
7. 基於NodeJs拥有丰富的差件

建立自己的Hexo

安装 Node.js

首先先安装 Node.js 官网下载安装

安装完後使用CMD

　node -v
npm -v

查看是否安装成功.

安装 Hexo-cli

使用 npm 来安装 hexo (须先安装 Node.js)

npm install hexo-cli -g

因为我们之前就有建立一个Code Blog Repository.

我们使用CMD 的 CD 命令进入此资料夹目录中

在使用hexo cli帮助我们快速建立Blog相关档案

hexo init blog # 初始化 blog

npm install # 安装相关套件

如果要把Hexo deploy到Github上面，需要先安装

　npm install hexo-deployer-git --save

Hexo config.yml 设定说明

Hexo 是使用yml档案格式来当设定档.

hexo init blog # 初始化 blog

资料夹档案结构如下图：

当在Blog Code Repository 中建立完Hexo资料档後会有一个_config.yml档案,就是Hexo的设定档案.

解说 config.yml 设定档

预设页面：

title: 石头的coding之路   #网站标题
subtitle: 
description: 好点子没价值，有价值的是把好点子实现 #网站描述
keywords:
author: Daniel Shih #您的名字
language: zh-tw  #语系
timezone:        #时差

# Header
menu:
Home: /
Archives: /archives
About: /about.html
Tags: /tags
Categories: /categories

路由设定：

# URL
url: https://isdaniel.github.io/ #网站的网址
root: /  #网站的根目录
permalink: :year/:month/:day/:title/
permalink_defaults:

资料档设定：

# Directory
source_dir: source #原始档案资料夹，这个资料夹用於存放您的内容 预设值 source
public_dir: public #使用Hexo g 产生静态档案资料夹名称
tag_dir: tags #标签资料夹名称
archive_dir: archives #汇整资料夹名称
category_dir: categories #分类资料夹名称
code_dir: downloads/code
i18n_dir: :lang #语言资料夹名称
skip_render:

文章设定

new_post_name: :title.md #新文章的档案名称
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: false
tab_replace:

配置index2 generator

index2_generator:
per_page: 10
order_by: -date
include:
    - category Web 
exclude:
    - tag Hexo 

Hexo 时间格式

# Date / Time format
## 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 #时间格式	

Hexo 主题设定

# Extensions
theme: next #使用主题名称, 设为 false 表示关闭主题功能

发布资料设定

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git #发布使用版控类别 使用git
repo: https://github.com/isdaniel/isdaniel.github.io.git #发布到哪个Repository
branch: master #发布使用的分支

社群资料设定：

# Social Accounts
instagram_url: https://www.instagram.com/dn_shih/
github_url: https://github.com/isdaniel
email_url: [email protected]

设定档可以参考我的_config.yml档案

或是也可以参考官网

Hexo推荐Theme [Next]

Hexo有众多Theme可以选择，我们要切换使用的Theme只需要做几个步骤.

1. 在网路上寻到想要使用的Hexo Theme.
2. 把资料档放在/themes/资料夹目录下.

这次想要跟大家介绍我使用的Next Theme，我会使用原因如下

• 拥有众多开源者贡献
• 画面乾净又整洁

在Hexo使用Next

1. 我们把上面的Next Theme clone一份下来.https://github.com/theme-next/hexo-theme-next.git
2. 在/themes/ 建立一个 next 资料夹并把Next Theme所有档案copy进去.
3. 修改Hexo _config.yml档案，把theme改成next

Hexo推荐插件

下面是我推荐大家使用的Hexo插件，使用说明我就不一一跟大家解释了网路上很多分享文.

• theme-next-reading-progress 阅读进度.
• hexo-symbols-count-time 阅读次数
• hexo-generator-index2 页面分类
• hexo-related-popular-posts 热门文章
• hexo-addlink 在文章最末添加永久链接及版权声明

本次系列文章连结

• 建立自己Blog系列(一) 介绍 Github (hosting) + Hexo (Blog) + Appveyor(CICD)
• 建立自己Blog系列(二) github Setting
• 建立自己Blog系列(三) Hexo next theme 介绍
• 建立自己Blog系列(四) Appveyor 介绍 yaml.