我的hexo

好早以前就试过了 hexo，不过一直就是建完站就不管了，前几天写写文章出现问题：
title:
‘object Object’:null
然后我就重新来了一遍，顺便记录

建站

• github 创建 用户名.github.io 的仓库，添加本机 ssh 公钥

• 本地安装 node

• npm i -g hexo 安装 hexo

• hexo init 自定义根目录/ | mkdir 自定义根目录 && cd 自定义根目录 && hexo init

• 把之前的 source/_posts/目录内文件 copy 到相同路径

• 修改_config.yml：

  deploy:
      type: git
      repository: git@github.com:han1997/han1997.github.io.git
      branch: master

• hexo c && hexo g && hexo d

  报错：
      ERROR Deployer not found: git
  原因：
      npm install --save hexo-deployer-git

修改样式

_config.yml

site

• title 标签页显示的名字
• subtitle: 副标题
• description: 网站描述
• keywords:
• author: 作者
• language: 语言
• timezone: 网站时区

writing

• post_asset_folder: true 文章文件夹，放图片之类

Extensions

• theme: next

theme/next/_config.yml

menu 菜单

主题样式

scheme: Gemini

social 联系方式？

toc 文章结构显示

sidebar 侧栏设置

sidebar:

# Sidebar Position - 侧栏位置（只对 Pisces | Gemini 两种风格有效）

position: left //靠左放置
#position: right //靠右放置

# Sidebar Display - 侧栏显示时机（只对 Muse | Mist 两种风格有效）

#display: post //默认行为，在文章页面（拥有目录列表）时显示
display: always //在所有页面中都显示
#display: hide //在所有页面中都隐藏（可以手动展开）
#display: remove //完全移除

offset: 12 //文章间距（只对 Pisces | Gemini 两种风格有效）

b2t: false //返回顶部按钮（只对 Pisces | Gemini 两种风格有效）

scrollpercent: true //返回顶部按钮的百分比

Sidebar Avatar

avatar: /images/header.jpg
添加头像

###

功能

添加分类模块

1. 新建一个分类页面

   $ hexo new page categories

2. 你会发现你的 source 文件夹下有了 categorcies/index.md，打开 index.md 文件将 title 设置为 title: 分类,加上 type: “categories”

3. 打开 主题配置文件 找到 menu，将 categorcies 取消注释

4. 把文章归入分类只需在文章的顶部标题下方添加 categories 字段，即可自动创建分类名并加入对应的分类中

添加标签模块

1. 新建一个标签页面

   $ hexo new page tags

2. 你会发现你的 source 文件夹下有了 tags/index.md，打开 index.md 文件将 title 设置为 title: 标签，加上 type: “tags”

3. 打开 主题配置文件 找到 menu，将 tags 取消注释

4. 把文章添加标签只需在文章的顶部标题下方添加 tags 字段，即可自动创建标签名并归入对应的标签中

添加关于模块

1. 新建一个关于页面

   $ hexo new page about

2. 你会发现你的 source 文件夹下有了 about/index.md，打开 index.md 文件即可编辑关于你的信息，可以随便编辑。

3. 打开 主题配置文件 找到 menu，将 about 取消注释

搜索

1. 安装插件：

npm install hexo-generator-search --save

1. 修改站点配置文件_config.yml

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

1. 修改主题配置文件 theme/next/_config.yml

local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

添加阅读全文按钮

因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加

<!--more-->

其后面的部分就不会显示了，只能点击阅读全文才能看

修改文章内链接文本样式

打开文件 themes/next/source/css/_common/components/post/post.styl，在末尾添加

.post-body p a { color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; } }
其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

设置网站缩略图标

把 favicon.ico 放到站点目录的 source 目录下

设置 RSS

1. 先安装 hexo-generator-feed 插件

npm install hexo-generator-feed –save

1. 打开 站点配置文件 找到 Extensions 在下面添加

# RSS 订阅

feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '

1. 打开 主题配置文件 找到 rss，设置为

   rss: /atom.xml

添加评论系统

1. 进入友言官网注册、登录步骤我就不介绍了
2. 登录完成之后，点击获取代码，你会发现出来了一段代码，里面有你的 uid=1234567
3. 打开 主题配置文件 找到 youyan_uid 将值设置为上面的 uid 就可以了

添加站点访问计数

不蒜子[http://busuanzi.ibruce.info]

1. 安装脚本
   打开 themes/next/layout/_partial/footer.swig，将下面这段代码添加到里面

<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
  本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
  <span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
  有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>

添加的位置如下图，可自行根据个人喜好更换位置

1. 以上只是显示站点的访问次数，如果想显示每篇文章的访问次数，打开 themes/next/layout/_macro/post.swig，在第一行增加 is_pv 字段

`{% macro render(post, is_index, is_pv, post_extra_class) %}`

然后将这段代码插入到里面

{% if is_pv %}
<span class="post-meta-divider">|</span>`
<span id="busuanzi_value_page_pv">`
</span>次阅读 {% endif %}

插入的位置

然后再打开 themes/next/layout/post.swig，这个文件是文章的模板，给 render 方法传入参数（对应刚才添加的 is_pv 字段）
最后再打开 themes/next/layout/index.swig，这个文件是首页的模板，给 render 方法传入参数（对应刚才添加的 is_pv 字段）
OK！设置完毕。

去掉文章目录标题的自动编号

我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？
打开主题配置文件，找到将 number 改为 false 即可

添加 cdn 加速

vendors 下取消注释即可

网站动态元素延时加载

motion:
enable:false

我还打开了，不记得在哪里看到的了
背景有效果了
canvas_nest:
enable: true

增加文章置顶功能

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章中添加 top 值，数值越大文章越靠前，如

---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

使用

插入图片

少量图片
当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 markdown 语法访问它们。对于 source/images/image.jpg 这张图片可以用以下语法访问到
![](/images/image.jpg)

大量图片
修改_config.yml 配置文件 post_asset_folder 项为 true。
在 source/_post 文件夹里面就会出现一个“这是一个新的博客.md”的文件和一个“这是一个新的博客”的文件夹。
把需要的图片放到新创建的那个文件夹里面去。

``

设置文章字体的颜色、大小

如果想设置某一句的颜色或大小，只需用 html 语法写出来就行了

我可以设置这一句的颜色哈哈

我还可以设置这一句的大小嘻嘻

我甚至可以设置这一句的颜色和大小呵呵

设置文字居中

居中

借鉴原文[http://www.360doc.com/content/19/0418/20/22888630_829741117.shtml]
借鉴原文[https://blog.csdn.net/nightmare_dimple/article/details/86661505]