注意，本文适用于hexo 3.x 版本，与2.x略有出入！
多说评论已经于2017年6月关闭，文中关于多说的内容可以忽略

GitHub Pages 本用于介绍托管在 GitHub 的项目，也可以用来搭建博客，有300M免费空间。

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。作者是来自台湾的tommy351。
优势：

生成静态页面快
支持 Markdown
兼容于 Windows, Mac & Linux
部署方便。日常使用仅需五个命令。
高扩展性、自订性，文件少、小，易理解

配置SSH

使用hexo博客必须配置SSH。

打开git bash，输入cd ~/.ssh，如果果提示：No such file or directory 说明未配置SSH。

本地生成密钥对
ssh-keygen -t rsa -C "你的邮件地址"，注意命令中的大小写不要搞混。按提示指定保存文件夹，不设置密码。
添加公钥到Github

根据上一步的提示，找到公钥文件（默认为id_rsa.pub），用记事本打开，全选并复制。
登录Github，右上角头像 -> Settings —> SSH keys —> Add SSH key。把公钥粘贴到key中，填好title并点击 Add key。
git bash中输入命令ssh -T git@github.com，选yes，等待片刻可看到成功提示。

修改本地的ssh remote url，不用https协议，改用git协议

Github仓库中获取ssh协议相应的url
本地仓库执行命令git remote set-url origin SSH对应的url，配置完后可用git remote -v查看结果

这样git push或hexo d时不再需要输入账号密码。

搭建博客

注，以下命令行需要在Git终端中执行(右键单击 -> Git bash)。

安装Git：下载安装后，注册Github账号并配置Git和SSH公私钥
安装Node.js
安装hexo：npm install -g hexo，可用hexo -v查看版本。这里我用的是3.1.1。也可以指定版本：npm install hexo@3.1.1 -g
创建hexo文件夹：新建放置博客的文件夹，进入并执行命令hexo init。hexo 会在目标文件夹建立网站所需要的所有文件。
安装依赖包：npm install
创建Github Repository：Repository名字必须是你的Github名.github.io，比如我是loveNight.github.io
部署：打开博客根目录下的_config.yml文件，末尾添加如下信息。

deploy:
  type: git
  repository: 上一步的Github仓库地址，项目主页点SSH再复制URL
  branch: master

然后执行命令：

hexo generate # 生成静态页面，可以简化为hexo g
hexo deploy # 部署到Github，可以简化为hexo d

浏览器访问loveNight.github.io就能看到自己的Blog了，一般延迟十分钟左右才能看到效果。一开始看到404页面不要惊慌，耐心等等。

手打党请注意，配置文件的冒号后必须有一个空格。

如果报错

Deployer not found:git

运行命令

npm install hexo-deployer-git --save

hexo使用

生成静态页面

1	hexo generate

本地启动

1	hexo server

浏览器输入localhost:4000就可以看到效果。当你修改了文章或配置文件时，保存文件再刷新浏览器就能看到修改后的效果，非常方便。

新建文章

hexo new post "title"  # 生成新文章：\source\_posts\title.md，可省略post

新建页面

hexo new page "title"

post、page等可以改成其他layout，可用layout在scaffolds目录下查看。在同目录下创建文件来添加自己的layout，也可以编辑现有的layout，比如post的layout默认是\scaffolds\post.md。

编辑文章

打开新建的文章\source\_posts\postName.md：

title: HelloWorld！ # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2015-11-09 15:56:26 # 文章生成时间，一般不改
categories:   # 文章分类目录，参数可省略
    - 随笔
    - 瞬间
tags:   # 文章标签，参数可省略
    - hexo
    - blog # 个数不限，单个可直接跟在tags后面
---
这里开始使用markdown格式输入你的正文。

多级分类语法格式：（标签也可以用类似的写法）

# 第一种
categories:
  - 一级分类
  - 二级分类
  - etc...

# 第二种：
categories: [一级分类, 二级分类]

首页文章预览添加图片：

photos:
  - http://xxx.com/photo1.jpg
  - http://xxx.com/photo2.jpg

正文中可以使用设置文章摘要如下:

以上显示在摘要中
<!--more-->
以下是余下全文

