hexo个人博客搭建（theme next）

Hexo NexT

以前使用docsify管理文档，如果个人使用，功能基本满足要求，但docify的显示theme不能令我满意。
最近发现了Hexo搭建博客的介绍，并且相关开发人员比较活跃，决定尝试一下。
开始阅读hexo的文档有些迷糊，后来看过其它文章，才渐渐明白hexo的使用，与相关主题的使用密不可分，可能用到最后，都是自己开发适合自己的theme……
我选择了一个比较喜欢的主题maupassant,试用后，感觉作者的活跃度不够，很多地方不是很理想，最后还是使用用户比较多的NexT主题。

文档项目创建

初始化hexo目录

主要步骤Hexo 首页上列出：

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

Hexo init生成的目录文件说明参考Hexo doc 建站

添加git管理

考虑到备份，修改等需要，将hexo文档目录添加git管理

git init

网上有几种git管理theme的方式：

• 直接从github下载主题zip，添加到自己的git服务器中
• 使用外部配置，替换theme中的默认_config.yml,参考：Hexo-Theme-NexT主题自定义设置：论theme_config与next.yml方法的差异及取舍，这个时候theme的源码可以试用git submodule管理：

git submodule add https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

• 使用npm添加（hexo 5.0版本以上）,例如NexT的添加:

npm install hexo-theme-next
# _config.yml
# theme: next

添加 NexT theme

从 https://hexo.io/themes/查找主题next，获取github路径：

The upstream repository of theme NexT has been changed.
2014-2017   https://github.com/iissnan/hexo-theme-next
2018-2019   https://github.com/theme-next/hexo-theme-next
2020    https://github.com/next-theme/hexo-theme-next
In order to get the latest update, please backup files of the legacy theme NexT, and execute the following command

            
                git clone https://github.com/next-theme/hexo-theme-next themes/next
            
        
For Hexo 5.0 or later
            
                npm install hexo-theme-next
            
        
Documentation

下载最后发布版本源码zip，解压缩到themes/next目录

参考：Hexo-Theme-NexT主题自定义设置：论theme_config与next.yml方法的差异及取舍

几种使用theme的方式，最后还是采用源码方式（有时可能需要直接修改源码比较方便）

修改NexT主题配置

NexT doc Made by IIssNan

Hexo的配置修改，包括_config.yml中的站点配置，还有_config.next.yml中的主题配置

站点配置

diff --git a/_config.yml b/_config.yml
index 98bf35f..0b7181e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,17 +3,17 @@
 ## Source: https://github.com/hexojs/hexo/

 # Site
-title: Hexo
-subtitle: ''
+title: iticd
+subtitle: '一年又一年…… 知而不行，是为不知；行而不知，可以致知'
 description: ''
 keywords:
-author: John Doe
-language: en
-timezone: ''
+author: iticd
+language: zh-CN
+timezone: 'Asia/Shanghai'

 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://yoursite.com
+url: http://iticd.github.io
 root: /
 permalink: :year/:month/:day/:title/
 permalink_defaults:
@@ -28,7 +28,7 @@ tag_dir: tags
 archive_dir: archives
 category_dir: categories
 code_dir: downloads/code
-i18n_dir: :lang
+i18n_dir: :languages
 skip_render:

 # Writing
@@ -52,7 +52,7 @@ highlight:
   wrap: true
   hljs: false
 prismjs:
-  enable: false
+  enable: true
   preprocess: true
   line_number: true
   tab_replace: ''

主题配置

添加「标签」页面

添加「分类」页面

代码块

通过预览NexT Highlight Theme Preview，选择代码高亮样式：

站点配置修改：

highlight:
  enable: false
  ...
prismjs:
  enable: true
  ...

主题配置修改：

codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
  ...
  prism:
    light: prism-tomorrow
    dark: prism-tomorrow
  ...

字体

Hexo Next 主题字体相关配置

Fonts-Customization

修改字体，字号：

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

在source/_data/variables.styl中配置字体属性，避免修改next源码：

// Title Font, set it to font family you want.
$font-family-headings = Georgia, sans

// Set it to font family you want.
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// Code Font.
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// Font size of articles.
$font-size-base = 14px

// Font size of table and code.
$table-font-size = 12px

Next 能加载用户自定义的样式，同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是，自定义样式使用的变量里的定义（source/_data/variables.styl），不能覆盖变量默认定义的值（hexo-next-theme/source/css/_variables/）。但是你可以在默认定义里注释掉变量后，在自定义变量里重新定义并赋值。

写博客

修改文档模板

根据需要，修改Hexo目录下生成的文档模板，scaffolds/draft.md，scaffolds/post.md

---
title: {{ title }}
date: {{date}}
update: {{date}}
tags:
categories:
---

添加文章

添加博客文章，执行：

hexo new  post