人无完人，设想地球上的每个超棒的想法都能汇聚在相应的小河之中，那么文明的大河将会迅速变成大海（赶在太阳将河水蒸干之前）。感谢互联网，让开源共享精神照耀了这个时代，让这个设想有了真正的可能。
拥有自己的博客，不仅是记录了自己，反思了自己，而且借助互联网也可能照亮他人，给整个文明光能。
本文就是一篇关于利用Github Pages + Hexo + NexT搭建个人博客的文章，教你如何从0到1打造自己的个性超赞博客。

必读写在前面

本文主要内容是NexT主题的细节优化。搭建的过程，已有的优化，Markdown的使用，都直接贴出大佬的博文链接。

bb和目录

首先肯定是感谢各位大佬的博文，我一个小白，没学HTML，没学CSS，没学JavaScript，连C也还没学会……如果你是一个和我一样的小白，且对本博客感觉还蛮满意，恭喜你！看完这篇博文，你自己也可以拥有一个这样的博客啦！

给小白（像我一样，也许还有完美主义和强迫症）却想搭建个性化博客提供参考，是我写这篇博文的主要目的，所以如果本文有幸被大佬读到，文中的不足还请大佬见谅。

本文参考的文章都会直接给出原文链接或者以注脚的形式标记出处，但Google参考了实在太多太多了，有些我当时没做记录，如有遗漏，欢迎指出。

tip：有一些优化的很好的博客，有很多很酷的功能，我当时没收藏，后来非常后悔，提醒大家如果看到很赞的博客，一定要马上收藏。

因为目录默认全展开不美观，而不展开又不能让读者对文章内容迅速了解，故在开头加上。

1. 必读 写在前面
	1.1. bb和目录
	1.2. 重要的定义
	1.3. 我操作的环境
2. 开始 搭建博客
	2.1. 在本地安装Hexo
	2.2. 部署博客到Github Pages
	2.3. 更新升级提示（可以最后看）
3. 优化 基本功能配置
	3.1. 选择主题
	3.2. 站点配置文件
	3.3. 主题配置文件
	3.4. 动态背景
	3.5. 注脚
4. 优化 网页样式布局
	4.1. 怎么更改？
	4.3. 附上我的custom.styl（2017.10.03更新）
	4.4. 修改字体
5. 进阶 高级功能配置
	5.1. 大佬的博文
	5.2. 更改上一篇，下一篇的顺序
	5.3. 移动端显示back-to-top按钮和侧栏
	5.4. 谷歌搜索优化
	5.5. 某一category和tag的页面年份分割（2017.07.18更新）
		5.5.1. category的修改
		5.5.2. tag的修改
		5.5.3. 说明
	5.6. 文章底部加上评分小星星（2017.08.23更新）
	5.7. 侧栏加入已运行的时间（2017.08.27更新）
	5.8. 添加Top5页面（2017.08.27更新）
	5.9. 利用gulp压缩代码（2017.08.27更新）
	5.10. 让页脚的心跳动起来（2017.08.28更新）
	5.11. 页脚加上微信二维码（2017.08.29更新）
	5.12. 更改标签云（tagcloud）的颜色（2017.08.31更新）
6. 进阶 写出优雅文章
	6.1. Markdown的使用
		6.1.1. Markdown相关教程
		6.1.2. 我个人的总结
	6.2. 如何使用emoji（2017.08.20更新）
	6.3. 插入音乐和视频（2017.08.20更新）
		6.3.1. 音乐
		6.3.2. 视频
	6.4. 好玩的写作样式
		6.4.1. 在文档中增加图标
		6.4.2. 文本居中的引用
		6.4.3. 自定义标签样式（2017.08.23更新）
	6.5. 文章的模板文件
7. 结尾 求大佬和结束语
	7.1. 移动端顶部菜单
	7.2. 替换fancybox
	7.3. 结束语

重要的定义

了解这些定义，防止懵逼和大脑混乱。

站点配置文件和主题配置文件，名字都叫_config.yml，容易乱。

站点配置文件，位于博客文件夹根目录内：

~/blog/_config.yml

主题配置文件，位于主题文件夹根目录内：

~/blog/themes/next/_config.yml

我操作的环境

留这个，是因为有时我Google教程，发现按流程走，却达不到应有的效果。故当按照这篇的某流程却达不到预期效果，可以考虑考虑这个，然后自己灵活点去Google解决方案。

tip：由于众所周知的原因Google无法访问，推荐一下老D的hosts，不过估计能看到这篇文章的人，都已具备这种能力。

[2017.08.31更新]
调试浏览器
Google Chrome Version 60.0.3112.101 (Official Build) (64-bit)
Hexo版本
root@kali:~/blog# hexo version
(node:10055) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
hexo: 3.3.8
hexo-cli: 1.0.3
os: Linux 4.11.0-kali1-amd64 linux x64
http_parser: 2.7.0
node: 8.3.0
v8: 6.0.286.52
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b
root@kali:~/blog# cat package.json 
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.8"
  },
  "dependencies": {
    "gulp": "^3.9.1", /*压缩代码*/
    "gulp-htmlclean": "^2.7.15", /*压缩代码*/
    "gulp-htmlmin": "^3.0.0", /*压缩代码*/
    "gulp-minify-css": "^1.2.4", /*压缩代码*/
    "hexo": "^3.3.8",
    "hexo-deployer-git": "^0.3.1", /*Git部署工具*/
    "hexo-footnotes": "^1.0.1", /*注脚*/
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.0", /*RSS*/
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-search": "^2.1.1", /*本地搜索*/
    "hexo-generator-sitemap": "^1.2.0", /*生成sitemap.xml，利于SEO*/
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-tag-aplayer": "^2.0.2", /*音乐播放插件，支持歌词*/
    "hexo-tag-dplayer": "^0.2.0", /*视频播放插件，支持弹幕*/
    "hexo-wordcount": "^3.0.2" /*文章字数统计*/
  }
}
主题NexT版本
version: 5.1.2
优化主题NexT的版式
scheme: Muse

开始搭建博客

终于进入正文了！但是这个我却不打算写，因为看到了一些很好的文章，这里直接给出大佬的文章链接。

在本地安装Hexo

1.建议先把Hexo官方文档过一遍，毕竟是官方文档。

2.在Linux服务器上搭建Hexo：OS X、Windows与Linux本地环境，有选择的查看，因为此大佬直接部署在了自己的Linux服务器上，而不是部署到Github Pages，所以对于萌新查看到安装好Hexo就行了。

安装好Hexo后，先新建个文件夹，名字可以为blog，然后进入这个文件夹，输入命令：

hexo init

等一会，如果出现WARN没关系，只要不出现红色的ERROR就行。好了后，输入命令：

hexo g
hexo s

然后点开http://localhost:4000/，恭喜你！已经在本地搭建好博客了！

部署博客到Github Pages

Github Pages是开源协作社区Github的一个服务，将博客部署到它上面再合适不过了。