more 以上内容即是文章摘要，如果设置了主页只显示摘要，则more以下内容点击 Read More 链接打开全文才显示。

简单命令

hexo现在支持更加简单的命令格式了，比如：

hexo g == hexo generate # 生成
hexo d == hexo deploy # 部署 # 可与hexo g合并为 hexo d -g
hexo s == hexo server # 本地预览
hexo n == hexo new # 写文章

插入图片

博客中的图片文件可以直接放在source文件夹下，部署时上传到Github仓库中。但是Github项目容量有限，而且主机在国外，访问速度较慢，把图片放在国内的图床上是个更好的选择。我用的是七牛云存储

免费用户实名审核之后，可以获取10GB永久免费存储空间、每月10GB下载流量、每月10万次Put请求、每月100万次Get请求，做图床绰绰有余。

注册账号，新建空间，我的新空间名是blog，专门用来放置博客上引用的资源。

进入空间后点击「内容管理」，再点击「上传」：

七牛空间没有文件夹的概念，但是允许为文件添加带斜杠/的前缀，用来给资源分类。这里我设置前缀为img/Hexo 3.1.1 静态博客搭建指南/。上传了一张图片：

在右侧可以找到外链，复制地址：

Markdown 插入图片的语法为：

![](图片网址)

上传图片 -> 获取外链 -> 写入Markdown，就这么简单！

由于七牛防盗链的白名单无法添加localhost，暂时不设置防盗链，否则hexo s调试的时候，看不到图片。

以上操作每插入一张图片就要做一次，相当繁琐，于是写了个脚本简化，详见我的这篇文章《拖曳文件上传到七牛的Python脚本》

配置博客

全站配置

注意：文件中配置项的冒号后面必须加空格，否则报错

下面有些选项要配置后文的插件才有效，文件中已注明。

整站的配置：博客根目录下的\_config.yml文件。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 岁月如歌 # 站点名
subtitle: 莫厌追欢笑语频，寻思离乱好伤神。闲来屈指从头数，得见清平有几人 # 副标题
description: 自古求真皆寂寞，唯挑心灯伴夜霭
author: loveNight # 作者，在站点左下角可以看到
avatar: /images/avatar.jpg # 头像。Next主题增加的字段
language: zh-Hans # 语言。Next主题增加的字段
timezone:
since: 2015 # 博客建立年份，Next主题增加的字段

# 多说 ShortName
duoshuo_shortname: # xxx.duoshuo.com，xxx即是shortname。

# Social links
social:
  Github: https://github.com/loveNight
  Weibo: http://weibo.com/p/1005051069913250
  Email: mailto:286242151@qq.com
  # zhihu: http://www.zhihu.com/people/your-user-name

# title, chinese available
links_title: 友情链接
# links
links:
  我的CSDN博客: http://blog.csdn.net/kinglearnjava
  我的新浪博客: http://blog.sina.com.cn/u/1069913250


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://lovenight.github.io/ # 网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang  # 国际化文件夹
skip_render:   # 跳过指定文件的渲染

# Writing # 文章布局、写作格式的定义
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0   # 1 为小写， 2 为大写
render_drafts: false  # 显示草稿
post_asset_folder: false  # 启动asset文件夹
relative_link: false # 链接改为与根目录的相对地址
future: true  # 显示未来的文章
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination # 每页显示文章数
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions # 这里配置站点所用主题和插件
## Plugins: http://hexo.io/plugins/
plugins:
baidusitemap: # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml

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

feed:
  type: atom       #feed 类型 (atom/rss2)
  path: atom.xml   #rss 路径
  limit: 0        #在 rss 中最多生成的文章数(0显示所有)

# 自定义站点内容搜索
# 需要先安装插件：
# npm install hexo-generator-search --save
search:
  path: search.xml
  field: all  # 如只想索引文章，可设置为post


# Deployment # 站点部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:loveNight/loveNight.github.io.git
  branch: master


# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save

index_generator:
  per_page: 10 ##首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20 ##归档页面默认20篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10 ##标签分类页面默认10篇文章

category_generator:
  per_page: 10 ###分类页面默认10篇文章

更换主题

