Github和Hexo免费建站高级——美化篇

回顾 上一篇文章，介绍了如何搭建个人博客。今天自己搞了博客美化，说实话都不简单。虽然涉及到代码，但基本上多是复制粘贴，没一点难度。搞完博客美化就不搞了，装了好几次烦了，没技术，下面开始。

插播 就在昨天又发现了一个新玩法。 hexo高级部署教程,利用github+netlify部署 这篇文章提供的方法和我的不一样，其中他多了一个 netlify 的部署。但思路是一样的，只是静态页面我用的GitHub他用的 netlify 。放在这当个参考。

首先讲一下思路：

• 熟悉Hexo文件夹
• 选择新的模板
  模板美化
• 总体布置
• 侧边栏美化
• 页脚美化
• 文章美化

一、熟悉Hexo文件夹

下面只是部分，更多移步：Hexo配置文件详细说明

├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #说明文档
//Hexo文件夹详情
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

加粗标注的两个灰常重要，接下来用到的就是他们。

名称	作用
deploy	执行hexo deploy命令部署到GitHub上的内容目录
public	执行hexo generate命令，输出的静态网页内容目录
scaffolds	layout模板文件目录，其中的md文件可以添加编辑
scripts	扩展脚本目录，这里可以自定义一些javascript脚本
source	文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
drafts	草稿文章
posts	发布文章
themes	主题文件目录
_config.yml	全局配置文件，大多数的设置都在这里
package.json	应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

二、选择新的模板

Hexo默认的网站模板，并不能符合我们的需求，所以我们需要自己自定义模板

Hexo
主题寻找：

1. https://github.com/search?o=desc&q=topic%3Ahexo-theme&s=stars&type=Repositories
2. Hexo的官网主题专栏

推荐第一个，两种方法都是在GitHub上获取的主题 theme 第二个方法可以预览但的在页面下方跳转 GitHub官网下载。第一个方法直接获取下载，主题也是根据下载排行的。

第一个网站，按照模板的受欢迎程度进行排名，可以看到遥遥领先的第一名是一款叫作：next的主题，选用这款即可。想要了解更多，进入到这个主题，可以阅读README.md模板使用说明，还可以查看模板示例网站。

GitHub

模板

1. 下载
打开博客根目录下的themes文件夹(注：后文所说的根目录是指我的：D:\blog你的根据自己情况)，右键 Git Bash 运行下述命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next
就可以把这款主题的安装文件下载到电脑中。

2. 使用
打开D:\blog_config.yml文件，找到 theme字段，修改参数为：theme: hexo-theme-next，然后根目录运行下述命令：
hexo clean
hexo s -g
这样，便成功应用新的 next 主题，浏览器访问 :http://localhost:4000，查看一下新的博客页面。

next
当当当！是不是更清爽了，不过你可能看到的不同，没关系。这款主题包含4种风格，默认的是Muse，也可以尝试其他风格。具体操作：
打开D:\blog\theme\hexo-theme-next_config.yml，定位到Schemes，想要哪款主题就取消前面的#，我的博客使用的是Pisces风格。

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

顺便把图标注一下下，下面用到。

condorblog

三、模板美化

1. 设置网站信息

# Site
title: Condor Hero
subtitle: Divine Condor
description: 记录生活，努力学习。
keywords: 前端、学习、提升、建站、努力。
author: Condor Hero
language: zh-Hans
timezone:

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

看表根据我的模板填写。可自行修改。

2. 动图背景
实现效果图

动图背景

太玄了，影响阅读不是太喜欢，就去掉了。具体实现方法 「点击这里」

四、侧栏美化

1. 菜单设置
修改侧栏菜单，（上图我标注的①）
文件路径：D:\blog\themes\hexo-theme-next/_config.yml
把英文菜单 # 去掉，添加菜单。

menu:
  home: / || home
  about: /about/ || user
  archives: /archives/ || archive
  tags: /tags/ || tags
  categories: /categories/ || th
  schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
 # commonweal: /404/ || heartbeat

修改英文菜单对应的中文名。
文件路径：D:\blog\themes\hexo-theme-next\languages\zh-Hans.yml
修改如下：

menu:
  home: 首  页
  archives: 归  档
  categories: 分  类
  tags: 标  签
  about: 关于博主
  search: 站内搜索
  top: 最受欢迎
  schedule: 日程表
  sitemap: 站点地图
  # commonweal: 公益404

注意：两字的中间添加  可实现列对齐。

2. 新建标签、分类、关于页面

在D:/blog分别运行命令：
hexo new page "tags"
hexo new page "categories"
hexo new page "about"
然后，打开D:\blog\source就可以看到上述三个文件夹。
要添加关于博主的介绍，只需要在/about/index.md文件中，用markdown书写内容即可，写完后运行：hexo d -g，便可看到效果。

3. 侧栏社交链接图标设置
侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件中（D:\blog\themes\hexo-theme-next/_config.yml文件中）。

（1）链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

# Social links
social:
social:
  GitHub: https://github.com/condorheroblog
  E-Mail: mailto:2846124732@qq.com || envelope
  简书: https://www.jianshu.com/u/491bd4155f96
  QQ: http://sighttp.qq.com/authd?IDKEY=f67c919702f76aff21f09284308fe39875d3f6b466780165
  #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

（2）设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

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

4 添加头像并美化
博客添加头像有两种方法：第一种是放在本地文件夹中：D:\blog\public\uploads，并且命名为avatar.jpg。第二种是将图片放在七牛云中，新浪图床 然后传入链接。推荐这种方式，可以加快网页打开速度。
站点文件任意行添加下面代码：