问题	解答
为什么要部署到Github Pages上？	首先免费，其次省心，最后可以学习使用Github。
Github Pages有容量限制吗？	有，由What is GitHub Pages?可知：大小限制为1 GB，一个月100 GB流量。
超出限制的容量怎么办？	讲真，如果图片音乐视频等大文件都放在七牛云KODO、阿里云OSS或其它云存储上，那么压根不用担心，因为我的博客现在只用了3.38 MB，这么点一个月的流量也几乎不可能不够。
国内访问速度行不行，有必要同时部署在Coding上吗？	个人感觉完全没必要，自己不用梯子时，感觉访问速度可以，毕竟站点的大文件都是放在了云存储上。
我可以用自己的域名吗？	可以，在`~/blog/source`文件夹下添加CNAME文件即可，教程自己Google。

注册Github帐号和创建Repository请查看这篇博文：基于Hexo+github+coding搭建个人博客——基础篇(从菜鸟到放弃)，之后在博客文件夹根目录（以后安装插件都先到这个目录）输入下面命令回车：

npm install hexo-deployer-git --save

然后，打开博客文件夹根目录下的站点配置文件，编辑：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://reuixiy.github.io/
.
.
.省略……
.
.
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/reuixiy/reuixiy.github.io.git
  branch: master

将其中的reuixiy改成你的Github注册的帐号名就行，然后执行下面的命令：

hexo clean
hexo g
hexo d

输入你的用户名和密码，成功后复制https://帐号名.github.io/浏览器打开就行。看！这就是你的博客了，只要能连接到互联网，就能随时查看它！

当然，如果你不想每次都输入用户名和密码，不想每次更新时，在Github上显示invalid-email-address，可以按上面的那篇博文设置。

更新升级提示（可以最后看）

更新升级会有不确定因素，即讨厌又麻烦，但是不更新升级怎么能享受新功能呢。

1.npm升级全局安装的模块：

npm update -g

2.npm升级博客目录下安装的模块，在博客文件夹根目录：

npm update

3.升级npm自身：

npm install npm -g

4.升级Node.js到最新版：

npm install -g n
n latest

5.更新主题：进入主题文件夹根目录，然后git pull，发现报错，怎么解决呢？可以参考这篇文章。

注意：更新主题的方法有很多，我用的这种，更新后没啥问题，要是有疑虑可以自行Google，毕竟更新有风险，数据无价。

优化基本功能配置

通过上面的学习，你应该能够在自己的Github Pages上看到自己的博客了，接下来就是配置和增加功能，如阅读统计、加上评论和安装插件啥的，还有就是添加一些网站的基本信息，这些配置建议在写文章之前先折腾好。

配置大部分就是改两个文件，都叫_config.yml，文件的位置开头已告诉大家。我觉得与其每点分开来论述，倒不如将我的这两个文件直接贴出来，通过注释的方式告诉大家配置的方法，所以下面先贴出我的两个文件。

另建议如果我给出的配置文件中有你那没有的内容，可以先跳过，折腾完第5节再回来折腾。如果有些我没贴出来，但你比较懵，可以自行Google。

选择主题

搭建好博客后，最重要的一件事就是选一个自己感觉合适的主题。

默认的主题功能少，而且不太好看（个人感觉），而一些主题则有很多功能，也比较美观。我选择的是NexT，简洁且功能不少，也是在Github上被Star最多的一个Hexo主题。第二多的是 hexo-theme-yilia，第三多的是hexo-theme-material，这三个都不错，自己可以多试试，看哪个主题比较合自己胃口。

换主题很简单，首先在这个主题的Github页面的右上方复制链接，如下图：

然后进入目录~/blog/themes：

git clone https://github.com/iissnan/hexo-theme-next.git

把hexo-theme-next改名为next，再在站点配置文件中修改如下即可：

## Themes: https://hexo.io/themes/
theme: next

站点配置文件

请先查看Hexo官方文档，如果你的文件中没有相关内容，请勿直接添加。另：所有的:都为英文字符，且它后面都有一个空格。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: reuixiy
subtitle: Viva La Vida
description: 易 象 辞
author: reuixiy
language: zh-Hans
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://reuixiy.github.io/
root: /
# 文章的永久链接结构，请务必写文章之前就想好，详细参数请查看https://hexo.io/docs/permalinks.html
# 当然最好不要参考我的，我的太不利于SEO了，除非……
permalink: :category/:year/:month/:day/:title.html
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
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
# 代码自动高亮
  auto_detect: true
  tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
# Category & Tag
default_category: uncategorized
# 分类和标签的路径设置成英文，见https://github.com/hexojs/hexo/issues/1162
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
## 修改归档页面、某一分类页面、某一标签页面的显示篇数，参考http://theme-next.iissnan.com/faqs.html#setting-page-size
archive_generator:
  per_page: 0
  yearly: false
  monthly: false
  daily: false
  
category_generator:
  per_page: 0
  
tag_generator:
  per_page: 0
# Extensions
## Plugins: https://hexo.io/plugins/
# RSS，进入博客文件夹根目录安装，npm install hexo-generator-feed --save即可，无需更多配置
feed:
  type: atom
  path: atom.xml
  limit: 0
  hub:
  content:
## Themes: https://hexo.io/themes/
# 主题配置
theme: next
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/reuixiy/reuixiy.github.io.git
  branch: master

主题配置文件

只附上我更改的和我觉得需要说明的，如果你的主题不是NexT，那么请另Google。建议先查看NexT官方文档，写的很好，多逗留会没坏处。

# [2017.08.31更新]
# Put your favicon.ico into `hexo-site/source/` directory.
# 网站显示的小图标，可以百度在线工具转换图片格式，然后放在相应目录，并将目录地址正确写下
favicon: /images/favicon.ico
# Specify the date when the site was setup
since: 2017
# icon between year and author @Footer
# 页脚年份与作者名之间的小图标，默认是❤，
# 可以去http://fontawesome.io/icons/找到自己喜欢的，更改名字，下面的有关icon的设置都一样
authoricon: heart
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
# 项目换行可以更改显示顺序
# 如果为中文名，如果这个项前会显示.menu
# 解决方法就是编辑~/blog/themes/next/languages下的相应文件
# 在相应文件里的menu:项内添加相应的内容
menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  top: /top
  about: /about
  #sitemap: /sitemap.xml
  #commonweal: /404
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Blog rolls
links_title: 神奇的链接
links_layout: inline
links:
  😆 网易云音乐 😆: https://music.163.com/#/user/home?id=86590096
  Coldplay Official Website: http://coldplay.com/
  获取Elon Musk的新闻: https://elonmusknews.org/
  尼古拉·特斯拉：发明了现代世界的人: http://www.bilibili.com/video/av6211226/
  关于此博客: https://reuixiy.github.io/about/
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# 侧栏的头像
  avatar: /images/avatar.gif
sidebar:
  # Scroll percent label in b2t button
  # 显示阅读百分比
  scrollpercent: true
  # Enable sidebar on narrow view
  # 移动端显示侧栏
  onmobile: true
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------
# Automatically scroll page to section which is under <!-- more --> mark.
# 点击[Read More]，自动滚动到<!-- more -->标记处
scroll_to_more: false
# Automatically saving scroll position on each post/page in cookies.
# 用cookies保存浏览的位置信息
save_scroll: false
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 按字数自动加入[Read More]，不美观不建议
auto_excerpt:
  enable: false
  length: 150
