Hexo搭建个人博客（三）

发表于 | 分类于

前言

看了之前的文章，博客已经配置完成，你自己写文章已经OK了。如果你想把博客变得更炫酷，做一些不在官方文档中的个性配置，可以往后看。我会教大家一步步把博客变成我现在的样子。我推荐看这篇文章，我也是看的这个配置的，写的很好。

修改标题栏背景及字体

实现效果：

img

修改标题栏背景

首先将要使用的背景图片header_background.jpg保存至\themes\next\source\images文件夹下，方便后面引用。

然后在\themes\next\source\css_common\components\header路径下找到header.styl文件，将其中

1
.header { background: xxxxxxxxxx; }

改为

1
.header { background: url(/images/header_background.jpg); }

标题栏背景修改成功！

修改标题栏字体

同样的，在\themes\next\source\css_common\components\header路径下找到site-meta.styl文件，修改如下字段

  • 去除背景
1
2
3
4
5
6
7
8
9
10
.brand {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  color: $brand-color;
  background: none;                   # 新设置（去除标题字体背景）
  /*background: $brand-bg;*/          # 原设置（已注释）
  border-bottom: none;
  &:hover { color: $brand-hover-color; }
}
  • 修改标题字号
1
2
3
4
5
6
7
8
9
.site-title {
  display: inline-block;
  vertical-align: top;
  line-height: 36px;
  font-size: 50px;                      # 新设置（修改标题字号）
  /*font-size: $logo-font-size;*/       # 原设置（已注释）
  font-weight: normal;
  font-family: $font-family-logo;
}

修改菜单栏

在\themes\next\source\css\_common\components\header路径下找到menu.styl文件

  • 修改菜单栏字体大小：

修改.menu .menu-item标签下的font-size 字段

1
font-size: 14px;             # 菜单栏字体大小，原参数为13px
  • 设置菜单栏形式：
1
2
3
4
5
6
7
8
9
10
.menu {
  margin-top: 35px;                    # 与标题距离，原参数20px
  padding-left: 0;
  text-align: center;
  background: rgba(255,255,255,0.8);   # 菜单栏背景色值和透明度（原透明度0.65）
  margin-left: auto;                   # 居中
  margin-right: auto;                  # 居中
  width: 450px;                        # 菜单栏长度
  border-radius: initial;              # 新设置
}

修改移动端菜单栏按钮显示

效果：

img

在\themes\next\source\css\_common\components\header路径下找到site-nav.styl文件，修改button标签下的background字段（#eee为色值）

1
2
3
4
5
6
7
button {
  margin-top: 2px;
  padding: 9px 10px;
  /*background: transparent;*/    # 按钮背景色，原设置为透明
  background-color: #eee;         # 按钮背景色，原参数为transparent            
  border: none;                   # 按钮凸起
}

搜索功能

打开主题配置文件，找到这个：

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # 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

enable默认为false，改为true。可以看到本地search依赖一个包，需要npm install一下。

博客根目录：

1
npm install hexo-generator-search --save

即可安装依赖包。

博客配置文件中加入：

1
2
3
4
search:
  path: search.xml
  # 如只想索引文章，可设置为post
  field: post

这样，搜索功能就加入了~

修改文章内链接文本样式

实现效果图

img

具体实现方法

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

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

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

实现效果图

img

具体实现方法

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

修改``代码块自定义样式

实现效果图

img

具体实现方法

打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

添加文章评论区

实现效果图

img

最近因为各种你知道的原因，不少第三方评论插件都停止了运营，在这里我用暂时还没有受到影响的Valine 做介绍。

Leancloud

先登录Leancloud官网

获取appid和appkey

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用：

img

应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的appid和appkey了：

img

为了您的数据安全，请注意设置自己的安全域名：

设置安全域名

配置

打开主题配置文件，搜索以下字段：Valine，并修改相应配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: ture
  appid: cBBhByL05OPQ0U2iEYevPbBO-gzGzoHsz  # 填写上面的appid
  appkey: 8xukFA5M2WEeFUUWalVjSYY5          # 填写上面的appkey
  notify: true                              # 邮件提醒  https://github.com/xCss/Valine/wiki
  verify: true                              # Verification code
  placeholder: 在这里填写评论...        # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

评论区添加完成！

如需取消某个 页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false

第三方图床设置

第三方图床其实我推荐使用七牛云。

使用也十分简单，首先注册登录并新建应用，之后：

选择对象存储：

img

选择内容管理：

img

选择上传文件：

img

选择需要引用的资源上传后，在内容管理列表中找到相应资源即可复制外链

img

这样我们在我们的博客中就可以利用其URL链接直接引用这些资源了。

侧边栏名言警句

添加效果：

img

在\Hexo\themes\next\layout\_macro文件夹下的sidebar.swig文件中

在最后一个% endif %标签下面插入你想输入的文字：img

然后在\Hexo\themes\next\source\css\_common\components\sidebar文件夹下新建sidebar-motto-links.styl文件并写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.links-of-motto {
  margin-top: 40px;                   #这是名言警句的摆放位置
}

.links-of-motto a {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
  border-bottom-color: $black-light;
  font-size: 13px;

  &:before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    content: " ";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
  }
}

然后在\Hexo\themes\next\source\css\_common\components\sidebar文件夹下的sidebar.styl文件中末尾添加一行：

1
@import "sidebar-motto-links";

搞定！

参考资料

用钱砸我，不要停！