最新hexo+github搭建个人博客详细教程（二）——关于博客的美化

前言

你好！ 如果你打开这篇文章说明你的博客已经搭建完成，并且爱折腾的你开始走上了美化的道路，首先说明的是本教程是针对Next主题所写，别的主题可能会出现问题。

本人公众号：希望星选【欢迎大家来撩，有意想不到你惊喜哦！】
博客地址：http://liybox.top

Next的安装配置

我们刚搭建好的博客默认主题为landscape，但是正如大家所看到的，默认主题是真的low，所以我们首先要换成Next主题。（当然主题种类有很多，Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。）

1. 我们要在博客主目录下执行：

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

2. 然后设置站点配置文件_config.yml（注意区分站点配置文件和主题配置文件）：

 theme: next

这样我们的博客主题就替换成了Next主题。

然后我们需要把主题风格改为Pisces，在主题配置文件blog/themes/next/_config.yml中的scheme改为：

 scheme: Pisces

这样初步的设计就已经做好，接下来就是美化过程了。

Next的一般配置

override：false #表示是否将主题置为默认样式
cache:
	enable:true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快
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 # 腾讯公益404

# Enable/Disable menu icons / item badges.
menu_settings:
  icons: true # 是否显示各个页面的图标
  badges: true # 是否显示分类/标签/归档页的内容量
# Schemes
scheme: Pisces

这里添加#代表的是是否注释掉，大家可以自己选择。

以上是Next主题配置文件最常规的配置，而相应的站点配置blog/_config.yml文件的基本配置为：

title: 希望星选——liybox个人博客
subtitle: 记录互联网的点滴。
description: 心有猛虎 | 细嗅蔷薇
keywords:
author: liybox
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: next #选择博客主题，名字为themes中选择的主题文件夹名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: #博客部署
  type: git
  repo: 
    github: https://github.com/liybox/liybox.github.io.git
    coding: https://git.coding.net/liybox/liybox.git	#部署到coding时添加的
  branch: master

添加博客自定义图标

我们博客的默认图标是N，不过Next支持修改图标。
博客的图标可以在easyicon、bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

favicon:
  small: /images/16x16.png
  medium: /images/32x32.png
  apple_touch_icon: /images/128x128.png
  safari_pinned_tab: /images/logo2.svg

修改作者头像并旋转

打开\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);
  }

在网站底部加上访问量

打开\themes\next\layout_partials\footer.swig文件,在copyright前加上这句话：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码，代码如下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码：

1. pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

2. uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
 本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

实现统计功能

在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

点击爆炸效果

跟那个红心是差不多的，首先在themes/next/source/js/src里面建一个叫fireworks.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,在上面写下如下代码：

{% if theme.fireworks %}
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
   <script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}

打开主题配置文件，在里面最后写下：

# Fireworks
fireworks: true

添加动态背景

上面这种只是其中一种动态背景，新版的Next主题集成了该功能，只需要在主题配置中设置如下即可，下面每个模块只设置其中一个为true，具体效果如何可自己尝试：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: # 网络背景
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1

另外需要在blog中下载相应资源包，具体见上面的链接，下面我给出canvas_nest的下载方式：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

修改标签样式

博客底部的标签样式默认为#tag，我们可以将其改成：

只需要修改模板/themes/next/layout/_macro/post.swig：

搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

文章结束标志

在路径 \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

设置博客底部布局

这一部分对应主题配置文件中的：

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>

设置RSS订阅

在博客主目录下执行：

npm install --save hexo-generator-feed

在站点配置文件中修改：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: 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

其他功能

一般情况下这样就可以了，更多配置，如打赏，订阅请大家参考以下文章：
Next使用文档：http://theme-next.iissnan.com/
还请参考CSDN，简书等相关文章！

资源干货请移步：公众号【希望星选】