# Post meta display settings
# 文章顶部显示的信息
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 显示统计字数和建议阅读时长，注意：这个要安装插件，先进入博客文件夹根目录，然后：npm install hexo-wordcount --save
post_wordcount:
  item_text: true
  wordcount: true
  min2read: false
  separated_meta: false
  
# Android Chrome header panel color ($black-deep).
# Android上Chrome浏览器顶部颜色设置
android_chrome_color: "#fff"
# Code Highlight theme
# 代码高亮主题
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
# 来必力评论，参见教程：https://www.drixn.com/2017/LiveReCommentsSystem/
livere_uid: 
# Hypercomments
# Hypercomments评论，我用的就是这种，特点是可以匿名评论，暂时还没有加入GFW名单
hypercomments_id: 
# 另外关于评论，还有两种其它方法，见：
# 基于GitHub Issues，https://imsun.net/posts/gitment-introduction/
# 基于Leancloud，https://github.com/xCss/Valine
# 想折腾的自己去吧，哈哈哈～
# Google Webmaster tools verification setting
# Google站长工具校验，如果想用
# 可以不用这种验证方式，直接先添加下面的Google Analytics
# 然后用Google Analytics校验
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
# 去https://analytics.google.com注册，自备梯子
google_analytics: 
# Star rating support to each article.
# 评分，教程见本文5.6
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     
  color:  ff7600
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
# 可以显示每篇文章的阅读量，参见教程：https://notes.wanghao.work/2015-10-21-为NexT主题添加文章阅读量统计功能.html
leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子统计，用于在页脚显示总访客数和总浏览量，将false改为true就能直接使用
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-circle-o"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header:
  site_pv_footer: <i class="fa fa-eye"></i>
  # custom pv span for one page only
# 页面浏览量，不建议开启，建议用上面的leancloud_visitors
# 首先leancloud更稳定，其次leancloud便于管理，最后可以利用leancloud的api建立Top5页面
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:
# Local search
# 要安装插件才能使用，先进入博客文件夹根目录，然后：npm install hexo-generator-search --save
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
# Progress bar in the top during page loading.
# 顶部加载条
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash
# Motion
# 动态渐入显示效果
use_motion: true
# Fancybox
# 效果太差了，没能力自己造轮子，先关了(2017-08-27)
fancybox: false
# Canvas-nest
# 动态背景
# 被我关了(2017-07-01)
canvas_nest: false
# Theme version
version: 5.1.2
# 文章末尾添加“本文结束”标记，请勿直接添加，参考(http://shenzekun.cn/hexo的next主题个性化配置教程.html#7-在每篇文章末尾统一添加“本文结束”标记)
passage_end_tag:
  enabled: true

动态背景

1.在主题配置文件中，靠后面，改canvas_nest: true。

2.修改颜色和数量，修改文件：

~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js

怎么修改？参考README。

注脚

在Hexo插件搜索footnotes，发现目前有两种插件，右边的可以实现鼠标放在上面悬浮显示注释的功能，但是亲测有一个Bug，手机上对页面宽度有影响，强迫症难以忍受。

tip：Hexo插件页面有很多不同功能的插件，可以自行尝试，说不定有惊喜。

我安装的是左边的，安装后然后按README书写，就应该可以了。

先进入博客文件夹根目录，然后：
npm install hexo-footnotes --save

注意：注脚的内容一定要放在文章的最后面，否则可能会有错误。

优化网页样式布局

发现页面有大量留白？颜色不合自己口味，那就F12开始吧，大换装开始！背景？颜色？圆角矩形？透明度？空白区？只用按下F12，改到自己想要的样式，然后Copy到custom.styl文件即可。

文件位置：~/blog/themes/next/source/css/_custom/custom.styl

怎么知道要修改这个文件呢？强烈推荐阅读2017年最新基于hexo搭建个人免费博客——自定义页面样式一。感觉这是NexT主题非常棒的设计，因为这让我们能够很方便自定义网站的样式。

怎么更改？

浏览器按F12即可，建议用火狐浏览器，或者Google Chrome浏览器（有梯子的直接去Google下载）。如果你按下F12后简直特么一脸懵逼，那么别急，硬着头皮慢慢折腾吧哈哈哈嗝～

方法其实很简单，基本就是这篇博文中的这张图的三步骤，但是要熟练还是要多折腾，毕竟如果你和我一样之前没学过CSS，那么一开始对里面的各个元素大脑肯定毫无概念，建议还是多百度。如果想深入了解，这里可以给份我Google的资料Chrome开发者工具（自己没看）。

附上我的custom.styl

一定是先F12找到要改的元素，调试成自己喜欢的值，然后再复制到custom.styl，而不是直接复制我给出的，我给出的仅供参考。

请先找对元素，不然可能会制造出新bug，建议大家修改一个，就加个注释，方便以后调试修改。

