hexo博客的背景设置

主要有以下30种：

• 在右上角或者左上角实现fork me on github
• 添加RSS
• 添加动态背景
• 实现点击出现桃心效果
• 修改文章内链接文本样式
• 修改文章底部的那个带#号的标签
• 在每篇文章末尾统一添加“本文结束”标记
• 修改作者头像并旋转
• 博文压缩
• 修改“代码块自定义样式
• 侧边栏社交小图标设置
• 主页文章添加阴影效果
• 在网站底部加上访问量
• 添加热度
• 网站底部字数统计
• 添加 README.md 文件
• 设置网站的图标Favicon
• 实现统计功能
• 添加顶部加载条
• 在文章底部增加版权信息
• 添加网易云跟帖(跟帖关闭，已失效，改为来必力)
• 隐藏网页底部powered By Hexo / 强力驱动
• 修改网页底部的桃心
• 文章加密访问
• 添加jiathis分享
• 博文置顶
• 修改字体大小
• 修改打赏字体不闪动
• 侧边栏推荐阅读
• 自定义鼠标样式

---

1. 在右上角或者左上角实现fork me on github

实现效果图

具体实现方法

点击这里挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址

---

2.添加RSS

实现效果图

具体实现方法

切换到你的blog（我是取名blog，具体的看你们的取名是什么）的路径，例如我是在/Users/chenzekun/Code/Hexo/blog这个路径上，也就是在你的根目录下

然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)

$ npm install --save hexo-generator-feed
 
 
 

  
1
 
 
 
 

  
1
 

接下来打开画红线的文件，如下图：

在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
 
 
 

  
1
  
2
  
3
 
 
 
 

  
1
  
2
  
3
 

然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

# 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
  
2
  
3
  
4
 
 
 
 

  
1
  
2
  
3
  
4
 

配置完之后运行：

$ hexo g
 
 
 

  
1
 
 
 
 

  
1
 

重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。

---

3. 添加动态背景

实现效果图

具体实现方法

这个我之前有一篇文章有讲过了，详情点击我的博客

---

4. 实现点击出现桃心效果

实现效果图

具体实现方法

在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js
 
 
 

  
1
 
 
 
 

  
1
 

然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
 
 
 

  
1
  
2
 
 
 
 

  
1
  
2
 

---

5. 修改文章内链接文本样式

实现效果图

具体实现方法

修改文件 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;
  }
}
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

---

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

实现效果图

具体实现方法

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

---

7. 在每篇文章末尾统一添加“本文结束”标记

实现效果图

具体实现方法

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

  
1
  
2
  
3
  
4
  
5
 
 
 
 

  
1
  
2
  
3
  
4
  
5
 

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

代码如下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
 
 
 

  
1
  
2
  
3
  
4
  
5
 
 
 
 

  
1
  
2
  
3
  
4
  
5
 

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true
 
 
 

  
1
  
2
  
3
 
 
 
 

  
1
  
2
  
3
 

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

---

8. 修改作者头像并旋转

实现效果图

具体实现方法

打开\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-transf