Hexo引擎及Next主题

Hexo初始化博客框架windows/mac

Hexo安装和搭建依赖Nodejs和Git,可自行下载，下面的命令都是在上述环境OK的情况下进行的

windows下，可以新建文件夹，然后右键运行git bash,运行各种命令。

git bash下运行如下命令：

1.安装Hexo

安装命令：
npm install -g hexo-cli

macos下要以管理员权限执行：
sudo npm install -g hexo-cli

更新命令（hexo 3.4.3出现文章目录书签链接问题，更新3.4.4即可解决bug）：
npm update hexo
如果提示文件夹写入权限不足，则：
sudo npm update hexo

卸载：
macos下要以管理员权限执行：
sudo npm uninstall hexo-cli -g
    
如果卡死，则这样安装：
npm install -g hexo-cli --no-optional
 
macos下要以管理员权限执行：
sudo npm install -g hexo-cli --no-optional

注意：

将Windows平台下的hexo文件直接全部拷贝到macOS下使用，可能会报下面这个错误：
Cannot find module './build/Release/DTraceProviderBindings

此时只需要在另外一个文件键执行
hexo init 
npm install
然后将这个新文件夹中的node_modules文件夹复制并替换掉原来Windows平台下的node_modules文件夹即可。

然后又报错：
ERROR Deployer not found: git
执行这个命令即可：
sudo npm install hexo-deployer-git --save

20171207更
本人懒得再配置_config.yml以及主题相关配置文件，所以macOS下git,node.js,hexo-cli安装完后直接将Windows平台下的hexo整个文件夹复制到macOS下，执行时报模块找不到错误，虽然不影响正常执行结果的产生，但是看着不爽。经测试，替换node_modules可以解决报错问题。(2017-12-07)

20180825更：

安装Node.js v8.11.4后一并带的npm v5.6.0，此时直接执行sudo npm install -g hexo-cli后安装完成后并没有报任何错，直接执行hexo g -d也完全正常，下面是安装完成后的日志：（2018-08-25）

  This package has installed:
      •    Node.js v8.11.4 to /usr/local/bin/node
      •    npm v5.6.0 to /usr/local/bin/npm
  Make sure that /usr/local/bin is in your $PATH.

   sudo npm install -g hexo-cli
  [fsevents] Success: "/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
  Pass --update-binary to reinstall or --build-from-source to recompile
  + hexo-cli@1.1.0

2.初始化框架

$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install

初始化完成后的目录结构

├── _config.yml //网站的 配置 信息，您可以在此配置大部分的参数。
├── package.json
├── scaffolds     //模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source     //资源文件夹是存放用户资源的地方。
|   ├── _drafts
|   └── _posts
└── themes     //主题 文件夹。Hexo 会根据主题来生成静态页面。

3.新建文章（默认在/source/_post里添加hello-world.md文件）

$ hexo new "Hello World"

4.生成网站静态代码(将/source的.md文件生成到/public中，形成网站的静态文件)

$ hexo generate

5.启动服务器

$ hexo server -p 3000

$hexo s --debug   可用于预览

6.部署网站

$ hexo deploy

7.配置你所要部署的站点

部署网站之前需要生成静态文件，即可以用$ hexo generate -d直接生成并部署。此时需要在根目录下的_config.yml中配置你所要部署的站点：

## Docs: http://hexo.io/docs/deployment.html
 deploy:
   type:  git
   repo:  git@github.com:Repos.git
   branch:  master

注意:配置repo等的时候，要留两个空格，不然可能不起作用

hexo其它命令

创建目录
hexo new page "about"

创建文章
$ hexo new "Hello World"

使用Next主题

1.获取next主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2.启用next主题(修改根目录下的_config.yml中的theme属性)

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

3.验证是否启用

$ hexo s --debug

4.关于Next主题更多参考Next官网

http://theme-next.iissnan.com/

文章分类categories和tags设置

1.创建分类文件夹
下面两行命令会在source目录下创建名为categories和tags的文件夹

$ hexo new page "categories"
$ hexo new page "tags"

2.配置文件开启