[2017.10.03更新]
// Custom styles
// 页面整体设置
body {
    background-color: rgb(145, 219, 255);
    color: #000;
    line-height: 1.5;
}
// 最顶部加载条
.headband {
    height: 1.5px;
    background: rgba(255, 255, 255, 0);
}
// 页宽大于1600px页面顶端的宽度
.container .header-inner {
    width: initial;
}
// 页面留白更改
.header-inner {
    padding-top: 0px;
    padding-bottom: 0px;
}
.posts-expand {
    padding-top: 0px;
}
.posts-expand .post-meta {
    margin: 3px 0 0 0;
}
.post-button {
    margin-top: 0px;
}
.main {
    padding-bottom: 125px;
}
// Logo字体
.site-title {
    font-size: 70px;
    font-weight: bold;
    color: black;
    line-height: 80px;
}
// Logo背景
.brand{
    background: rgba(255, 255, 255, 0);
}
// 子标题
.site-subtitle{ 
    margin: 0;
    font-size: 15px;
    color: rgb(0, 0, 0);
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255, 118, 0, 0.75);
}
// 菜单
.menu {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 1.5px 10px 0px rgba(197, 197, 197, 0.5);
}
// 移动端左上角按钮
.site-nav-toggle {
    top: 20px;
    left: 10px;
}
.btn-bar {
    background: #000;
}
// 移动端菜单
@media (max-width: 767px) {
    .menu {
        text-align: center;
    }
    .site-nav {
        top: initial;
        border-top: none;
        border-bottom: none;
    }
}
// 菜单字体大小
.menu .menu-item a {
    font-size: 15px;
}
// 菜单项超链接样式
.menu .menu-item a:hover {
    border-bottom-color: #ff7600;
}
// 文章标题颜色
.posts-expand .post-title-link {
    color: #000;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
    background-color: rgb(255, 118, 0);
}
// 主页文章添加阴影效果
.post {
    margin-top: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 3px;
    box-shadow: 0px 1.5px 10px 0px rgba(197, 197, 197, 0.5);
    background: rgba(255, 255, 255, 0.5);
}
// 阅读更多按钮样式
.post-button .btn {
    color: rgb(255, 255, 255);
    background-color: rgba(134, 187, 232, 0.5);
    margin: 3px;
    border-radius: 3px;
    font-size: 15px;
    text-decoration: none;
    border: 1.5px solid #ff7600;
}
.post-button .btn:hover {
    color: rgb(255, 118, 0);
    background-color: rgba(134, 187, 232, 0.75);
    margin: 3px;
    border-radius: 3px;
    text-decoration: none;
    border: 1.5px solid #ff7600;
}
// 文章之间的分割线
.posts-expand .post-eof {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background: rgba(255, 255, 255, 0);
}
// 底部横线
.pagination {
    border-top: none;
    margin: 15px 0 15px;
}
// 页面底部页码
.pagination .page-number.current {
    border-radius: 3px;
}
.pagination .prev, .pagination .next, .pagination .page-number {
    margin-bottom: 10px;
    border-top: 0;
    border-bottom: none;
}
.pagination .prev, .pagination .next, .pagination .page-number:hover {
    margin-bottom: 10px;
    border-top: 0;
}
// 引用
blockquote {
    padding-top: 3px;
    padding-right: 20px;
    padding-bottom: 3px;
    padding-left: 20px;
    border-left: 5px solid rgba(255, 118, 0, 0.75);
}
// 分割线样式
hr {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    background-color: rgba(255, 118, 0, 0.75);
    background-image: repeating-linear-gradient(-45deg, #f4fbff, #f4fbff 4px, transparent 4px, transparent 8px);
    height: 3px;
}
// 超链接样式
a {
    color: #0593d3;
    border-bottom-color: #0593d3;
}
a:hover {
    color: #ff7600;
    border-bottom-color: #ff7600;
}
// 文章超链接样式（为emoji特设）
.post-body a {
    color: #0593d3;
    border-bottom: none;
    text-decoration: underline;
}
.post-body a:hover {
    color: #ff7600;
    border-bottom: none;
    text-decoration: underline;
}
// 标签云页面样式（为emoji特设）
.tag-cloud a {
    color: #0593d3;
    border-bottom: 1px solid #0593d3;
    text-decoration: none;
}
.tag-cloud a:hover {
    color: #ff7600;
    border-bottom: 1px solid #ff7600;
    text-decoration: none;
}
// ``代码块的自定义样式
code {
    color: #fff;
    background: rgba(0,0,0,.5);
    margin: 1px 3px;
    padding: 1px 3px;
}
// 标题样式
.post-body h2, h3, h4, h5, h6 {
    border-left: 5px solid #16a1e7;
    margin-left: -15px;
    padding-left: 10px;
}
// 首行缩进
.post-body p {
    text-indent: 2em;
}
ol {
    padding-left: 75px;
}
// 侧栏样式
.sidebar-active #sidebar-dimmer {
    opacity: 0;
}
.sidebar {
    box-shadow: 0 0 5px rgba(225, 118, 0, 0.7);
    background: rgba(30, 30, 30, 0.7);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.links-of-blogroll-title {
    margin-right: 5px;
    font-size: 15px;
    font-weight: bold;
}
.sidebar-nav li {
    font-size: 15px;
    color: #87daff;
}
.sidebar-nav .sidebar-nav-active {
    color: #87daff;
    border-bottom-color: #ff7600;
}
.post-toc .nav .active-current > a {
    color: #ff7600;
}
.post-toc .nav .active > a {
    color: #ff7600;
    border-bottom-color: #ff7600;
}
/*修目录bug，如果主题配置文件_config.yml的toc是wrap: true*/
.post-toc ol {
    padding: 0 10px 5px 10px;
}
/*目录默认全展开，已注释*/
//.post-toc .nav .nav-child {
//    display: block;
//}
.post-toc ol a {
    color: #87daff;
    border-bottom-color: #999;
}
.sidebar-inner {
    color: rgba(34, 244, 246, 0.75);
}
.site-author-name {
    margin: 5px 0 0;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 35px;
}
.site-description {
    letter-spacing: 5px;
    font-size: 15px;
    color: #ff7600;
    font-weight: bold;
}
.site-state {
    margin-right: 7px;
}
.site-state-item {
    padding: 0 15px;
    border-left: 1px solid rgba(255, 118, 0, 1);
}
// 侧栏头像
.site-author-image {
    border: 2px solid #fff;
    border-radius: 80px;
    transition: transform 1.0s ease-out;
}
img:hover {
    transform: rotateZ(360deg);
}
.posts-expand .post-body img:hover {
    transform: initial;
}
// 侧栏按钮样式
.sidebar-toggle {
    right: 10px;
    bottom: 43px;
    background: rgba(255, 118, 0, 0.5);
    border-radius: 5px;
}
.back-to-top {
    right: 10px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    background: rgba(255, 118, 0, 0.5);
    border-radius: 5px;
}
.back-to-top.back-to-top-on {
    bottom: 10px;
}
// 文章底部Copyright
.post-copyright {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    background-color: rgba(255, 255, 255, 0.5);
}
// 文章底部页面跳转
.post-nav-item a {
    position: relative;
    display: block;
    line-height: 25px;
    color: rgba(255, 118, 0, 0.75);
}
.post-nav-item a:hover {
    position: relative;
    display: block;
    line-height: 25px;
    color: rgba(255, 118, 0, 1);
}
// 文章底部的tags
.posts-expand .post-tags {
    margin-top: 10px;
}
// 底部评论
.comments {
    margin-top: 50px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}
// 页脚
.footer {
    background: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    color: #000000;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: rgba(255, 118, 0, 0.75);
    padding-top: 0px;
    position: absolute;
    left: 0;
    bottom: 0;
}
// 图片显示框
.posts-expand .post-body img {
    border-radius: 3px;
    border: none;
    padding: 0;
}
// 时间轴
.posts-collapse {
    margin: 50px 0;
}
@media (max-width: 767px) {
    .posts-collapse {
        margin: 50px 20px;
    }
}
.posts-collapse::after {
    margin-left: -2px;
    background: rgba(255, 118, 0, 0.75);
}
.posts-collapse .post-title a {
    color: #0095ff;
}
.posts-collapse .post-title a:hover {
    color: #ff7600;
}
// 修改archives页面移动端菜单下拉的bug
.posts-collapse {
    z-index: initial;
}
// 目录页面
.category-all-page {
    margin: 0 20px;
}
.category-all-page .category-list-count {
    color: rgba(0, 0, 0, 0.5);
}
// 选中文字部分的样式
::selection {
    background: rgb(46, 124, 160);
    color: rgb(255, 255, 255);
}
*::-moz-selection {
    background: rgb(46, 124, 160);
    color: rgb(255, 255, 255);
}
// 本地搜索框
.local-search-popup .search-icon, .local-search-popup .popup-btn-close {
    color: #ff7600;
    margin-top: 7px;
}
.local-search-popup .local-search-input-wrapper input {
    padding: 9px 0;
    height: 21px;
    background: rgb(255, 255, 255);
}
.local-search-popup .popup-btn-close {
    border-left: none;
}
// 图标FontAwesome样式
.fa {
    display: inline;
}
// 自定义的引用样式
blockquote.question {
    padding-left: 25px;
    border-left: 3px solid rgba(5, 154, 37, 0.75);
    background: rgba(255, 255, 255, 0.5);
}
// 自定义emoji样式
img#github-emoji {
    margin: 0;
    padding: 0;
    display: inline !important;
    vertical-align: text-bottom;
    border: none;
    cursor: text;
}
/* 设置滚动条的样式 */
/* 参考https://segmentfault.com/a/1190000003708894 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    background: rgba(144, 144, 144, 1);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.75);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 118, 0, 0.75);
}
// 音乐播放器aplayer
.aplayer {
    font-family: "Lato", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
.aplayer-withlrc.aplayer .aplayer-info {
    background: white;
}
// 音乐播放器aplayer歌单
.aplayer .aplayer-list ol {
    background: white;
}
// 视频播放器dplayer
.dplayer {
    border-radius: 3px;
}
.dplayer.dplayer-fulled {
    border-radius: initial;
}
// 视频播放器dplayer网页全屏的bug
.post.post-type-normal {
    transform: inherit !important;
}
// 评分rating
.post-widgets {
    padding-top: 0px;
    margin-top: 15px;
    margin-bottom: 30px;
}
.wp_rating {
    margin-right: 0px;
    padding-top: 10px;
}
// 自定义文章标题元数据中categories的样式，要改post.swig
a.categories {
    color: #0593d3;
    border-bottom: none;
    text-decoration: underline;
}
a.categories:hover {
    color: #ff7600;
    border-bottom: none;
    text-decoration: underline;
}
// 特别的样式
h2.love {
    border-left: none;
}
// 时间
#days {
    display: block;
    color: rgba(34, 244, 246, 0.75);
    font-size: 13px;
    margin-top: 15px;
}
// 页面top5
#top {
    display: block;
    text-align: center;
    margin-top: 50px;
}
// 按钮RSS样式
.feed-link {
    margin-right: 5px;
}
.feed-link a {
    color: #fff;
    border: 1px solid #999;
    border-radius: 15px;
}
.feed-link a:hover {
    background: rgba(255,118,0,0.75);
}
.feed-link a i {
    color: #fff;
}
// 微信订阅号
.weixin-box {
    position: absolute;
    bottom: 43px;
    left: 10px;
    text-align: center;
    font-size: 10px;
}
.weixin-menu {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    border-radius: 5px;
    background: url(https://微信的logo.svg);
    background-size: 24px 24px;
}
.weixin-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0px;
    width: 0px;
    border-radius: 3px;
    box-shadow: 0 1.5px 10px 0 rgba(197, 197, 197, 0.5);
    background: url(https://二维码.svg);
    background-size: 150px 150px;
    transition: all 0.35s ease-in-out;
}
.weixin-menu:hover .weixin-hover {
    bottom: 24px;
    left: 24px;
    height: 150px;
    width: 150px;
    background: url(https://微信的logo.svg);
    background-size: 150px 150px;
}
// 跳动的心
@keyframes heartAnimate { 
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: #ff71a8;
}
// 列表
table {
    background-color: white;
}

修改字体

优化了这么多，但还有一个最影响网站形象和阅读体验的项没有优化，瓦特？字体！

文章字体大小可以编辑～blog/themes/next/source/css/_variables/base.styl：

$font-size-base           = 15px
/*我写15是单纯因为喜欢5这个数字*/