默认主题太丑，换成NexT主题。

安装：在博客根目录下执行git clone https://github.com/iissnan/hexo-theme-next.git themes/next。
启用：修改博客根目录下的_config.yml配置文件中的theme属性，将其设置为next。
更新：在themes/next目录下执行git pull。（暂时不需要）
\themes\next\_config.yml修改主题配置。

我的_config.yml文件：

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "loveNight, Android, Python, 神锋"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss:

# Specify the date when the site was setup
#since: 2015


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  Android: /Android
  Python: /Python
  API: /API
  Notes: /Notes
  Links: /Links
  About: /About

  #commonweal: /404.html


# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat




# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Mist




# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Sidebar, available value:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically
#  - hide    expand only when click on the sidebar toggle icon.
#  - remove  Totally remove sidebar including sidebar toggle icon.
sidebar: always
# sidebar: post
#sidebar: hide
#sidebar: remove


# Social links
# social:
  #GitHub:
  #Others:

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo


# Sidebar Avatar
#avatar:


# Social links
# social:
  #GitHub:
  #Others:


# TOC in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true


# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:




# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image:


# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night blue

# `阅读全文` 按钮跳转之后是否自动滚动页面到设置 `<!-- more -->` 的地方。
scroll_to_more: true

# 是否为侧边栏文章的目录自动添加索引，默认开启。设置为 `false` 关闭。
toc_list_number: true

# Automatically Excerpt
auto_excerpt:
  enable: false
  length: 150

# Use Lato font
use_font_lato: true



# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support # 数学公式，要使用就设置为True
mathjax:


# Swiftype Search API Key
swiftype_key:

# Baidu Analytics ID
#baidu_analytics:


# 多说热评文章 true 或者 false
# duoshuo_hotartical: true

# Disqus
#disqus_shortname:

# Share
jiathis: true

# Share
# duoshuo_share: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:


# Google Analytics
#google_analytics:


# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: ROOT


# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true









#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.4.5.2

附 Google Analysis

个性化设置

先按照NexT 使用文档设置一下，其中的内容下面不再赘述。

sitemap 插件

谷歌与百度的站点地图，前者适用于其他搜索引擎，用来手动提交以增加收录

安装：

npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-baidu-sitemap@0.1.1 --save

_config.yml添加代码：

baidusitemap:
  path: baidusitemap.xml

谷歌的sitemap.xml不需要写到配置文件中，自动生效。

在主页后面加/baidusitemap.xml可以看到baidusitemap（谷歌同理），将该网址它提交给百度搜索：百度站长平台，贴吧账号无法在这里使用。

不过由于Github禁止了百度爬虫，百度无法抓取其中的URL：

试了各种解决方案都没有成功，除非把博客托管到其他平台上。

添加新 Page

用如下命令添加新page

hexo new page "Android"
hexo new page "Python"
hexo new page "API"

然后在主题配置文件\themes\next\_config.yml添加：

menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags
  Android: /Android  # 加在这里
  Python: /Python
  API: /API

打开\themes\next\languages\zh-Hans.yml，这是简体中文的配置文件，如果你的博客用的是其他语言，请打开对应的文件。

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  android: Android
  python: Python
  api: API

注意这里第一列必须全为小写，否则效果是这样的：

设置完后效果如下：

自动弹出侧栏的BUG

配置文件里写着：

# Sidebar, available value:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically
#  - hide    expand only when click on the sidebar toggle icon.
#  - remove  Totally remove sidebar including sidebar toggle icon.

但是当设置成always时，侧栏在文章页却不会自动弹出。在别的页面都能正常。

在\themes\next\layout/_scripts/pages/post-details.swig文件里看到这段代码

// Expand sidebar on post detail page by default, when post has a toc.
motionMiddleWares.sidebar = function () {
  var $tocContent = $('.post-toc-content');
  if (CONFIG.sidebar === 'post') {
    if ($tocContent.length > 0 && $tocContent.html().trim().length > 0) {
      displaySidebar();
    }
  }
};

虽然没学过JS，但是看注释和 if 语句，都是仅在sidebar参数为post时才会自动展开，坑爹呢。在if里加上always判断，即可，修改后如下：

