基于Hexo搭建个人博客之(二)--主题优化篇

本章主要包含了博客主题优化相关内容,第三方服务和插件的配置与使用。如:炫酷头像动态背景、链接变色、鼠标点击效果、站点字数、访客数统计等。

这是一个基于Hexo的个人博客的教程,包含了从博客搭建到主题优化,最后部署到云端的全过程。

更多文章欢迎访问我的个人博客–>幻境云图

0. 选择主题

你可以点击这里选择你喜欢的Themes,里面有大量美观的主题

我这里用的是简约著称的Next主题.

  • 下载主题
    • 使用git命令下载该主题到本地.
    • git clone https://github.com/theme-next/hexo-theme-next themes/next
    • clone成功后,你的Themes文件夹下就会有next主题文件了.
  • Hexo配置文件:
    • 都叫_config.yml
    • 一份位于站点根目录下,主要包含 Hexo 本身的配置,称为 站点配置文件
    • 另一份位于主题目录下主要用于配置主题相关的选项,称为主题配置文件
  • 开启主题
    • 站点配置文件进行修改: 将theme: landscape修改为 theme: next

1. 侧边栏头像设置

新版next注意引入了该功能,直接在主题配置文件修改即可,如下:

1
2
3
4
5
6
7
8
9
# Sidebar Avatar 头像
avatar:
url: /images/avatar.gif
# 圆形头像
rounded: true
# 透明度 0~1之间
opacity: 1
# 头像旋转
rotated: true

2. 设置个人社交图标链接

直接在主题配置文件修改即可,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Social Links. 社交链接 前面为链接地址 后面是图标 
social:
GitHub: https://github.com/illusorycloud || github
E-Mail: mailto:xueduan.li@gmail.com || 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: false

3. 添加菜单项

1.先在主题配置文件修改

1
2
3
4
5
6
7
8
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
AAAAA: /BBBBB/ || CCC
其中AAA 为菜单项的名字,BBB是路径,CCC是菜单项显示的图标

next 使用的是 Font Awesome 提供的图标 ,在这里可以选择自己喜欢的图标.

2.生成上述路径的文件

git命令行输入

hexo new page BBB –其中BBB替换为具体的名字,会在站点目录\source下新增一个BBB文件夹,文件夹中有一个index.md文件,需要在文件头中增加一句type: XXX,例如type: categories。这样就会在这个页面显示所有的分类了。

3.修改主题文件下的对应语言的配置文件,这里是中文就修改zh-CN.yml

1
2
3
4
5
menu:
home: 首页
archives: 归档
AAAA : XXXX
AAA为上边的菜单项名字,XXX为中文的名字

4. 添加RSS

  • 1.安装插件

    • 首先在Git中运行npm install --save hexo-generator-feed命令,安装插件,插件会放在

      node_modules文件夹里面.

  • 2.修改站点配置文件

    • 安装好插件后,打开站点配置文件_config.yml`,在末尾加入以下代码:
1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
  • 3.修改主题配置文件
    • 打开主题配置文件_config.yml,找到rss 添加配置:rss: /atom.xml

5. 设置酷炫动态背景

next主题提供了两种背景可以选择.

  • 第一种背景(我是用的这种)

新版本的next主题的话直接在主题配置文件中,找到canvas-nest 修改为canvas-nest: true,

1
2
3
4
5
6
7
8
9
# 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,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

进入theme/next目录

执行命令git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

  • 第二种背景
1
2
3
4
5
6
7
8
# 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

也是需要下载依赖

  1. 进入theme/next目录
  2. 执行命令:git clone https://github.com/theme-next/theme-next-three source/lib/three

4个背景中只能开启一种背景,不然会出错

把你的图片放在themes/next/source/images

打开主题配置文件_config.yml ,找到字段favicon: 都修改为对应路径

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

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

themes/next/source/js/src里面 新建一个love.js,

复制下面的代码进去

1
!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文件,在末尾 添加以下代码:

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

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

鼠标移动到连接上变颜色

修改文件 themes\next\source\css\_common\components\post\post.styl,在末尾添加如下css样式,:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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;
}
}

9. 设置顶部滚动加载条

打开next\layout\_partials\head文件,在文件末尾添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>

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

在路径 \themes\next\layout\_macro 中新建 page-end-tag.swig 文件,并添加以下内容:

1
2
3
4
5
6
<!--文字可以自己修改-->
<div>
{% if not is_index %}
<div style="text-align:center;color: #A2CD5A;font-size:15px;">------------------本文到此结束<i class="fa fa-paw"></i>感谢您的阅读------------------</div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件,在post-body 之后, post-footer 之前添加下面的代码

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'page-end-tag.swig' %}
{% endif %}
</div>

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

1
2
3
# 文章末尾添加“本文结束”标记
page_end_tag:
enabled: true

11. 静态资源压缩

Hexo自动生成的html中有很多空白的地方,会影响加载速度,所以最好还是压缩一下.

这里使用hexo-neat插件来压缩。

  • 安装插件

    • npm install hexo-neat --save
  • 站点配置文件添加配置

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      # hexo-neat
      # 博文压缩
      neat_enable: true
      # 压缩html
      neat_html:
      enable: true
      exclude:

      # 压缩css 跳过min.css
      neat_css:
      enable: true
      exclude:
      - '**/*.min.css'

      # 压缩js 跳过min.js
      neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
      - '**/*.min.js'
      - '**/jquery.fancybox.pack.js'
      - '**/index.js'
      - '**/love.js'
      # 压缩博文配置结束
  • 3.使用

    • 以后再执行hexo g命令时就会自动压缩了

12. 主页文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.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);
}

13. 修改文章底部的的标签样式

打开模板文件/themes/next/layout/_macro/post.swig,找到rel="tag">#字段, 将# 换成<i class="fa fa-tag"></i>,其中tag是你选择标签图标的名字,也是可以自定义的

1
<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>

14. 实现文章字数统计和预计阅读时间

1.在站点根目录下使用GitBash命令安装 hexo-wordcount插件:

1
npm install hexo-symbols-count-time --save

2.在全局配置文件_config.yml中激活插件:

1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

3.在主题的配置文件_config.yml中进行如下配置:

1
2
3
4
5
6
7
#字数统计
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 4
wpm: 275

到此,我们就实现了文章字数统计和预估时间的显示功能

15. 在文章底部增加版权信息

修改主题配置文件,找到creative_commons字段

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# https://creativecommons.org/share-your-work/licensing-types-examples
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons:
#选择一个License
license: by-nc-sa
#是否在侧边栏显示
sidebar: false
#是否在文章末尾显示
post: true

16. 文章置顶

打开文件:node_modules/hexo-generator-index/lib/generator.js,将原来的代码用下面的代码替换掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'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
}
});
};

写文章的时候,在标题加上top值,数值越大排在越前面.

1
2
3
4
tag: hexo 
copyright: true
password: xxx
top: 150

17. 在网站底部加上访问量

Next主题配置这个就比较方便了

打开主题配置文件,找到如下配置:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

enable的值由false改为true,便可以看到页脚出现访问量.

另外本地预览时访客数异常是正常的,部署至云端后就不会出现这样的问题.

18. 网站搜索功能

1.安装插件

​ 站点目录下执行命令npm install hexo-generator-searchdb --save

2.修改站点配置文件

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

3.修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: enable
# 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
# unescape html strings to the readable one
unescape: false

重新开启服务后即可看到效果。

TODO开启留言评论功能

//TODO 待更新

参考

Hexo官方文档

Next官方文档

------------------本文到此结束感谢您的阅读------------------
0%