在themes\next\_config.yml搜索menu,将categories和tags前对应的#号注释去掉即可

3.md文件头标明分类

使用$ hexo new "文件名"创建文章后，打开对应的文件，在题头添加分类和标签，例如：
---
title: 文章名
date: 2016-11-19 22:20:53
categories: "分组名"
tags: 标签名

---

文章侧栏开关

themes\next\_config.yml下搜索sidebar，display改选为hide即可。

重装操作系统后，需要安装node js和Hexo

重新安装操作系统后，操作以下两步即可再次使用原有hexo文件：

安装nodejs
下载node js for windows并安装
dos下输入node -v查看nodejs版本
安装hexo
$ npm install -g hexo-cli

更改tags标签默认字体颜色

找到hexo\themes\next\source\css\_custom\custom.styl
添加如下内容：

// Custom styles.
.tag-cloud-tags a {
    color: black !important;
    //font-weight: bold
    font-size: medium
}

搜索功能

暂时选择启用local search:

安装

  $ npm install hexo-generator-searchdb --save

配置

根目录配置文件中添加

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

开启
主题配置文件中搜索local search,将false改为true
```
  # Local search
  local_search:
      enable: true
```

修改导航栏高度

找到对用css配置文件并修改为3px(原来为25px 0 20px)

  themes\next\source\css\_schemes\Mist\)header.styl
  .header-inner
  padding:3px 0 3px

修改页面宽度

hexo下next主题修改页面宽度
Pisces Scheme 直接在thems/next/source/css/_variables/custom.styl文件中添加：
```
  $main-desktop                   = 1350px
  $content-desktop                = 1100px
  
```
改进（20180106）：
```
  $main-desktop                   = 95%
  $content-desktop                = calc(100% - 252px)
  
```
https://github.com/iissnan/hexo-theme-next/issues/759#issuecomment-202242848
http://theme-next.iissnan.com/faqs.html

引入评论功能

更新next主题到v6
注册leancloud.cn
https://leancloud.cn/dashboard/login.html#/signin
进入控制台后点击左下角创建应用复制appid和appkey到next主题配置文件_config.yml下对应位置

配置文件中开启

  valine:
    enable: true
    appid:  irtttvMVkwwwwwxYtsavbj0-gzGeeeesz # your leancloud application appid
    appkey:  swsshwwwwgjANceeeeeKl # your leancloud application appkey
    notify: false # mail notifier , https://github.com/xCss/Valine/wiki
    verify: false # Verification code
    placeholder: 嗨，欢迎你在这里留言~  # comment box placeholder
    avatar: wavatar # gravatar style
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: false

参考链接
https://valine.js.org/quickstart.html
https://www.jianshu.com/p/6bc6a8977c36

去除powered by valine

文件位置

  /hexo/themes/next-v6/layout/_third-party/comments/valine.swig

在new Valine方法下添加代码：

  new Valine({
      ......
  });
  
  //去除powered by valine
  var infoEle = document.querySelector('#comments .info');
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
     infoEle.childNodes.forEach(function(item) {
         item.parentNode.removeChild(item);
     });
  }

当有新评论时邮件通知博主

部署Valine-Admin添加邮件通知功能
https://github.com/zhaojun1998/Valine-Admin
配置如下：

新建文章时，在相同目录下创建同名文件夹（便于图片管理）

本地图片文件引用以及发布到github后显示

  需要安装hexo-asset-image插件：
  sudo npm install https://github.com/CodeFalling/hexo-asset-image --save
  插件安装完后，新建文章时，在相同目录下创建同名文件夹。
  hexo clean后，再重新hexo g -d发布，即可显示引用图片。

新建文章时，在相同目录下创建同名文件夹（便于图片管理）

  打开站点配置文件_config.yml，搜索post_asset_folder字段，设置其值为true
  安装hexo-asset-image：npm install hexo-asset-image --save
  此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
  只需在 md 文件里使用 ![title](图片名.jpg) ，无需路径名就可以插入图片。

参考文章：

https://blog.csdn.net/weixin_39345384/article/details/80785373