基于Hexo和NexT的博客搭建

前言

主要记录一些要注意的点，因为网上教程版本众多，所以尽量以最新的官方文档为准；我的博客主要用来记录学习，搭的风格比较简练。

博客地址

官方文档地址

Hexo官网

NexT中文文档

NexT英文文档

版本

• Node.js v12.16.3

• hexo: 4.2.1

• NexT: v8.0.0-rc.2

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

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
layout	布局
title	标题	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址
keywords	仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

搭建要点

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

其实主要就是修改这两个文件，有的会需要结合修改部分的描述安装你需要的功能插件。

菜单栏

设置分类和标签

hexo new page categories
hexo new page tags

分别在Front-matter中设置

type: "categories"
type: "tags"

6款插件

前5款在站点根目录下安装，后1款在主题根目录下安装

相对路径插入图片

npm install https://github.com/CodeFalling/hexo-asset-image --save

修改 站点配置文件

post_asset_folder: true

注意点：打开站点根目录下/node_modules/hexo-asset-image/index.js，将内容更换为下面的代码

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

生成RSS

npm install --save hexo-generator-feed

修改主题配置文件

social:
  RSS: /atom.xml || fa fa-rss

文章pinned

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

需要pinned的文章在 Front-matter 中加上 top 即可，数值越大表示等级越高，越靠前显示

显示效果需要修改themes\hexo-theme-next\layout_macro\post.njk，在

（我这里是第18行）下插入

{% if post.top %}
    
{% endif %}

搜索插件

npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件，启用本地搜索功能：

# Local search
local_search:
  enable: true

部署插件

npm install hexo-deployer-git --save

编辑 站点配置文件

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 你的gitee或github库
  branch: master

页面加载进度条

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改主题配置文件

pace:
 enable: true

其它的一些功能

大部分修改下主题配置文件就行了

下面是修改的部分

 这个是突出页脚红心的
   # Icon between year and copyright info.
   icon:
     # Icon name in Font Awesome. See: https://fontawesome.com/icons
-    name: fa fa-heart
+    name: fa fa-heartbeat
     # If you want to animate the icon, set it to true.
-    animated: false
+    animated: true
     # Change the color of icon, using Hex Code.
     color: "#ff0000"
 
这个是侧栏显示许可证
 # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
 creative_commons:
   license: by-nc-sa
-  sidebar: false
+  sidebar: true
   post: false
   language:
 
这个是主题风格修改
 # Schemes
-scheme: Muse
+#scheme: Muse
 #scheme: Mist
 #scheme: Pisces
-#scheme: Gemini
+scheme: Gemini
 
这个是菜单栏修改
 menu:
-  #home: / || fa fa-home
+  home: / || fa fa-home
   #about: /about/ || fa fa-user
-  #tags: /tags/ || fa fa-tags
-  #categories: /categories/ || fa fa-th
-  #archives: /archives/ || fa fa-archive
+  tags: /tags/ || fa fa-tags
+  categories: /categories/ || fa fa-th
+  archives: /archives/ || fa fa-archive
   #schedule: /schedule/ || fa fa-calendar
   #sitemap: /sitemap.xml || fa fa-sitemap
   #commonweal: /404/ || fa fa-heartbeat

这个是头像设置
 # Sidebar Avatar
 avatar:
   # Replace the default image and set the url here.
-  url: #/images/avatar.gif
+  url: /images/王也.jpg
   # If true, the avatar will be dispalyed in circle.
   rounded: false
   # If true, the avatar will be rotated with the cursor.

这个是侧栏社交链接和图标设置
 social:
-  #GitHub: https://github.com/yourname || fab fa-github
-  #E-Mail: mailto:[email protected] || fa fa-envelope
+  Gitee: https://gitee.com/zystrivego/blog || fab fa-github
+  E-Mail: mailto:[email protected] || fa fa-envelope
+  Music: http://music.163.com/m/user/home?id=15370305 || fa fa-music
+  Douban: https://www.douban.com/people/74346817/ || fa fa-photo-video
+  RSS: /atom.xml || fa fa-rss

这个是代码块复制按钮设置
   # Add copy button on codeblock
   copy_button:
-    enable: false
+    enable: true

这个是滚动百分比设置
   # Scroll percent label in b2t button.
-  scrollpercent: false
+  scrollpercent: true
 
 # Reading progress bar
 reading_progress:
@@ -472,7 +475,7 @@
 baidu_site_verification:
 
 百度推送，搜索引擎优化
 # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
-baidu_push: false
+baidu_push: true
 
 
这个是评论系统，适合国内使用
 # Valine
 # For more information: https://valine.js.org, https://github.com/xCss/Valine
 valine:
-  enable: false
-  appId: # Your leancloud application appid
-  appKey: # Your leancloud application appkey
+  enable: true
+  appId: xxxxxx
+  appKey: xxxxxxx
-  placeholder: Just go go # Comment box placeholder
+  placeholder: 无需注册，支持Markdown格式 # Comment box placeholder


搜索引擎优化
 # Google Analytics
 google_analytics:
-  tracking_id: # 
+  tracking_id: UA-166280277-1

搜索引擎优化
 # Baidu Analytics
-baidu_analytics: # 
+baidu_analytics: xxxxxx

一些小知识点

如何设置「阅读全文」

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供2种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

1. 在文章中使用

手动进行截断，Hexo 提供的方式 推荐

2. 在文章的 front-matter 中添加 description，并提供文章摘录

建议使用 第一种方式，除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

渲染跳过

比如404，readme文件

相关文件可以去这里找

修改站点配置文件

skip_render:
  - README.md
  - 404.html

开源协议怎么选

Creative Commons Licenses

Choose an open source license

小图标在哪找

themes\hexo-theme-next\source\lib\font-awesome\css\all.min.css

官方文档摘录

不要处理我的文章

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

$ hexo publish [layout]