&web_id=" language="JavaScript">
Fork me on GitHub

Hexo博客搭建攻略(二):进阶篇

Hexo 是高效的静态站点生成框架,她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。在这篇文章中,假定你已经成功安装了 Hexo,并使用 Hexo 提供的命令创建了一个站点。

讲完了基础的博客搭建,下面大家也发现默认的主题并不好看,今天我们要讲解的就是有关next主题的优化。
首先, Next使用文档展示了next主题的基本设置和一些集成操作,在这里就不加过多的描述了,今天我要讲的是博客集成的一些功能的实现。

主题设置

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

在这里我使用的是Mist主题,你也可以挑选自己喜欢的样式。

添加网易云音乐

在实现了简单的页面美化之后,我们需要让自己的博客更加与众不同,想不想在阅读文章的时候让读者来一段轻松的音乐呢?

首先,我们可以直接登录网易云音乐,点击生成外链播放器。

然后将最后生成的html代码复制到你想要复制的地方就可以添加网易云音乐了。

是不是很棒呢?赶紧get√吧!

其实设置网站logo跟设置头像一样,在配置文件中引入正确的地址就可以了,但是网站logo对图片是有要求的,我们需要在 Favicon在线制作 工具中制作32*32的.ico图片,然后放在blog/sourse/images下面,在主题配置文件中添加:

1
favicon:images/favicon.ico

效果如图所示:

文章末尾添加“本文结束”标记

新建passage-end-tag.swig文件

在路径\themes\next\layout\_macro中添加passage-end-tag.swig文件,其内容为:

1
2
3
4
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
------ 本文结束 ------</div>
{% endif %}

修改 post.swig文件

\themes\next\layout\_macro\post.swig中,post-body之后,post-footer之前添加如下代码:

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

在主题配置文件中添加字段

在主题配置文件``中添加以下字段开启此功能:

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

完成以上设置之后,在每篇文章之后都会添加“本文结束”标记。

不蒜子统计

不蒜子统计是一个非常棒的统计功能,在一开始我就非常喜欢使用这个功能,不蒜子统计十分精准,基本上同一个人浏览多次还会显示一个人,可以精确的统计访问人数。

全局配置

编辑 主题配置文件 中的 busuanzi_count 的配置项。

enable: true时,代表开启全局开关。若site_uvsite_pv、page_pv的值均为false时,不蒜子仅作记录而不会在页面上显示。

站点UV配置

site_uv: true时,代表在页面底部显示站点的UV值。

site_uv_headersite_uv_footer为自定义样式配置,相关的值留空时将不显示,可以使用(带特效的)font-awesome。显示效果为[site_uv_header]UV值[site_uv_footer]

1
2
3
4
# 效果:本站访客数12345人次
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次

站点PV配置

site_pv: true时,代表在页面底部显示站点的PV值。

site_pv_headersite_pv_footer为自定义样式配置,相关的值留空时将不显示,可以使用(带特效的)font-awesome。显示效果为[site_pv_header]PV值[site_pv_footer]

1
2
3
4
# 效果:本站总访问量12345次
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次

单页面PV配置

page_pv: true时,代表在文章页面的标题下显示该页面的PV值(阅读数)。

page_pv_headerpage_pv_footer为自定义样式配置,相关的值留空时将不显示,可以使用(带特效的)font-awesome。显示效果为[page_pv_header]PV值[page_pv_footer]

1
2
3
4
# 效果:本文总阅读量12345次
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次

配置好就会显示如下效果:

鼠标点击红心的设置

1.将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
2.找到 \themes\next\layout\_layout.swing 文件, 在文件的后面,</body> 标签之前 添加以下代码:

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

集成友言评论

也许有很多小盆友想要在自己的博客里集成评论功能,但是目前支持next最好的就是多说,无奈多说经常炸,自己动手,丰衣足食,经过我多次尝试,我发现友言这款第三方插件非常不错。

注册友言

首先,我们进入友言官网,注册新用户,并登录。

获取代码

集成

到这里我们就可以改造啦!在目录thems/next/layout/_scripts/third_party/comments下添加友言的模块文件youyan.swig文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if not (theme.duoshuo and theme.duoshuo.shortname)
and not theme.duoshuo_shortname
and not theme.disqus_shortname
and not theme.hypercomments_id
and not theme.gentie_productKey %}
{% if theme.youyan_uid %}
{% set uid = theme.youyan_uid %}
{% endif %}
{% if page.comments %}
<!-- UY BEGIN -->
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid={{uid}}"></script>
<!-- UY END -->
{% endif %}
{% endif %}

修改thems/next/layout/_scripts/third_party/comments.swig文件,添加友言脚本的引用。

1
2
3
4
5
{% include './comments/duoshuo.swig' %}
{% include './comments/disqus.swig' %}
{% include './comments/youyan.swig' %}
{% include './comments/hypercomments.swig' %}
{% include './comments/gentie.swig' %}