如果你是一个和我一样对字体一脸懵逼的人，推荐阅读：

1.如何优雅的选择默认字体(font-family)

首先对于汉字来说，因为其字体库太大，通常都是调用本地中文字体库。而不同设备有不同默认中文字体和中文字体库，想要尽可能在不同设备上有较好的显示效果，就要在调用不同设备的本地字体库中显示效果较好的中文字体。

中文字体的设置一般无需更改，NexT主题默认的已经够了，如果你想自定义，编辑上面所说的base.styl即可。

注意：要想NexT主题的简体中文字体配置生效，站点配置文件中的language必须为zh-Hans。

然后对于英文字体，因为其字体库很小，所以想要个性化就简单多了。首先编辑主题配置文件，可以查看一下NexT官方文档。

字体自己选，代码字体可以参考这篇文章，下面附上我的供大家参考：

font:
  enable: true
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  # 亲测这个可用，如果不可用，自己搜索：Google字体 国内镜像，找个能用的就行
  host: https://fonts.proxy.ustclug.org
  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Lato
  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:
  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family: Lato
    size:
  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: "Source Code Pro"
    size:

进阶高级功能配置

这些功能的配置，大部分都要修改NexT主题的一些文件，所以git pull升级主题的时候，会比较麻烦，解决方法见本文2.3。

大佬的博文

更多如外挂一样的功能配置，就直接贴大佬的博文了，哪些功能自己喜欢，按照大佬的教程来配置就行。不过也有坑，比如有些功能（超链接样式、侧栏头像圆形旋转）可以直接通过在custom.styl添加代码实现，不用更改其它的文件。

1.hexo高阶教程next主题优化之加入网易云音乐、网易云跟帖、动态背景、自定义主题、统计功能（内有NexT主题的文件目录注释，这对自己自定义博客有很大帮助）

2.hexo的next主题个性化教程:打造炫酷网站

3.Hexo搭建博客的个性化设置

tip：大佬的博客可不仅仅有一篇文章，多在网站上逗留会，也许会有甜品。

更改上一篇，下一篇的顺序

进入一篇文章，在文章底部，有上下篇的链接（< >），但是点>发现进入的是页面中的的上面那篇，与操作习惯不符，别扭。

我猜这是从时间角度设计的，>英语叫next ，而next是更新的。不过别扭就改成习惯的好了，从空间位置角度设计。¹

方法就是修改~/blog/themes/next/layout/_macro/post.swig：

{% if not is_index and (post.prev or post.next) %}
  <div class="post-nav">
    <div class="post-nav-next post-nav-item">
      {% if post.prev %}
        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
          <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
        </a>
      {% endif %}
    </div>
    <span class="post-nav-divider"></span>
    <div class="post-nav-prev post-nav-item">
      {% if post.next %}
        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
          {{ post.next.title }} <i class="fa fa-chevron-right"></i>
        </a>
      {% endif %}
    </div>
  </div>
{% endif %}

不复制粘贴，自己改单词请注意，是prev不是perv，之前自己搞错了，然后盯着电脑屏幕尴尬半天，不停想特么老子哪里错了，怎么就是达不到效果！？？？

移动端显示back-to-top按钮和侧栏

[2017.07.22更新]

今天更新一下NexT主题，发现已经添加这功能，可以直接在主题配置文件中配置：

# Enable sidebar on narrow view
onmobile: true

如果你发现你的主题配置文件_config.yml中没有这段内容，可以尝试按本文2.3. 更新升级提示的方式更新主题，或者按下面的方法。

[原方法]

个人感觉在移动端显示侧栏，有利于阅读，我的博客已经改了，你可以将浏览器窗口宽度缩小试试。还好Google到了一篇大佬的博客，想改的点击查看吧。

