1.前言
在 Hexo 中有2份主要的配置文件，其名称都是_config.yml。 其中，一份位于博客根目录下，主要包含 Hexo 本身的配置；另一份位于themes/next/目录下，用于配置主题相关的选项。
2.Next主题安装
Hexo安装主题，只需要将主题文件拷贝至博客所在目录的themes目录下，修改相关配置文件即可生效。 博客所在目录下打开git bash
Git clone https://github.com/theme-next/hexo-theme-next themes/next3.启用主题
打开根目录下的_config.yml,查找theme字段，将字段改为theme: next(冒号:之后要有空格分隔，否则无效)
theme: next之后通过hexo g和hexo s，再在浏览器中访问localhost:4000即可本地预览主题效果。
4.设置站点名、作者昵称和站点描述等内容
打开根目录下的_config.yml
# Site
title: Hongery
subtitle: 记录学习中的点点滴滴
description: 直到这一刻微笑着说话为止，我至少留下了一公升眼泪
keywords:
author: Hongery
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://huangpiao.tech #绑定域名
root: / #默认根路径，指向实际的source
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: README.md # 部署的时候不包含的文件
# Writing
new_post_name: :title.md # 默认的新博文名称
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 #是否启用资源文件夹（用来存放相对路径图片或文件）
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 #博客排序
# 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 #同上
#归档页的分页设置
archive_generator: #归档页的配置
per_page: 30 #归档页每页博客数
yearly: true #按年归档
monthly: true #按月归档
#标签页的分页设置
tag_generator:
per_page: 20 #标签页每页博客数
theme: next6 #选择博客主题，名字为themes中选择的主题文件夹名称
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: #博客部署
type: git
repo:
github: https://github.com/Hongery/hongery.github.io.git
branch: master
5.选择主题风格
打开themes/next/下的_config.yml,查找scheme，可以看到如下四种不同的风格方案：
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini去掉#注释，即启用对应的scheme，博主采用Pisces主题 双栏 Scheme，大家可以依次测试效果，选择自己喜欢的scheme。
6.设置语言
编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：
language: zh-CN7.设置菜单
menu: #设置博客各个页面的相对路径，默认根路径是blog/source
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar #日历
#sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取
#commonweal: /404/ || heartbeat # 腾讯公益4048.设置头像
可以设置当鼠标放置在头像上时，头像自动旋转 编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/author.jpg #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
# If true, the avatar would be dispalyed in circle.
rounded: true #鼠标放在头像上时是否旋转
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1 #头像放缩指数
# If true, the avatar would be rotated with the cursor.
rotated: true #头像是否设为圆形，否则为矩形9.鼠标点击特效
在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
在\themes\next\layout\_layout.swig文件末尾添加：
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>10.文章结束标志
在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>然后打开主题配置文件（_config.yml),在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
11边栏设置
设置主题配置文件，其中social表示社交信息，我们可以填入我们相关的链接，格式为链接名:链接地址 || 链接图标，其中链接图标必须是FontAwesome网站中存在的图标名。
# Posts / Categories / Tags in sidebar.
site_state: true # 是否在侧边栏加入日志、分类、标签等跳转链接
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/nightmaredimple || github #
CSDN: https://blog.csdn.net/nightmare_dimple || crosshairs
#E-Mail: mailto:[email protected] || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
social_icons:
enable: true #是否显示社交图标
icons_only: false #是否仅显示社交图标
transition: true
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/nightmaredimple || Follow me on GitHub #添加右上角github绑带
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
#Title: http://example.com
# Sidebar Avatar
avatar: #头像设置
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/author.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true
# Table Of Contents in the Sidebar
toc:
enable: true #是否自动生成目录
# Automatically add list number to toc.
number: false #目录是否自动产生编号
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false #标题过长是否换行
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
max_depth: 6 #最大标题深度
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
position: left #侧边栏位置
#position: right
# Manual define the sidebar width.
# If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300
# Sidebar Display, available values (only for Muse | Mist):
# - 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.
display: post
#display: always
#display: hide
#display: remove
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 #侧边栏相对主菜单像素距离
# Back to top in sidebar.
b2t: true #是否提供一键置顶
# Scroll percent label in b2t button.
scrollpercent: true #是否显示当前阅读进度
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false #手机上是否显示侧边栏
12.设置博客底部布局
这一部分对应主题配置文件中的：
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2019 #建站时间
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart #作者图标（默认是author人像)
# If you want to animate the icon, set it to true.
animated: true #图标是否闪动
# Change the color of icon, using Hex Code.
color: "#808080" #图标颜色
# If not defined, `author` from Hexo main config will be used.
copyright: 黄飘 #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: false #是否显示 Powered by hexo
# Version info of Hexo after Hexo link (vX.X.X).
version: false #是否显示Hexo版本
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false #是否显示主题信息
# Version info of NexT after scheme info (vX.X.X).
version: false #是否显示主题版本
# -------------------------------------------------------------
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
enable: false #是否显示网站备案信息
icp:
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>
13.添加打赏功能
在主题配置文件中设置如下：
reward:
enable: true
comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg 
14.摘要功能
对于摘要显示，首先我们需要开启摘要功能，修改主题配置文件：
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true #选取博客正文<!--more-->前的内容
# Automatically saving scroll position on each post/page in cookies.
save_scroll: false
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true #自动截取摘要
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false #自动截取一定程度的摘要
length: 150
# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true #显示阅读全文按钮如果想要搭建的更完美可以参看以下链接
