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

前言：

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

有下面几个原因:

因为建立于本地端，所以可以更方便离线进行编辑使用 Markdown 语法撰写Blog，更方便、通用、容易上手搭配线上CICD工具部署于 Github 上，完全零成本中文文件资源多支援多样不同样板，可随心所欲切换风格开源社群活跃基于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:        #时差# Headermenu:Home: /Archives: /archivesAbout: /about.htmlTags: /tagsCategories: /categories

路由设定：

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

资料档设定：

# Directorysource_dir: source #原始档案资料夹，这个资料夹用于存放您的内容 预设值 sourcepublic_dir: public #使用Hexo g 产生静态档案资料夹名称tag_dir: tags #标籤资料夹名称archive_dir: archives #彙整资料夹名称category_dir: categories #分类资料夹名称code_dir: downloads/codei18n_dir: :lang #语言资料夹名称skip_render:

文章设定

new_post_name: :title.md #新文章的档案名称default_layout: post #预设布局资料夹titlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:enable: trueline_number: trueauto_detect: falsetab_replace:

配置index2 generator

index2_generator:per_page: 10order_by: -dateinclude:    - 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 主题设定

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

发布资料设定

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: git #发布使用版控类别 使用gitrepo: https://github.com/isdaniel/isdaniel.github.io.git #发布到哪个Repositorybranch: master #发布使用的分支

社群资料设定：

# Social Accountsinstagram_url: https://www.instagram.com/dn_shih/github_url: https://github.com/isdanielemail_url: dog830228@gmail.com

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

或是也可以参考官网

Hexo推荐Theme [Next]

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

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

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

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

在Hexo使用Next

我们把上面的Next Theme clone一份下来.https://github.com/theme-next/hexo-theme-next.git在/themes/ 建立一个 next 资料夹并把Next Theme所有档案copy进去.修改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.