修改themes/next/layout/_partials/comments.swig文件,在endif之前添加友言的div。

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
29
{% if page.comments %}
<div class="comments" id="comments">
{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
<div class="ds-thread" data-thread-key="{{ page.path }}"
data-title="{{ page.title }}" data-url="{{ page.permalink }}">
</div>
{% elseif theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
<div class="fb-comments"
data-href="{{ page.permalink }}"
data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
data-width="{{ theme.facebook_comments_plugin.width }}"
data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
</div>
{% elseif theme.disqus_shortname %}
<div id="disqus_thread">
<noscript>
Please enable JavaScript to view the
<a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
{% elseif theme.hypercomments_id %}
<div id="hypercomments_widget"></div>
{% elseif theme.gentie_productKey %}
<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
{% elseif theme.youyan_uid %}
<div id="uyan_frame"></div>
{% endif %}
</div>
{% endif %}

thems/next/_config.ymlThird Party Services Settings下添加友言的配置信息。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# Duoshuo ShortName
#duoshuo_shortname:
# youyan
youyan_uid: 你的UID

至此,改造完成。运行hexo clean清理一下目录,hexo g重新生成一次所有的文档,hexo s运行服务器以后,就可以查看评论效果了。

关于RSS

很多同学看到别人的博客会集成订阅的功能(RSS),但是next使用文档中完全没有这方面的介绍,所以显得束手无策。金条就教大家如何去生成RSS功能。

插件安装

首先需要安装一个Hexo插件:

1
$ npm install --save hexo-generator-feed

配置

接下来需要在站点配置文件中配置一下,打开站点配置文件,在其中添加:

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
plugins:
hexo-generate-feed

然后在主题配置文件中配置:

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

生成 RSS Feed

配置完运行代码:

1
$ hexo g

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

最后你可以看到:

头像旋转

头像旋转就是当你鼠标经过的时候,让自己的头像旋转360度,还是挺炫酷的,快来get√吧!

修改头像特效主要是修改 Hexo 目录下 \themes\next\source\css\_common\components\sidebar\sidebar-author.styl 文件。

头像圆形的修改

修改sidebar-author.styl文件中的.site-author-imagecss样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

鼠标经过旋转特效

修改sidebar-author.styl文件,添加CSS样式img:hover如下代码:

1
2
3
4
5
6
img:hover {
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

修改 sidebar-author.styl 文件中 .site-author-image CSS 样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;
}

头像循环旋转效果修改

修改 sidebar-author.styl 文件,添加如下代码:

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
/* 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);
}
}

修改 sidebar-author.styl 文件中 .site-author-image CSS 样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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:动画名称 动画播放时长单位秒或微秒
动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
-webkit-animation: play 3s linear infinite;
-moz-animation: play 3s linear infinite;
animation: play 3s linear infinite;
/* 鼠标经过头像旋转360度
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;*/
}

鼠标经过停止头像旋转:修改 sidebar-author.styl 文件,添加 CSS 样式 img:hover 如下代码:

1
2
3
4
5
6
7
8
9
img:hover {
/* 鼠标经过停止头像旋转 */
-webkit-animation-play-state:paused;
animation-play-state:paused;
/* 鼠标经过头像旋转360度
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);*/
}

即可实现头像的旋转功能,是不是特别炫酷呢?

添加Fork Me On Github

添加Fork Me On Github挂件。首先拷贝Github挂件样式代码:

1
<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>

接下来修改代码的href为自己的Github地址:

1
2
3
<a href="https://github.com/you">
改为:
<a href="https://github.com/hhstore">

修改hexo主题

修改文件: themes/next/layout/_layout.swig
打开_layout.swig文件,找到如下对应位置,添加上述样式代码段即可。

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
29
30
<!doctype html>
<html class="theme-next {% if theme.use_motion %}use-motion{% endif %} {% if theme.scheme %}theme-next-{{ theme.scheme | lower }}{% endif %}">
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% include '_partials/old-browsers.swig' %}
<div class="container one-column {% block page_class %}{% endblock %}">
<div class="headband"></div>
<!----------- add Fork me on Github ------------>
<a href="https://github.com/hhstore"><img style="position: absolute; top: 500; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
<!----------- add Fork me on Github ------------>
<div id="header" class="header">
<div class="header-inner">
{% include '_partials/header.swig' %}
</div>
</div>
<!-------------省略------------------->
<!-------------省略------------------->
<div class="back-to-top"></div>
</div>
</body>
</html>

就这样,我们就可以实现左上角的丝带效果了。

添加自定义导航分类

之所以添加自定义导航分类是因为现有的导航分类不够用,所以我们需要扩展导航分类。

添加步骤

1.新建source/tools/index.md文件。

/source/ 文件夹,新建 tools目录,并添加一个index.md文件。可以拷贝其他目录(如tags)中的index.md文件。

2.修改主题配置文件参数。

找到menu标签项, 添加子项:tools: /tools

1
2
3
4
5
6
7
8
9
# when running hexo in a subdirectory (e.g. domain.tld/blog), remove leading slashes ( "/archives" -> "archives" )
menu:
home: /
archives: /archives
categories: /categories
tags: /tags
tools: /tools # 添加位置
about: /about
#commonweal: /404.html

3.修改themes/next/languages/zh-Hans.yml

1
2
3
4
5
6
7
8
9
10
11
12
title:
archive: 归档
category: 分类
tag: 标签
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
tools: 工具 # 添加位置
about: 关于
commonweal: 公益404

4.修改完,重新编译部署即可。

1
hexo d -g

部署时保证README.md不被渲染

相信大家都会发现一般Git仓库下面都有一个README.md来表现这个仓库设立的目的,但是运用hexo布置的时候会被自动渲染,接下来要介绍部署时保证README.md不被渲染的方法。

在Hexo目录下的source根目录下添加一个,README.md。修改Hexo目录下的_config.yml。将skip_render参数的值设置上。skip_render: README.md保存退出即可。

优化你的README.md

标签生成

生成标签需要进入网站 shields.io ,这个网站可以找到各种README的标签,但是我们主要应用有关自定义标签的方法,这里简单介绍下怎么自定义标签,把网站拉到最下边,可以看到自定义的地方。

Godlike Meteor wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
我知道不会有人点开,但万一真有人想不开呢?
------ 本文结束 ------