# 添加头像
# avatar: /uploads/avatar.jpg   #方法1本地图片
avatar: https://ws3.sinaimg.cn/large/005BYqpggy1fzgzvfkc2wj30p20p2abj.jpg # 方法2网络图片
# 注意：uppoads文件夹是在主题里的文件夹，没有则新建
# D:\blog\themes\hexo-theme-next\source\uploads\avatar.jpg

头像变圆形
可参考：
头像变圆并旋转
D:\blog\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);
  }
}

5. 设置网站logo
跟设置头像其实是一个思路，都是在配置文件中引入正确的地址就可以了，不过网站的logo是对图片有要求的，我们需要在 Favicon在线制作 工具中制作32*32的.ico图片，然后放在source/images下面。然后在主题配置文件下添加主题配置文件中添加：favicon: images/favicon.ico

五、页脚的美化

1. 补充
建站时间设置/RSS设置
点击了解 什么是RSS

# 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:   #RSS

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  # 建站年份
  since: 2018           #根据实际情况修改

2. 隐藏Hexo/主题和 Next 版本

<!-- 一共两处注释-->
<!--{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}由hexo驱动-->

{% if theme.footer.theme.enable %}
  <!--<div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>版本号-->
{% endif %}

3. 时间和用户名之间添加心形
主题文件：建站时间下面修改icon: heart

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  # 建站年份
  since: 2018
  # Icon between year and copyright info.
  # 年份后面的图标，为 Font Awesome 图标
  # 自己去纠结 http://fontawesome.io/icons/
  # 然后更改名字就行，下面的有关图标的设置都一样

  # Icon between year and copyright info.
  #icon: user
  icon: heart

如果还想让心变成跳动的红心，则继续在:上面的footer.swig文件中修改：
<span class="with-love">为 <span class="with-love" id="heart"> #一定要加id=”heart”

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

接着在自定义custom.styl文件中，添加以下代码：

// 1 页脚加闪烁红心
// 自定义页脚跳动的心样式
@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: rgb(192, 0, 39);
}

4. 引入不蒜子访问量和访问人次统计

• 不蒜子的添加非常非常方便，不蒜子
  在footer.ejs中的合适位置，看你要显示在哪个地方，添加。
• 我的办法：D:blog\themes\hexo-theme-next\layout_partials\footer.swg
  添加代码如下：

<!--以下为添加的代码-->
      <!--统计start-->
        <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. 设置预览摘要
在上面我们选主题，设置完模式后，我们会发现，尽管首页显示的是所有文章的列表，但是每一篇文章都显示了所有内容，这样感觉看起来不舒服，这时候可以启用预览摘要模式，在主题配置文件中找到auto_excerpt属性，将enable设置为true ，将length设置为想要预览到的字数。

2. 添加阅读全文

实现在主页只展示部分文字，其他文字隐藏起来，通过点击’阅读更多’来阅读全文。
方法就是写每一篇文章的时候，在必要的地方添加即可。
例如：

---

title: Github+Hexo搭建你的个人博客：搭建篇
id: hexo01
categories: hexo博客
tags: [hexo,个人博客,github]标签的写法
keywords: hexo,搭建博客,github pages,next

---

4块钱,你就能够在茫茫互联网中拥有一处专属于你的小天地，丈量你走过的每一个脚印。

摘要： 对于一个不懂任何前端的纯小白来说，搭建博客是件很有挑战的事。
3. 文章摘要配图
参考这个教程即可：
http://wellliu.com/2016/12/30/%E3%80%90%E8%BD%AC%E3%80%91Blog%E6%91%98%E8%A6%81%E9%85%8D%E5%9B%BE/
附上我的设置：
在自定义文件中添加如下代码：

// img.img-topic {
//    width: 100%;
//}

//图片外部的容器方框
.out-img-topic {
  display: block;
  max-height:350px;      //图片显示高度，如果不设置则每篇文章的图片高度会不一样，看起来不协调
  margin-bottom: 24px;
  overflow: hidden;
}
//图片
img.img-topic {
  display: block ;
  margin-left: .7em;
  margin-right: .7em;
  padding: 0;
  float: right;
  clear: right;
}

// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}

4. 修改文章底部的那个带#号的标签

实现效果图

tab
具体实现方法
修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

5.添加文章搜索
安装插件
cnpm install hexo-generator-searchdb --save

站点配置文件 ，添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题配置文件 ，字段local_search

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # 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

6. 显示每篇文章的阅读量
参考这个教程即可：
http://www.jeyzhang.com/hexo-next-add-post-views.html

7. 添加打赏功能

参考下面的教程：
https://www.cnblogs.com/mrwuzs/p/7943337.html
https://blog.csdn.net/lcyaiym/article/details/76796545

---

自定义样式
不得不说next还是很人性化的，你可以个性化定制你的网站，你所有的改动（css）需要放在主题文件的source/css/_costum/costum.styl文件中，会覆盖原来的css，所以只要你不想要你修改的样式，只需要删除这个文件夹就可以了，再也不用担心还原不回去了~

美化每个人的标准不一样，以上是基本操作。这里再补充几条，以供学习。

最全Hexo安装出错案列
Hexo美化大全
hexo的next主题个性化教程：32中炫酷方式
Hexo官方开发文档

找资料发现的一个网站很不错，一看站长是 美女。贴上她的blog，学习一下：sunshine940326

全文完。。。