// Expand sidebar on post detail page by default, when post has a toc.
    motionMiddleWares.sidebar = function () {
      var $tocContent = $('.post-toc-content');
      if (CONFIG.sidebar === 'post' || CONFIG.sidebar === 'always') {
        if ($tocContent.length > 0 && $tocContent.html().trim().length > 0) {
          displaySidebar();
        }
      }
    };

改完后顺手向作者反映了问题：设置sidebar: always，侧栏在文章页反而不展开

使Page也自动弹出侧栏

上一步中只有主页和文章页才会弹侧栏，自己添加的Page却不会。打开\themes\next\layout\page.swig，找到底部的

1
2
3

{% block sidebar %}
    {{ sidebar_template.render(false) }}
{% endblock %}

把false改成true。这时不管有没有目录，都会弹出侧栏。需要让它根据目录的度来决定是否弹出，继续修改，结果如下：

{% block sidebar %}
    {{ sidebar_template.render(true) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

直接使用与文章页（post-details）相同的侧栏设置。

修改页面宽度

现在一般都用宽屏显示器，博客页面两侧留白太多，调整一下宽度。
打开\themes\next\source\css\_common\components\post\post-expand.styl文件，找到

@media (max-width: 767px)

改为

@media (max-width: 1080px)

打开\themes\next\source\css\ _variables\base.styl文件，找到

$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px

修改$main-desktop和$content-desktop的数值：

$main-desktop                   = 1080px
$main-desktop-large             = 1200px
$content-desktop                = 810px

Next.Mist主题的文章宽度至此改完了。如果你用的是Next.Pisces，还需要继续修改。
打开\themes\next\source\css\_schemes\Pisces\_layout.styl文件，将第4行的width改为1080px，修改后如下：

.header {
  position: relative;
  margin: 0 auto;
  width: 1080px;

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px：

$font-size-base           = 16px

修改网页配色

添加自定义颜色

取色可以用QQ，以廖雪峰的官方网站为例，我想取其中代码块的颜色。打开QQ按Ctrl+Alt+A开始截图，将鼠标移到文字上，按住Ctrl键即可看到该颜色的16进制代码为：

文字毕竟太细，鼠标很难准确移到笔画上，也可以改用Chrome的审查元素取色。按F12，先点箭头，再点代码块：

style选项卡中就出现了字体颜色和背景色：

继续修改上一步中的\themes\next\source\css\ _variables\base.styl文件，找到文件开头的colors for use across theme，加入自定义颜色：

// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定义的颜色
$my-link-blue = #0593d3  //链接颜色
$my-link-hover-blue = #0477ab  //鼠标悬停后颜色
$my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
$my-code-background = #eee  // 用``围出的代码块背景颜色

修改超链接颜色

改掉这几行：

// Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

效果如图：

修改小型代码块颜色

修改$code-background和$code-foreground的值：

// Code & Code Blocks
// 用``围出的代码块
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
$code-background                = $my-code-background
$code-foreground                = $my-code-foreground
$code-border-radius             = 4px

效果如图：

替换字体库网址

使用中发现网站打开速度巨慢，一开始以为是Github的原因，但是本地调试时也要一分钟才能打开。使用Chrome抓包发现：

57.04 秒！

在\themes\next目录执行命令

grep 'css?family' -r ./

可以找到罪魁祸首就在\themes\next\layout\_partials\head.swig文件中：

{% if theme.use_font_lato %}
  {% if config.language === 'zh-Hans' %}
    <link href='//fonts.lug.ustc.edu.cn/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  {% else %}
    <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  {% endif %}
{% endif %}

作者的原意是想让语言设置为简体的用户都连接到中国科技大学的免费字体库，其他用户链接到Google，没想到这个链接挂了。使用Ping检测工具可以看到fonts.googleapis.com被解析到了北京的服务器，速度相当快，所以我们直接使用Google的字体库就可以了：

1
2
3

{% if theme.use_font_lato %}
    <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
{% endif %}

修改底栏

先准备一些代码。站长统计，注册并获取统计代码：

&nbsp;&nbsp;|&nbsp;&nbsp;
<script type="text/javascript">
  var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

出于保护隐私的考虑，我编辑掉了部分关键代码，直接复制上面的无法使用。

百度和Google网站地图，上面已经安装了，这是插入到底栏的代码：

&nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="/sitemap.xml">Google网站地图</a></span>
&nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="/baidusitemap.xml">百度网站地图<

不蒜子统计代码：

&nbsp;&nbsp;|&nbsp;&nbsp;本页点击 <span id="busuanzi_value_page_pv"></span> 次
&nbsp;&nbsp;|&nbsp;&nbsp;本站总点击 <span id="busuanzi_value_site_pv"></span> 次
&nbsp;&nbsp;|&nbsp;&nbsp;您是第 <span id="busuanzi_value_site_uv"></span> 位访客

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

百度自动推送代码，在页面被访问时，页面URL将立即被推送给百度，可以增加百度收录：

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

下面把这些代码全加入模板中，打开\themes\next\layout\_partials\footer.swig，修改后的完整文件内容为：

<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  &copy; {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="icon-next-heart fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}

  &nbsp;&nbsp;|&nbsp;&nbsp;
  <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
  </script>

  &nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="/sitemap.xml">Google网站地图</a></span>
  &nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="/baidusitemap.xml">百度网站地图</a></span>

  </span>
</div>

<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT{% if theme.scheme %}.{{ theme.scheme }}{% endif %}
  </a>
</div>


&nbsp;&nbsp;|&nbsp;&nbsp;本站总点击 <span id="busuanzi_value_site_pv"></span> 次
&nbsp;&nbsp;|&nbsp;&nbsp;您是第 <span id="busuanzi_value_site_uv"></span> 位访客

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

{% block footer %}{% endblock %}

注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换成你自己的站长统计代码

设置之后的底栏效果：

标题下添加「阅读量」

上一节中有一段JS代码：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

现在要添加的阅读量统计也依赖这段代码，上面已经将它添加到页面中，这里可以直接调用它。

打开/themes/next/layout/_macro/post.swig，找到标签<div class="post-meta"></div>，在该标签内部合适的位置添加：

1
2
3

{% if not is_index %}
  <span id="busuanzi_container_page_pv">&nbsp;&nbsp;|&nbsp;&nbsp;阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

我放在这里：

效果：

embed.js本地化

使用Chrome抓包可以得到多说评论核心脚本embed.js的远程文件地址：

http://static.duoshuo.com/embed.js

在浏览器中打开，右键另存为，放到\theme\next\source\js\文件夹中。

再打开\themes\next\layout\_scripts\comments\duoshuo.swig。搜索//static.duoshuo.com/embed.js，把它改成/js/embed.js。

如法炮制，把加载慢的.js都本地化。目前Github的响应速度非常快。

其他处理的js有：

\themes\next\layout\_partials\searchswiftype.swig中的

//s.swiftypecdn.com/install/v2/st.js

美化多说评论

添加浏览器、操作系统信息

1.博客中找一条自己的留言，获取多说id：

2.修改embed.js，也可以直接下载我的embed.js。

打开上一步本地化的embed.js，在最顶部添加如下代码：

//管理员判断开始
function sskadmin(e) {
    var ssk = '';
    if (e.user_id == 14198272) {
        if (checkMobile()) {
            ssk = '<span class="ua"><span class="sskadmin">博主</span></span><br><br>';
        } else {
            ssk = '<span class="ua"><span class="sskadmin">博主</span></span>';
        }
    } else {
        if (checkMobile()) {
            ssk = '<br><br>';
        }
    }
    return ssk;
}
//管理员判断结束
//移动客户端判断开始
function checkMobile() {
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if (isiPad) {
        return false;
    }
    var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i) != null;
    if (isMobile) {
        return true;
    }
    return false;
}
//移动客户端判断结束
//显UA开始
function ua(e) {
    var r = new Array;
    var outputer = '';
    if (r = e.match(/FireFox\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_firefox"><i class="fa fa-firefox"></i> FireFox'
    } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon'
    } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度浏览器'
    } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser'
    } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser'
    } else if (r = e.match(/MetaSr/ig)) {
        outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗浏览器'
    } else if (r = e.match(/2345Explorer/ig)) {
        outputer = '<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345王牌浏览器'
    } else if (r = e.match(/2345chrome/ig)) {
        outputer = '<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345加速浏览器'
    } else if (r = e.match(/LBBROWSER/ig)) {
        outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 猎豹安全浏览器'
    } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> 微信'
        /*.split('/')[0]*/
    } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ浏览器'
        /*.split('/')[0]*/
    } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ浏览器'
        /*.split('/')[0]*/
    } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui浏览器'
        /*.split('/')[0]*/
    } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_chrome"><i class="fa fa-chrome"></i> Chrome'
        /*.split('.')[0]*/
    } else if (r = e.match(/safari\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_apple"><i class="fa fa-safari"></i> Safari'
    } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_opera"><i class="fa fa-opera"></i> Opera'
    } else if (r = e.match(/Trident\/7.0/gi)) {
        outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> IE 11'
    } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
        outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> IE' + ' ' + r[0]
        /*.replace('MSIE', '').split('.')[0]*/
    } else {
        outputer = '<span class="ua_other"><i class="fa fa-globe"></i> 其它浏览器'
    }
    if (checkMobile()) {
        Mobile = '<br><br>';
    } else {
        Mobile = '';
    }
    return outputer + "</span>" + Mobile;
}
function os(e) {
    var os = '';
    if (e.match(/win/ig)) {
        if (e.match(/nt 5.1/ig)) {
            os = '<span class="os_xp"><i class="fa fa-windows"></i> Windows XP'
        } else if (e.match(/nt 6.1/ig)) {
            os = '<span class="os_7"><i class="fa fa-windows"></i> Windows 7'
        } else if (e.match(/nt 6.2/ig)) {
            os = '<span class="os_8"><i class="fa fa-windows"></i> Windows 8'
        } else if (e.match(/nt 6.3/ig)) {
            os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 8.1'
        } else if (e.match(/nt 10.0/ig)) {
            os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 10'
        } else if (e.match(/nt 6.0/ig)) {
            os = '<span class="os_vista"><i class="fa fa-windows"></i> Windows Vista'
        } else if (e.match(/nt 5/ig)) {
            os = '<span class="os_2000"><i class="fa fa-windows"></i> Windows 2000'
        } else {
            os = '<span class="os_windows"><i class="fa fa-windows"></i> Windows'
        }
    } else if (e.match(/android/ig)) {
        os = '<span class="os_android"><i class="fa fa-android"></i> Android'
    } else if (e.match(/ubuntu/ig)) {
        os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu'
    } else if (e.match(/linux/ig)) {
        os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux'
    } else if (e.match(/mac/ig)) {
        os = '<span class="os_mac"><i class="fa fa-apple"></i> Mac OS X'
    } else if (e.match(/unix/ig)) {
        os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix'
    } else if (e.match(/symbian/ig)) {
        os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS'
    } else {
        os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统'
    }
    return os + "</span>";
}
//显UA结束

