写在前面
本文为个人前一篇文章的后续篇，前文主要介绍了如何搭建一个个人网站以及绑定域名等相关内容，还没有建站的伙伴们可以看一下前文，已经搭建好的就可以忽略了。
本文的优化是基于Hexo的NexT主题的，其他主题的疑问也可以在后台或评论区一起沟通交流。目录
1 实用性优化
- 基本使用（
_config.yml文件配置） - 添加RSS
- 添加标签、分类等页面
- 设置网站icon
- 添加侧边栏社交链接
- 添加侧边栏友情链接
- 底部显示建站时间和图标的修改
- 微信支付宝打赏功能
- 关闭网站动画效果
- 设置第三方JS库
- 添加评论系统
- 统计访客量以及文章阅读量
- 阅读次数统计（基于LanCloud）
- 字数统计
- 增加版权信息
- 添加文章分享功能
- 文章排序优先级设置
- 添加站内搜索功能
- DaoVoice在线联系
2 个性化优化
- 设置字体
- 设置代码高亮主题
- 左上角或右上角的Github样式
- 添加背景动画
- 添加顶部加载条
- 点击出现小爱心效果
- 修改文章链接文本样式
- 修改文章底部标签样式
- 文章末尾统一添加“文本结束”标记
- 修改作者头像并旋转
- 文章添加阴影效果
- 修改打赏部分字体动画
- 自定义鼠标样式
- 添加看板娘
正文
以下修改保存后均可通过hexo g && hexo s指令在本地http://localhost:4000查看修改，另外通过hexo d发布到GitHub pages 或 Coding pages上面通过绑定的域名在线查看效果。
实用性优化
基本使用
上一篇文章已经讲过如何安装Hexo，不了解的小伙伴可以参考一下我的上一篇文章，或者访问 来了解如何安装Hexo。
在Hexo中有两个很重要的名为_config.yml的文件，其中一个在站点安装的根目录下，另一个在主题目录下。前者提供了Hexo自身的一些基本配置信息，后者为你所安装的主题的相关配置。为了方便区分，我们把前者称为站点配置文件，后者称为主题配置文件。
站点配置文件
文件路径站点根目录/_config.yml，编辑软件推荐使用Sublime Text 。
# Sitetitle: Alvabillsubtitle: Stay Hungry, Stay Foolishauthor: Alvabilldescription: "Alvabill个人站，主要涉及前端知识共享、实践教程、前沿技术共同学习等方面" #网站描述 SEOlanguage: entimezone: Asia/Shanghai
“title”：博客的名称。
“subtitle”：根据主题的不同，有的会显示有的不会显示。“description”：主要用于SEO，告诉搜索引擎一个关于站点的简单描述，通常建议在其中包含网站的关键词。“author”：作者名称，用于主题显示文章的作者。“language”：语言会对应的解析正在应用的主题中的languages文件夹下的不同语言文件。所以这里的名称要和languages文件夹下的语言文件名称一致。“timezone”：可不填写。# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://alvabill.mlroot: /permalink: :title/permalink_defaults:
“url”：一般填写自己的站点链接。
“root”：设置根目录的位置。如果你的网站存放在子目录中，例如http://yoursite.com/blog，则应该将你的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。“permalink”：生成的链接的格式。带井号的是默认的格式，带有日期感觉怪怪的，改成了自己喜欢的格式。规则也比较简单，标签前面要加英文冒号。“permalink_defaults”: 生成链接中各部分的默认值 # Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render: - README.md - CNAME
目录一般不需要修改，这里需要改动的是skip_render，跳过指定文件的渲染，这里写上去着两个文件名便可，在上一篇文章中已经详细描述过这里就不累赘了。
# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight: enable: true line_number: true auto_detect: false tab_replace:
书写相关的设置
“new_post_name”：新的博文的文件名“default_layout:“ 默认布局“filename_case: 0“ #把文件名称转换为 (1) 小写或 (2) 大写“render_drafts: false“ 是否显示草稿“post_asset_folder: false“ #是否启动资源文件夹“relative_link: false“ #把链接改为与根目录的相对位址“future: true ““highlight:“ #代码块的设置，Hexo自带的代码高亮插件# Category & Tagdefault_category: uncategorizedcategory_map:tag_map:
分类和标签的设置
“default_category”：如果撰写文章时没有设置分类，默认的分类选择。“category_map”：用于映射分类的别名。“tag_map”：用法和分类别名是一样的。# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git repository: github: git@github.com:Alvabill/Alvabill.github.io.git,master coding: git@git.coding.net:Alvabill/Alvabill.git,master
“theme”：主题拓展，可以在主题商店选择其他主题，这里使用next
“deploy”：部署方式，已经详细描述，不再累赘。主题配置文件
文件路径站点根目录/themes/next/_config.yml，编辑软件推荐使用Sublime Text 。
# ---------------------------------------------------------------# Scheme Settings# ---------------------------------------------------------------# Schemes # NexT 主题提供三种布局#scheme: Musescheme: Mist#scheme: Pisces#scheme: Gemini
主题选择，在前面加#注释掉其他的，这里我们选Mist，其他主题你们也可以体验一下，不过不保证本教程的优化全部适配哦，不过选择其他主题的小伙伴遇到的问题也欢迎在评论区提出一起交流。
添加RSS
在主题配置文件中有NexT默认的RSS设置，默认为留空，这时使用 Hexo 生成的 Feed 链接，需要先安装 插件。
在站点根目录打开git bash，安装插件：$ npm install --save hexo-generator-feed
修改站点配置文件，在最后添加以下代码：
feed: # RSS订阅插件 type: atom path: atom.xml limit: 0plugins: hexo-generate-feed
修改主题配置文件如下：
# 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: /atom.xml
实现效果：
添加标签、分类等页面
1 修改主题配置文件，在菜单项添加以下内容：
# ---------------------------------------------------------------# Menu Settings# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)menu: home: / archives: /archives/ tags: /tags/ categories: /categories/ about: /about/ #sitemap: /sitemap.xml #commonweal: /404/
这里可以添加图标，个人不是很喜欢所以没有添加，图标的代码就在以上代码的下边，可以自行修改体验。
2 新建页面
在站点根目录输入以下代码新建页面：$ hexo new page tags$ hexo new page categories$ hexo new page about
archives页面不需要新建，NexT主题自带了；tags、categories页面需要设置类型，即打开站点根目录\source\tags、站点根目录\source\categories分别进行修改：
如果有集成评论服务，页面也会带有评论。因为后面我们会添加评论系统所以这里需要添加字段 comments 并将值设置为 false。
设置网站icon
主题配置文件中第一行代码就是网站icon设置，这里你只需要找到你喜欢的logo把它制作成ico格式然后改名favicon.ico，放到/themes/next/source/images下面即可。
# Put your favicon.ico into `hexo-site/source/` directory.favicon: /favicon.ico # 网站logo
添加侧边栏社交链接
主要修改主题配置文件的社交链接和对应图标：
# Social Links# Key is the link label showing to end users.# Value is the target link (E.g. GitHub: https://github.com/iissnan)social: # 添加你的社交账号 #LinkLabel: Link GitHub: https://github.com/Alvabill fcc: https://www.freecodecamp.cn/alvabill 简书: https://www.jianshu.com/u/439a6eee60e1 CSDN: http://blog.csdn.net/weixin_38796712# Social Links Icons# Icon Mapping:# Map a menu item to a specific FontAwesome icon name.# Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.# When an globe mask icon presenting up means that the item has no mapping icon.social_icons: enable: true icons_only: false transition: false # Icon Mappings. # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome fcc: free-code-camp GitHub: github 简书: book CSDN: rotate-right
实现效果如下：
添加侧边栏友情链接
修改主题配置文件：
# Blog rolls 推荐阅读links_title: Links#links_layout: blocklinks_layout: inlinelinks: Web前端导航: http://www.alloyteam.com/nav/ 创造狮导航: http://www.chuangzaoshi.com/code 前端书籍资料: http://www.36zhen.com/t?id=3448 掘金酱: http://e.xitu.io/ V2EX: https://www.v2ex.com/ 印记中文: https://www.v2ex.com/
实现效果：
底部显示建站时间和图标修改
修改主题配置文件：
# Specify the date when the site was setupsince: 2018 # 建站年份# icon between year and author @Footerauthoricon: snowflake-o
实现效果：
雪花图标需要用到最新的fa图标库，后面会介绍如何设置默认库。
微信支付宝打赏功能
在主题配置文件中的微信or支付宝收款地址处填入收款二维码图片即可：
# Reward#reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！wechatpay: http://p3dm71oa7.bkt.clouddn.com/wcpay.pngalipay: http://p3dm71oa7.bkt.clouddn.com/zfbpay.jpg#bitcoin: /images/bitcoin.png
实现效果：
关闭网站动画效果
为了追求更快的响应速度我们可以把网站的大部分动画关掉，这里修改主题配置文件的一行代码即可：
# Motionuse_motion: [false/true]
设置第三方JS库
在主题配置文件中设定成合适的 CDN 地址，此特性可以加速静态资源（JavaScript 第三方库）的加载。
例如：# Script Vendors.# Set a CDN address for the vendor you want to customize.# For example# mquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js# Be aware that you should use the same version as internal ones to avoid potential problems.# Please use the https protocol of CDN files when you enable https on your site.vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js
添加评论系统
NexT支持的第三方的评论系统有很多，不过不少已经关闭不再可用了，而且对于国内来说比较友好的现在应该就只有，当然喜欢折腾的小伙伴可以尝试一下其他的或者自建评论系统。这里就先介绍目前最简单可行的方案，也就是来必力。
获取来必力id：
登陆 注册获取，这里要注意，这个韩国的系统注册啥的真的太慢了，所以要记住不要耐不住关闭页面或者狂刷新，耐心等待就好。注册后点击导航上边的安装，选择免费的city版本：
复制上边的id，在主题配置文件里面搜索livere_uid，在后面添加来必力id即可：
# Support for LiveRe comments system.# You can get your uid from https://livere.com/insight/myCode (General web site)livere_uid: {你的来必力id} 另外可以点击用户头像进入管理界面个性化你的评论系统：
最终实现效果:
统计访客量以及文章阅读量
NexT主题集成了不蒜子统计功能：
# Show PV/UV of the website/page with busuanzi.# Get more information on http://ibruce.info/2015/04/04/busuanzi/# 不蒜子统计功能busuanzi_count: # count values only if the other configs are false enable: false # custom uv span for the whole site site_uv: false site_uv_header: site_uv_footer: # custom pv span for the whole site site_pv: false site_pv_header: site_pv_footer: # custom pv span for one page only page_pv: false page_pv_header: page_pv_footer:
当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。
site_uv: true时，代表在页面底部显示站点的UV值。当site_pv: true时，代表在页面底部显示站点的PV值。当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。site_uv_header和site_uv_footer这几个为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。示例： enable: true# 效果：本站访客数12345人次site_uv: truesite_uv_header: 本站访客数site_uv_footer: 人次# 效果：本站总访问量12345次（一般不开启这个）site_pv: truesite_pv_header: 本站总访问量site_pv_footer: 次# 效果：本文总阅读量12345次page_pv: truepage_pv_header: 本文总阅读量page_pv_footer: 次
阅读次数统计（基于LeanCloud）
相比不蒜子的统计，的文章阅读量统计更加稳定靠谱，所以本人也把网站的文章内统计改为LeanCloud的了。
设置方法参考该文章--实现效果：
字数统计
用于统计文章的字数以及分析出阅读时间。
在主题配置文件中，搜索wordcount，设置为下面这样就可以了： # Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true min2read: true wordcount: true separated_meta: true
再打开\themes\next\layout\_macro\post.swig文件，在leancloud-visitors-count后面位置添加一个分割符：
另外，在/themes/next/layout/_partials/footer.swig文件endif %}前加上下面代码可以实现在站点底部统计全站字数：
Total Words:{ { totalcount(site) }}
实现效果：
如果无法显示可能是hexo-wordcount插件没有安装，git bash在网站根目录安装一下就可以：
$ npm install hexo-wordcount --save
增加版权信息
在目录themes/next/layout/_macro/下添加my-copyright.swig，代码如下：
{% if page.copyright %} 本文标题:{ { page.title }}
文章作者:{ { theme.author }}
发布时间:{
{ page.date.format("YYYY年MM月DD日 - HH:MM") }} 最后更新:{
{ page.updated.format("YYYY年MM月DD日 - HH:MM") }} 许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
{% endif %} 在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl：
.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;} 修改themes/next/layout/_macro/post.swig，在代码:
{% if theme.wechat_subscriber.enabled and not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %} 前面添加代码：
{% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}
修改themes/next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：
@import "my-post-copyright"
最后到站点根目录/scaffolds/post.md，在两个---中间增加一行：
copyright: true
之后的每一篇文章都会自己加上版权信息，之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息。
添加分享文章功能
这里我们使用，为什么呢，晒一下我的样式你就知道了：
add_this_id，去掉前面的注释，添加上你的AddThis ID就可以了。 # Share 分享#jiathis: true# Warning: JiaThis does not support https. 博主实测支持httpsadd_this_id: {your AddThis ID} 具体添加方式如下，可以选择多种样式：
添加文章评分功能
通过来给网站每篇文章添加评分系统，效果如下：
widgetpack添加即可: # Star rating support to each article.# To get your ID visit https://widgetpack.comrating: enable: true id: {your ID} # color: fc6423 这里建议设置为按ip地址记录评分，比较方便：
文章排序优先级设置
修改hero-generator-index插件，把文件node_modules/hexo-generator-index/lib/generator.js内的代码替换为：
'use strict';var pagination = require('hexo-pagination');module.exports = function(locals){ var config = this.config; var posts = locals.posts; posts.data = posts.data.sort(function(a, b) { if(a.top && b.top) { // 两篇文章top都有定义 if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排 else return b.top - a.top; // 否则按照top值降序排 } else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233） return -1; } else if(!a.top && b.top) { return 1; } else return b.date - a.date; // 都没定义按照文章日期降序排 }); var paginationDir = config.pagination_dir || 'page'; return pagination('', posts, { perPage: config.index_generator.per_page, layout: ['index', 'archive'], format: paginationDir + '/%d/', data: { __index: true } });}; 在\scaffolds\post.md头部---中添加以下代码：
top:
以后新建文章就可以给文章的top赋值，数值越大优先级越高。
已经写好的文章在对应的md文件头部添加 top：{number}即可 添加站内搜索功能
这里使用，其他的都不太靠谱。
前往Algolia注册页面，注册一个新账户。可以使用GitHub或者Google账户直接登录，注册后的14天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户总共有10,000条记录，每月有100,000的可以操作数。注册完成后，创建一个新的Index，这个Index将在后面使用。
Hexo Algolia扩展，这个扩展的功能是搜集站点的内容并通过API发送给Algolia。前往站点根目录，执行命令安装： $ npm install --save hexo-algolia
找到新建的Index对应的Key，复制下面的App ID和API Key，同时修改权限:
在站点配置文件（注意是站点配置文件）末尾，新增配置代码：
#添加搜索algolia: applicationID: '{your appID}' apiKey: 'your API Key' indexName: 'your Index name' chunkSize: 5000 在站点根目录执行以下代码，更新Index(每次更新文章都需要执行一次)，即上传站点内容到algolia：
$ export HEXO_ALGOLIA_INDEXING_KEY={your API Key}$ hexo algolia 更改主题配置文件，搜索algolia_search：
# Algolia Searchalgolia_search: enable: true hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" 将enable改为true即可，根据需要你可以调整labels中的文本。
DaoVoice 在线联系
实现效果：
5ea4435c，或者直接点击邀请码的链接。注册后就可以查看你的app_id: 
app_id，打开/themes/next/layout/_partials/head.swig,写下如下代码： {% if theme.daovoice %} {% endif %} 接着打开主题配置文件，在最后写下如下代码：
# Online contactdaovoice: truedaovoice_app_id: {your app_id} 具体样式设计可以在 应用设置-->聊天设置 后边改。
个性化优化
设置字体
在主题配置文件中设置，例如：
font: enable: true # 外链字体库地址，例如 //fonts.googleapis.com (默认值) host: # 全局字体，应用在 body 元素上 global: external: true family: Monda # 标题字体 (h1, h2, h3, h4, h5, h6) headings: external: true family: Roboto Slab # 文章字体 posts: external: true family: # Logo 字体 logo: external: true family: Lobster Two size: 24 # 代码字体，应用于 code 以及代码块 codes: external: true family: PT Mono
设置代码高亮主题
NexT 默认使用的是 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：
# Code Highlight theme# Available value:# normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: normal
效果：
设置小型代码块颜色
修改\themes\next\source\css\_variables\base.styl文件，修改$code-background和$code-foreground的值：
// Code & Code Blocks// --------------------------------------------------$code-font-family = $font-family-monospace$code-font-size = 13px$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'$code-border-radius = 3px$code-foreground = $black-light$code-background = $gainsboro 左上角或右上角的Github样式
实现效果有两种：
具体实现方式便是到或者的网站中选择你喜欢的样式，复制其中的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。 
添加背景动画
NexT已经自带了多种背景动画效果，你只需要根据需求在主题配置文件修改其中一个为true即可。
# Canvas-nest canvas_nest: false# three_wavesthree_waves: false# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false# Only fit scheme Pisces# Canvas-ribboncanvas_ribbon: false
实现效果：
添加顶部加载条
在主题配置文件中搜索pace：
# 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-simplepace_theme: pace-theme-minimal
这里有多种主题选择，根据自己喜好选择主题修改便可。
点击出现小爱心效果
效果：
将文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码： 修改文章内链接文本样式
修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：
// 文章内链接文本样式.post-body p a{ color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; }} 修改文章底部标签样式
修改/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
文章末尾统一添加“本文结束”标记
在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容：
{% if not is_index %}-------------The End-------------{% endif %}
接着打开\themes\next\layout\_macro\post.swig文件，在这个位置添加代码：
{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}
然后打开主题配置文件，在末尾添加：
# 文章末尾添加“本文结束”标记passage_end_tag: enabled: true
实现效果：
修改作者头像并旋转
打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：
.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out;}img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg);}/* Z 轴旋转动画 */@-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); }}@-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); }}@keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); }} 文章添加阴影效果
打开\themes\next\source\css\_custom\custom.styl,向里面加入：
// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } 实现效果：
修改打赏部分字体动画
Next打赏部分的动画是鬼畜一般的不停地抖动，看着很难受，所以博主把它改为只循环三遍，打开文件themes/next/source/css/_common/components/post/post-reward.styl，把微信和支付宝的改为如下：
#wechat:hover p{ animation: roll 0.1s 3 linear; -webkit-animation: roll 0.1s 3 linear; -moz-animation: roll 0.1s 3 linear;}#alipay:hover p{ animation: roll 0.1s 3 linear; -webkit-animation: roll 0.1s 3 linear; -moz-animation: roll 0.1s 3 linear;} 自定义鼠标样式
打开themes/next/source/css/_custom/custom.styl，添加代码：
// 鼠标样式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important } 其中 url 里面必须是 ico 图片，ico 图片可以上传到网上（推荐七牛云图床），然后获取外链，复制到 url 里就行了。
添加看板娘
实现效果：
$ npm install hexo-helper-live2d --save
然后打开/themes/next/layout/_layout.swig,将下面代码放到</body>之前：
{ { live2d() }} 在站点配置文件末尾添加代码：
## 看板娘live2d: model: hijiki position: left bottom: -30 mobileShow: false #手机端不显示
具体设置可以看官方介绍--。