提示：最好还是更新主题，因为这样在移动端点击侧栏之外，侧栏会自动弹回，而按照上面的链接中的文章更改则无法实现。

谷歌搜索优化

很大程度上就是因为这个，你现在才能看到这篇文章。直接参考这篇文章。

某一category和tag的页面年份分割

在Archives页面，有年份分割，而某一category和tag的页面却没有。怎么办呢？修改两个文件，加代码即可。

category的修改

代码位置：~/blog/themes/next/layout/category.swig。

1.加到哪？要加两个位置：

    {% for post in page.posts %}
              位置A
      {{ post_template.render(post) }}
    {% endfor %}
.
.
.（省略好多行）
.
.
位置B（没错最后面）

2.加什么？自己看着加：

    {% for post in page.posts %}
      {# Show year #}
      {% set year %}
      {% set post.year = date(post.date, 'YYYY') %}
      {% if post.year !== year %}
        {% set year = post.year %}
        <div class="collection-title">
          <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
        </div>
      {% endif %}
      {# endshow #}
      {{ post_template.render(post) }}
    {% endfor %}
.
.
.（省略好多行）
.
.
{% block script_extra %}
  {% if theme.use_motion %}
    <script type="text/javascript" id="motion.page.archive">
      $('.archive-year').velocity('transition.slideLeftIn');
    </script>
  {% endif %}
{% endblock %}

tag的修改

代码位置：~/blog/themes/next/layout/tag.swig，与的category修改完全一样。

说明

两段代码直接Copy同目录下的archive.swig文件里面的，而且tag.swig和category.swig好像都预留了位置似的，不知道写代码的大佬怎么想的=_=!。

代码小白的我折腾了半天，才改好。

文章底部加上评分小星星

打开主题配置文件~/blog/themes/next/_config.yml：

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     
  color:  ff7600

先去注释中的网站，首页点Rating，然后注册个帐号，填一下自己网站的信息，左上角有个ID，填进主题配置文件中就行，color改成自己喜欢的即可。另：

可以配置评分方式，侧栏>Rating>Setting，建议用IP address或Device(cookie)，免登录，毕竟Socials里面的选项几乎都被墙，不适合国内网络环境。
建议侧栏>Site>Setting中勾选Private选项。
上面两步勾选后别忘了点击页面右下方的SAVE SETTING绿色按钮保存。

经过上面的配置，默认最下面只会显示5颗小星星，简洁但不明了。怎么加上文字说明呢？

首先打开文件~/blog/themes/next/layout/_macro/post.swig：

{% if theme.rating.enable %}
  <div class="wp_rating">
    <div style="color:rgb(0, 0, 0); font-size:13px; letter-spacing:3px;">看完记得五星好评哦亲～</div>
    <div id="wpac-rating"></div>
  </div>
{% endif %}

然后Ctrl+F搜rating找到这段，对比我给出的，在适当的位置，加上自己想要的说明和样式即可。

最后，记得点这里给我五星好评哦亲～

侧栏加入已运行的时间

首先在文件~/blog/themes/next/layout/_custom/sidebar.swig中加入下面代码，Date的值改为你自己的：²

<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

然后修改~/blog/themes/next/layout/_macro/sidebar.swig：

{# Blogroll #}
{% if theme.links %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
    <div class="links-of-blogroll-title">
      <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
      {{ theme.links_title }} 
      <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
    </div>
    <ul class="links-of-blogroll-list">
      {% for name, link in theme.links %}
        <li class="links-of-blogroll-item">
          <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
        </li>
      {% endfor %}
    </ul>
{# 移动到这下面 #}
{% include '../_custom/sidebar.swig' %}
  </div>
{# 原位置 #}
{% endif %}

这样就可以了，当然，要是不喜欢颜色，感觉不好看，就可以在上文所提的custom.styl加入：

// 时间
#days {
    display: block;
    color: rgba(34, 244, 246, 0.75);
    font-size: 13px;
    margin-top: 15px;
}

里面的值F12调成自己喜欢的，修改即可。要是不想放在侧栏，想放在页脚，自己应该能折腾。

添加Top5页面

前提是在主题配置文件_config.yml中开启了leancloud_visitors，开启方法见上文中我的主题配置文件中的链接。

首先新建页面：

hexo new page "top"

然后在主题配置文件_config.yml中加上菜单top和它的icon：

menu:
  top: /top
  
menu_icons:
  top: signal

接着在~/blog/themes/next/languages/zh_Hans.yml语言翻译文件中加上菜单top：

注意：如果你的站点配置文件中的languages写的不是zh-Hans，那么这里请更改相应语言配置文件。

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: Top5 /*可以不为Top5，随便取*/

最后，编辑第一步新建页面生成的~/blog/source/top/index.md文件：³

---
title: Top5 /*可以不为Top5，随便取*/
comments: false
keywords: top,文章阅读量排行榜
---
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
  var time=0
  var title=""
  var url=""
  var query = new AV.Query('Counter');
  query.notEqualTo('id',0);
  query.descending('time');
  query.limit(5);
  query.find().then(function (todo) {
    for (var i=0;i<5;i++){ 
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      var content="<a href='"+"https://reuixiy.github.io"+url+"'>"+title+"</font>"+"</a>"+"<br>"+"<font color='#000'>"+"阅读次数："+time+"<br><br>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

必须将里面的里面的app_id和app_key替换为你的主题配置文件中的值，其它可以自己看情况更改。然后，修改样式可以在custom.styl中加入自定义代码：

// 页面top5
#top {
    display: block;
    text-align: center;
    margin-top: 50px;
}

Okay! 完成了！不过还有几点需要注意：

如果你在设置>安全中心中，设置了Web安全域名，但没有将http://localhost:4000加入，那么本地调试将看不到，可以先将之加入，调试完后删除。
如果你发现文章标题显示不对，这是由于之前你更改过文章标题导致的，在存储>Counter更改title即可。

另外，应该也可以按类似的方式，利用JS代码，将评分（rating）高/多的文章，评论（HyperComments）多的文章，也加入这个页面，不过现在博客的阅读量还不多，我暂时没折腾（其实也不太会）。如果你实现了，麻烦告诉我哦～

利用gulp压缩代码

右键查看网页源代码发现有大量留白，咋整？利用gulp。首先全局安装：⁴

npm install gulp -g

然后到博客文件夹根目录：

npm install gulp gulp-minify-css gulp-htmlmin gulp-htmlclean --save

接着在博客文件夹根目录新建gulpfile.js：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 执行 gulp 命令时执行的任务
gulp.task('default', ['minify-html', 'minify-css']);

最后：

hexo clean
hexo g
gulp
hexo d

我没有压缩JavaScript，因为我发现会报错，实际也并不需要，因为大部分JavaScript都已压缩过。

其次，这里的这段代码执行gulp后不支持hexo s本地调试，且必须deploy到Github Pages上才能查看到效果，记得在哪看过有人有解决方法，需要的自己Google。

另外，可能会产生一些奇怪的bug，没看到最好，要是看到了的话就自己解决吧～[逃……]

让页脚的心跳动起来

首先编辑~/blog/themes/next/layout/_partials/footer.swig：

在下面这行代码中，加上id="heart"
<span class="with-love" id="heart">

然后编辑custom.styl，加入：

// 跳动的心
@keyframes heartAnimate { 
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: #ff71a8;
}

color的值可以改成你自己喜欢的，灵感来自DIYgod大佬的博客，CSS代码参考这篇文章。

页脚加上微信二维码

主题默认的微信订阅个人感觉不美观，看到很多网站都是在页脚有个微信的logo，然后鼠标移动到上面便会显示二维码，这样感觉很棒。

首先编辑~/blog/themes/next/layout/_partials/footer.swig，在最后加上下面代码：

<div class="weixin-box">
  <div class="weixin-menu">
    <div class="weixin-hover"></div>
  </div>
</div>

然后编辑custom.styl，加入：

// 微信订阅号
.weixin-box {
    position: absolute;
    bottom: 43px;
    left: 10px;
    text-align: center;
    font-size: 10px;
}
.weixin-menu {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    border-radius: 5px;
    background: url(https://微信的logo.svg);
    background-size: 24px 24px;
}
.weixin-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0px;
    width: 0px;
    border-radius: 3px;
    box-shadow: 0 1.5px 10px 0 rgba(197, 197, 197, 0.5);
    background: url(https://二维码.svg);
    background-size: 150px 150px;
    transition: all 0.35s ease-in-out;
}
.weixin-menu:hover .weixin-hover {
    bottom: 24px;
    left: 24px;
    height: 150px;
    width: 150px;
    background: url(https://二维码.svg);
    background-size: 150px 150px;
}

图片务必用矢量图svg格式，否则手机上显示效果很差，其它的自己看情况更改。微信logo的图片我准备好了，点击下载wechat.svg(1.6 KB)。二维码怎么弄成svg格式呢，安利个网站，下载svg格式的就行。

改好后效果超赞有木有？我参考了这个代码。

如果你和我一样个性化了网站的整体布局颜色，那么默认的标签云页面可能看起来很丑，怎么更改？

修改~/blog/themes/next/layout/page.swig：

{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

修改对应参数值即可，参数说明见Hexo官方文档，颜色可以参考这个网站，自己去纠结……

进阶写出优雅文章

博客搭好了，只能说有个漂亮的壳子，内容丰富且颜值高的文章才是真正的精华。文章内容只能靠自己，不过这里教你几招提高文章的颜值的方法。

Markdown的使用

Markdown的目标是实现「易读易写」。

不过最需要强调的便是它的可读性。一份使用Markdown格式撰写的文件应该可以直接以纯文字发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown语法受到一些既有text-to-HTML格式的影响，包括Setext、atx、Textile、reStructuredText、Grutatext和EtText，然而最大灵感来源其实是纯文字的电子邮件格式。

因此Markdown的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像*强调*。Markdown的清单看起来，嗯，就是清单。假如你有使用过电子邮件，区块引言看起来就真的像是引用一段文字。⁵

Markdown相关教程

这是写博文必须掌握的技能哦，一开始可能比较懵，不过多写几篇就好啦～

1.Markdown 从入门到进阶

2.Hexo下的Markdown语法(GFM)写博客

3.Markdown教程

4.Markdown，你只需要掌握这几个

5.Cmd Markdown 简明语法手册

我个人的总结

有些用Markdwon的语法无法实现，或者用Markdwon的语法有时达不到预期效果，这时可以考虑用HTML和CSS了。

1.分割线

<hr>
注意事项：在XHTML中，<hr> 必须被正确地关闭，比如 <hr />。不过这里直接写<hr>也有效果，所以就偷偷懒。6

2.空行

<br>
注意事项同上。

3.引用

<blockquote>引用内容</blockquote>
/*样式修改请参考上文的修改custom.styl*/
如果前后间隙很小，可以这样写：
<p><blockquote>引用内容</blockquote></p>

效果：

引用内容

4.居中和右对齐

居中：
<center>内容</center>
右对齐：
<div style="text-align:right">内容</div>

5.字体大小和颜色

<font color="#xxxxxx" size="number">内容</font>
/*详细请查看http://www.w3school.com.cn/tags/tag_font.asp*/

如何使用emoji

[原方法]

在这个表情横行的时代，使用emoji似乎已经是日常。之前一直搜索相关插件，安装了很多，但都失败了。后来发现直接Copy，Paste就能用😆，可以去这个网站Copy。

但是有个缺点，就是不同系统，不同浏览器，渲染的效果不同，有些甚至不能显示。

[2017.08.20更新]

上面方法Copy的是Unicode，因此显示时有上面这个缺点，但是我们也可以直接调用图片，保证显示效果一致。但是NexT主题的相关样式会干扰emoji图片的显示效果，所以要在custom.styl中加代码，修改样式。

另：无论主题配置文件中的fancybox的值是true还是false，对此都没影响。

1.首先编辑~/blog/themes/next/source/css/_custom/custom.styl，往里面加入：

// 自定义emoji样式
img#github-emoji {
    margin: 0;
    padding: 0;
    display: inline !important;
    vertical-align: bottom;
    border: none;
    cursor: text;
}
// 文章超链接样式（为emoji特设）
// color的值可以改成你博客自己的！
.post-body a {
    color: #0593d3;
    border-bottom: none;
    text-decoration: underline;
}
.post-body a:hover {
    color: #ff7600;
    border-bottom: none;
    text-decoration: underline;
}
// 标签云页面样式（为emoji特设）
.tag-cloud a {
    border-bottom: 1px solid #0593d3;
    text-decoration: none;
}
.tag-cloud a:hover {
    border-bottom: 1px solid #ff7600;
    text-decoration: none;
}
// 阅读更多按钮样式（为emoji特设）
.post-button .btn {
    border-bottom: 1px solid #0593d3;
    text-decoration: none;
}
.post-button .btn:hover {
    border-bottom: 1px solid #ff7600;
    text-decoration: none;
}

2.然后在文章中引用：

<img id="github-emoji" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f602.png" height="20" width="20">

效果：，换emoji只用换emoji的图片名1f602.png即可。

有点麻烦的就是找到这个emoji的图片名：

输入法输入想用的emoji直接Google到其名字，或者打开Emoji Cheat Sheet找到emoji的名字。
然后打开Github Emojis API快捷键搜索（Ctrl + F），输入emoji的名字，即可找到emoji的图片名。

方法是我看一个Hexo插件的README自己摸索出来的，当然用途不止于emoji。手机里的各种表情包，传到自己的云存储，然后改下URL，看情况改下height和width的值即可啦，GIF也可以哦～

当然，还有颜文字(ﾉ*･ω･)ﾉ。

插入音乐和视频

音乐的话，网易云音乐的外链很好用，不仅有可以单曲，还能有歌单，有兴趣的自己去网易云音乐找首歌尝试。但是有一些音乐因为版权原因放不了，还有就是不完全支持https，导致小绿锁不见了。要解决这些缺点，就需要安装插件。

音乐

可以直接用HTML的标签，写法如下：

<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

其次就是用插件，有显示歌词功能，也美观，建议使用这种方法。首先在博客文件夹根目录：

npm install --save hexo-tag-aplayer

然后文章中加入下面的内容：

{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

效果，在这博客的music标签里自己找一篇文章看看。

注意：如果lrc用的是这种URL形式，hexo g时请保持网络通畅，否则你可以试试。

查看网页源代码发现：单独一首歌，showlrc的默认值为2，由这里得知，值为2时会通过JS调用歌词文件，并直接将歌词写入页面的HTML代码中，所以请保持网络通畅。

另外可以支持歌单：

{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

效果可以见我的ABOUT页面，里面的详细参数见README和这插件的“母亲”Aplayer的官方文档。

关于lrc歌词，可以用工具下载网易云音乐的歌词，另发现暂时不支持offset参数。

当然，如果那歌词很操蛋，有错误（比如字母大小写和标点符号乱加）或者时间完全对不上，然后你也和我一样是个完美主义者，那接下来就是令人窒息的操作了，一句一句自己查看修改……

视频

与音频相同，可以直接用HTML的标签，写法如下：

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

一样的，还可以用插件，功能更加强大，比如可以弹幕，非常建议使用。首先在博客文件夹根目录：

npm install --save hexo-tag-dplayer

然后文章中加入下面的内容：

{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=true" %}

要使用弹幕，必须有api和id两项，并且若使用的是官方的api地址（即上面的），id的值不能与这个列表的值一样。id的值自己随便取，唯一要求就是前面这点。

如果唯一要求难倒了你，可以使用这个工具将一段与众不同的文字生成一段看起来毫无意义的哈希值，这样看起来是不是好多了。

效果，在这博客的video标签里自己找一篇文章看看。

当然，这个插件的功能还有很多，可以去README和这插件的“母亲”Dplayer的官方文档看看。

好玩的写作样式

用一些特殊的样式，可以增加文章的可读性。

在文档中增加图标

支持Markdown
Hexo支持GitHub Flavored Markdown的所有功能，甚至可以整合Octopress的大多数插件。
一件部署
只需一条指令即可部署到Github Pages，或其他网站。
丰富的插件
Hexo拥有强大的插件系统，安装插件可以让Hexo支持Jade,CoffeeScript。

采用的是Font Awesome的图标。⁷

更多好玩的样式点击：http://ookamiantd.top/2017/build-blog-hexo-advanced/#好玩的样式

文本居中的引用

<blockquote class="blockquote-center">这里自己加文字</blockquote>

效果：

人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

更多NexT主题标签样式，请点击：http://theme-next.iissnan.com/tag-plugins.html

自定义标签样式

比如我自定义的一个blockquote的样式，首先在custom.styl中加入代码：

// 自定义的引用样式
blockquote.question {
    padding-left: 25px;
    border-left: 3px solid rgba(5, 154, 37, 0.75);
    background: rgba(255, 255, 255, 0.5);
}

question是随便取的，只要不与当前现有的class冲突就行，然后写作时：

<p><blockquote class="question">内容</blockquote></p>

效果：

内容

用相同方法，可以私人定制其它HTML标签的样式，如果你是一个和我一样的小白，可以点击这里了解了解。

文章的模板文件

如果你是用hexo new post “title”新建的文章，那么其实它就是从~/blog/scaffolds/post.md“复制”了一份到~/blog/source/_posts下，所以这也意味着：

你可以直接通过在~/blog/source/_posts下新建.md结尾的文件来写新的文章。
你可以自定义~/blog/scaffolds/post.md，从而每次命令行新建的文章都会有你自定义的内容。

但是注意，如果自己直接新建文件，一定要记得加上文件最上方的参数，即下面的相关内容，还有编码请用UTF-8。

关于文件最上方的参数，参见Hexo官方文档，下面是我的总结：

注意！每一项的:后面均有一个空格
title: /*文章标题，可以为中文*/
date: /*日期，如果自己手动添加，请按固定格式*/
permalink: /*永久链接，如果设置，且在站点配置文件下的permalink配置了title，则可以替换title*/
categories: /*分类，支持多级，比如：
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art*/
tags: /*标签，多个可以这样写[标签1,标签2,标签3]*/
description: /*描述，加了会在每篇文章的开头显示，并且作为网页的description元数据。如果不写，则自动取<!-- more -->之前作为网页的description元数据*/
keywords: /*关键字，并且作为网页的keywords元数据。如果不写，则自动取tags里的项作为网页的keywords元数据*/
comments: /*是否开启评论*/
type: /*类型*/
layout: /*页面布局，404页面可能可以用到，将其值改为false*/
top: /*文章置顶，此项只有参考操作26(http://shenzekun.cn/hexo的next主题个性化配置教程.html)，否则请勿添加*/
password: /*文章密码，此项只有参考操作24(http://shenzekun.cn/hexo的next主题个性化配置教程.html)，否则请勿添加。发现还是有bug的，就是右键在新标签中打开，然后无论是否输入密码，都能看到内容*/

tip：灵活利用permalink，如果你是一个和我一样希望链接不会出现中文的人。

最后贴出我的post.md：

---
title: {{ title }}
date: {{ date }}
permalink:
categories:
tags: []
description:
keywords:
---
<hr>
<p><blockquote></blockquote></p> /*哈哈哈，其实Markdown可以直接写 > */
<p><img src="https://" alt="" style="width:100%"></p>
<!-- more -->
##
##
##
<hr>

结尾求大佬和结束语

终于结束了，哈哈哈哈哈～折腾一番，有了自己的博客，另外知道了一点HTML，CSS和JavaScript的知识，收藏夹里多了很多大佬的博客。

移动端顶部菜单

NexT主题移动端的顶部菜单个人感觉没啥特色，但自己的能力又还没到自己造轮子的地步，所以求大佬。个人比较喜欢这两个Hexo主题的移动端顶部菜单：

hexo-theme-tranquilpeak，demo。
hexo-theme-yilia，demo。

替换fancybox

个人感觉fancybox用着不太爽，上面两个主题的感觉就很棒：

hexo-theme-yilia，demo。
hexo-theme-tranquilpeak，demo。

特别是yilia的移动端手势操作，很赞，求大佬移植到NexT！还有一个Github很棒的项目Fluidbox。

结束语

毕竟只是小白，本文如有错误，欢迎评论指出。也欢迎你把这篇文章加入收藏夹，毕竟NexT主题一直在更新，会有一些新的功能和配置，这篇文章自然也会一直保持更新。

如果转载，麻烦给个本文的链接，因为如果自己或网友发现文章有错误，我会在这里更正，留个本文的链接，防止我暂时的疏漏耽误了他人宝贵的时间。

1.参考：https://github.com/ahonn/hexo-theme-even/issues/69 ↩
2.来源：http://lovekernel.com/2017/hexo博客构建笔记/ ↩
3.参考：http://lovekernel.com/2017/hexo博客构建笔记/ ↩
4.参考：https://leaferx.online/2017/06/16/use-gulp-to-minimize/ ↩
5.来源：http://markdown.tw/ ↩
6.参考：http://www.w3school.com.cn/tags/tag_hr.asp ↩
7.来源：http://ookamiantd.top/2017/build-blog-hexo-advanced/ ↩