然后搜索

data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + "</span>"),

在后面添加

t += sskadmin(s.author) + "<span class=\"ua\">" + ua(s.agent) + "</span><span class=\"ua\">" + os(s.agent) + "</span>",

3.添加对应CSS。打开\themes\next\source\css\main.styl，在文件开头插入代码：

/*博主标记 CSS开始*/
.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: 1;
}
/*博主标记 CSS结束*/
/*多说UA开始*/
span.ua{
    margin: 0 1px!important;
    color:#FFFFFF!important;
    /*text-transform: Capitalize!important;
    float: right!important;
    line-height: 18px!important;*/
}
.ua_other.os_other{
    background-color: #ccc!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
}
.ua_ie{
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_firefox{
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_maxthon{
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_ucweb{
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_sogou{
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345explorer{
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345chrome{
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_mi{
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_lbbrowser{
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_chrome{
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_qq{
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_apple{
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_opera{
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}


.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
    background-color: #39b3d7!important;
    border-color: #46b8da!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_ubuntu{
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_mac{
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_unix{
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_nokia{
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
/*多说UA结束*/

效果：

动感头像

效果和CSS代码见多说自定义CSS 让你的多说评论动感起来

然后打开多说后台，按下图操作，把代码粘贴进去

大功告成。

我还添加了网上搜集的其他代码，详见注释：

/*头像样式 圆形，鼠标移上会旋转*/
#ds-reset .ds-avatar img{
    width:54px;height:54px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
    -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
    -moz-border-radius:27px;
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
    -moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    transform: rotateZ(360deg);/*图像旋转360度*/
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

/*评论列表背景*/
#ds-thread #ds-reset li.ds-post {
    background: rgba(255, 255, 255, .2);
}
#ds-thread #ds-reset li.ds-post:hover {
    background-color: rgba(255, 255, 255, .6) !important;
}

/*发布按钮背景 去掉背景图，修改底色，去掉文字阴影。*/
#ds-thread #ds-reset .ds-post-button {
    background-image: none;
    background: rgba(136, 172, 219, .2);
    text-shadow: none;
}

/*工具栏背景*/
#ds-reset .ds-gradient-bg {
    background: rgba(255, 255, 255, .5);
}

/*评论框背景*/
#ds-thread #ds-reset .ds-textarea-wrapper {
    background: rgba(255, 255, 255, .5);
}

/*未登录用户名字颜色，与登录用户一致*/
#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}

/*用户名等超链接颜色*/
#ds-thread #ds-reset .ds-highlight {
    color: #ef7c6c !important;
}

/*评论、文本框字体， 默认字体偏小，稍作调整。*/
#ds-thread #ds-reset .ds-comment-body p, #ds-thread #ds-reset .ds-textarea-wrapper textarea {
    font-size: 1.15em;
    color: #717171;
    font-family: inherit;
}

/*社交账号登陆透明度*/
#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
}

SEO优化

更改首页标题格式为「关键词-网站名称 - 网站描述」。打开\themes\next\layout\index.swig文件，找到这行代码：

1	{% block title %} {{ config.title }} {% endblock %}

把它改成：

1
2
3

{% block title %}
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

项目主页添加README

Github上博客的仓库主页空荡荡的，没有README。如果把README.md放入source文件夹，hexo g生成时会被解析成html文件，放到public文件夹，生成时又会自动删除。

解决方法很简单，在source目录下新建文件README.mdown，在里面写README即可。hexo g会把它复制到public文件夹，且不会被解析成html

Git相关

多PC同步

需要在公司和家里电脑上写博客，打包拷来拷去太麻烦。我使用Coding.net的免费私有仓库来同步hexo文件夹。

1.删除根目录和\theme\next\下的.git文件夹。
2.修改根目录下的.gitignore文件为：

/.deploy_git
/public

其实第一行留不留都一样，它是hexo默认的git配置文件夹，里面也有一个.git，使/.deploy_git里的文件无法被提交。public是每次hexo g新生成的静态博客文件，不需要同步。

3.push & pull

如果没接触过Git，可以看这本书学习一个：《Pro Git》

pull失败：Filename too long

在git bash里面，输入

git config --global core.longpaths true

关闭换行符警告

部署时会出现如下警告

warning: LF will be replaced by CRLF

LF为换行符，CR为回车符。Windows结束一行用CRLF，Mac和Linux用LF。Git默认在你提交时自动地把行结束符CRLF转换成LF，而在签出代码时把LF转换成CRLF。

要关闭警告，执行如下命令：

git config --global core.autocrlf false

上述命令中：

false表示取消自动转换功能。适合纯Windows
true表示提交代码时把CRLF转换成LF，签出时LF转换成CRLF。适合多平台协作
input表示提交时把CRLF转换成LF，签出时不转换。适合纯Linux或Mac

补充：
Git还提供了一个换行符检查功能core.safecrlf，可以在提交时检查文件是否混用了不同风格的换行符。可以用同样的命令更改设置。
选项如下：

false - 不做任何检查
warn - 在提交时检查并警告
true - 在提交时检查，如果发现混用则拒绝提交

建议使用最严格的 true 选项

博客部署的message

\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到这一句：

1	Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}.

改得个性化一点：

1	这个勤奋的家伙又更新了: {{ now(\'YYYY-MM-DD HH:mm:ss\') }}.

在Github对应项目中可以看到效果：