目录介绍

hexo安装完毕后目录如下

1
2
3
4
5
6
7
8
9
10

├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

• .deploy：执行hexo deploy命令部署到GitHub上的内容目录
• public：执行hexo generate命令，输出的静态网页内容目录
• scaffolds：layout模板文件目录，其中的md文件可以添加编辑
• scripts：扩展脚本目录，这里可以自定义一些javascript脚本
• source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
  _drafts：草稿文章
  _posts：发布文章
• themes：主题文件目录
• _config.yml：全局配置文件，大多数的设置都在这里
• package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。

Hexo图片路径问题

• 首先确认_config.yml 中有 post_asset_folder:true。
  Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder
  当您设置post_asset_folder为true参数后，在建立文件时，Hexo
  会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。

• 在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save（需要等待一段时间）。

• 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。结构如下：

  1 2 3 4 5

  本地图片测试 ├── apppicker.jpg ├── logo.jpg └── rules.jpg 本地图片测试.md

• 这样的目录结构（目录名和文章名一致），只要使用 ![logo](本地图片测试/logo.jpg) 就可以插入图片。其中[]里面不写文字则没有图片标题。
  生成的结构为:

  1 2 3 4 5

  public/2016/3/9/本地图片测试 ├── apppicker.jpg ├── index.html ├── logo.jpg └── rules.jpg

• 同时，生成的 html 是

<img src="/2016/3/9/本地图片测试/logo.jpg" alt="logo">

Hexo 导航菜单栏设置

在Hexo里，默认的导航菜单只有Home和Archives两项。

如何添加其他项？

打开主题里的配置文件：_config.yml

搜索menu

1
2
3
4

menu:
  Home: /
  Archives: /archives
  About: /about

名称：路径

这里名称About的访问路径为about

建立about目录，运行：

1

hexo n page "about"

会在source目录里生成一个对应的about目录，该目录下的index.md即为访问所指文件。

Hexo 添加RSS和Sitemap

1、使用npm安装插件

1
2

npm install hexo-generator-feed
nmp install hexo-generator-sitemap

2、在配置文件里引用插件

1
2
3

plugins:
  hexo-generator-sitemap
  hexo-generator-feed

此时sitemap也已经配置好了，重新生成后直接访问/sitemap.xml即可看到站点地图

3、在导航上添加rss链接

在themes 自己所用的主题目录下，打开_config.xml

rss: 部分修改为 rss: atom.xml

menu中添加 Rss: /atom.xml

Hexo-Light添加百度搜索

由于hexo默认的为google搜索，对于国内用户很不友好，所以我们改为百度。

修改目录themes/light/layout/_widget/search.js

1
2
3
4
5
6
7
8
9
10

<div class="search">
  <form action="//baidu.com/baidu" method="get" accept-charset="utf-8">
    <input type="search" name="word" results="0" placeholder="<%= __('search') %>">
    <input type="hidden" name="si" value="<%- config.url.replace(/^https?:\/\//, '') %>">
    <input name=tn type=hidden value="bds">
	<input name=cl type=hidden value="3">
	<input name=ct type=hidden value="2097152">
	<input name=s type=hidden value="on">
  </form>
</div>

Hexo添加加密功能

安装

在站点根目录中执行以下命令安装依赖：

1

npm install --save hexo-blog-encrypt

在站点配置文件中添加如下字段：

_config.ymlencrypt:

1
2
3

enable: true
default_abstract: 此文章已被加密，需要输入密码访问。  //首页文章列表中加密文章的默认描述文案
default_message: 请输入密码以阅读这篇私密文章。  //文章详情页的密码输入框上的默认描述文案

重启服务器，这个时候可能需要经历较长一段时间的加密过程，请耐心等待，加密完成后刷新页面将会显示密码输入框，输入密码后才能继续访问文章内容。

该功能只会加密文章正文，其他内容如打赏、版权信息、标签等则不会被加密隐藏，这样看起来有点奇怪，所以建议加密文章隐藏掉打赏和版权信息内容。

美化

密码输入错误时将会显示浏览器默认告警弹窗，可以使用 sweetalert 来美化错误提示：

其中 ‘-’ 代表去掉该行， ‘+’代表添加该行

在主题自定义布局文件中添加如下代码：

themes\next\layout_custom\custom.swig

1

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入

themes\next\layout_layout.swig

1
2
3
4
5
6
7
8

      ...
      {% include '_third-party/exturl.swig' %}
      {% include '_third-party/bookmark.swig' %}
      {% include '_third-party/copy-code.swig' %}

+     {% include '_custom/custom.swig' %}
    </body>
  </html>

在 node_modules 依赖库中修改 hexo-blog-encrypt 源码：

node_modules\hexo-blog-encrypt\lib\blog.encrypt.js

1
2
3
4
5
6
7
8
9
10
11
12
13

  ...
  } catch (e) {
-   alert(decryptionError);
+   swal({   
+     text: "憨批！密码错了!",
+     icon: "error",
+     className: "password-error",
+     timer: 1000,  
+     button: false
+   });
    console.log(e);
  }
  ...

即

1
2
3
4
5
6
7

swal({   
  text: "憨批!密码错了！",
  icon: "error",
  className: "password-error",
  timer: 1000,  
  button: false
});

在自定义样式文件中添加如下代码：

themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
8
9

//密码错误sweetalert弹框样式修改
.swal-overlay {
  background-color: transparent;
}

.password-error {
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
  border-radius: 4px;
}

由于是在 node_module 中修改的依赖文件，一旦更新或者重装依赖都会覆盖修改，需要重新修改一遍。

效果展示

报错

Unhandled rejection TypeError: Cannot read property ‘toString’ of null

结果：尝试卸载重装，尝试npm audit fix 但是都不行，百度也没有什么好的方法，暂时搁置。

添加分类及标签

1、创建“分类”选项

1.1 生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1

$ hexo new page categories

成功后会提示：

1

INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4

---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：

1
2
3
4
5

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

1.2 给文章添加“categories”属性

打开需要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

1
2
3
4
5
6

---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
---

至此，成功给文章添加分类，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

2、创建“标签”选项

2.1 生成“标签”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1

$ hexo new page tags

成功后会提示：

1

INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4

---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中，添加后是这样的：

1
2
3
4
5

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存并关闭文件。

2.2 给文章添加“tags”属性

打开需要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery - 表格
- 表单验证就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
10

---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

至此，成功给文章添加分类，点击首页的“标签”可以看到该标签下的所有文章。当然，只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现，这两个的设置几乎一模一样！是的，没错，思路都是一样的。所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

不蒜子统计功能

NexT主题集成了不蒜子统计功能,以下为我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

copy# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer: 次

当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。
当site_uv: true时，代表在页面底部显示站点的UV值。
当site_pv: true时，代表在页面底部显示站点的PV值。
当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。
site_uv_header和site_uv_footer这几个为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。

FROM :b0urne.top | Author:b0urne