一.前言

  • 搭建了自己的博客后，肯定需要美化，打造属于自己的个性博客，但是百度上面好多大神发的教程比较散，我尝试了以后汇总了一下分享给大家

二.主题模块

1. 默认主题

一般默认安装的主题是一个 landscape 主题，但是不是很好看，而且hexo的主题特别多，都挺漂亮的，我们可以选择更改

hexo官方主题：https://hexo.io/themes/

2. 推荐主题

给大家推荐一个主题 sakura，我搭建的主题就是这个，效果还是挺不错的,sakura下载链接

3. 配置主题

下载之后，我们将 hexo-theme-sakura-master 中的主题样式复制到 根目录下的 theme 目录下
也可以更改 hexo-theme-sakura-master 为 Sakura ，方便配置使用

4. 修改配置文件

修改根目录下的配置文件 _config.yml

  • 注意
    theme： sakura //此处的主题名要和theme文件夹下主题名一致
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Sakura

5. 重新运行测试,查看效果

1
2
3
hexo clean
hexo g
hexo s

三.顶部站点名

这个是在 /themes/sakura/config.yml 这个配置文件中修改

1
2
3
4
//site name
prefixName: 六六の网站
siteName: LiuLiu
url: https://aill.github.io/
  • 其中，URL是点击后跳转地址.
  • 由于我在 /themes/sakura/source/css/style.css 下修改了样式表去掉了prefixName，所以本站没有
  • 大家如果想修改其相关的样式也可以去这个css文件中自定义,这个文件是主要的css文件，大部分的样式都是由这个文件定义的。

四. 顶部导航栏

这个在主题使用教程里面，作者好像已经是给出来了，大家可以仔细去阅读以下(当初我就是没有认真阅读爬了不少坑)
这也是 /themes/sakura/config.yml 这个配置文件里面定义的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
menus:
  首页: { path: /, fa: fas fa-home  fa-1x }
  分类: { path: javascript:;, fa: far fa-folder-open, submenus: { 
    技术: {path: /categories/技术/, fa: fab fa-windows }, 
    生活: {path: /categories/生活/, fa: fa-book }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
  } }
  兴趣: { path: javascript:;, fa: fas fa-tasks,submenus: { 
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  时间轴: { path: /archives, fa: far fa-folder-open }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }

  • 前面的path是网页路径，这个不建议修改，但可以修改。后面的如 fa: fa-film 这个就是对应的图标设置,关于这个图标大家可以去fontawesome看教程以及选择自己喜欢的图标，导航栏下拉下拉菜单的图标修改和导航栏相同。

五.头像

很多小伙伴拿到主题后第一时间肯定是修改这个头像，毕竟这个比较能代表自己嘛，那么这个头像配置在哪(⊙o⊙)?
如果有经验的小伙伴肯定是自己就能找到，这个配置在 /themes/sakura/config.yml 中

1
2
3
cdn: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5
avatar: /images/custom/head.jpg

也可以修改为：

1
avatar: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/custom/head.jpg
  • 至于cdn：大家可以去百度cdn教程

六.社交栏

目录

1.个性签名

这个在 /themes/sakura/config.yml 里面，由如下代码定义，直接修改即可

1
description: 不积跬步，无以至千里！

2.内容

没错，仍然是 /themes/sakura/config.yml 这个文件，找到

1
2
3
4
5
6
7
8
9
10
11
12
13
#social  url, img PC端配置
#社交按钮(social)  url, img PC端配置
social:
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=2403988624&site=qq&menu=yes, img: /images/social/qq.png}
  wechat: {url: /#, qrcode: /images/donate/wechat.jpg, img: /images/social/wechat.png}
  bilibili: {url: https://space.bilibili.com/13503064, img: /images/social/bilibili.png}
  weibo: {url: https://weibo.com/u/3125196513?refer_flag=1001030103_&is_all=1, img: /images/social/weibo.png}
#social  url, img 移动端配置
# 社交按钮(msocial)  url, img 移动端配置
msocial:
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=2403988624&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}
  bilibili: {url: https://space.bilibili.com/13503064, fa: fa-television, color: ffb6c1}
  weibo: {url: https://weibo.com/u/3125196513?refer_flag=1001030103_&is_all=1, fa: fa-weibo, color: dd4b39}
  • 前面URL对应点击后跳转地址，后面是图标路径，注意这个是本地路径，如果要使用cdn后的路径，上一栏 头像 设置中有介绍。至于pc和移动端注释已经标示了，就不多作介绍。

3.社交栏整体样式

在 /themes/sakura/source/css/style.css 中 Ctrl+f 搜索 header-info ，这就是这个地方对应的div的class名字
就可以在代码中找到

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
.header-info {
    width: 63%;
    margin: auto;
    font-size: 16px;
    color: #eaeadf;
    background: rgba(255,255,255,.8);
    padding: 15px;
    margin-top: 22px;
    letter-spacing: 0;
    line-height: 30px;
    border-radius: 10px;
    box-sizing: initial;
    white-space: nowrap;
}
.header-info:before {
    content: "";
    position: absolute;
    top: 127.5px;
    left: 50%;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent rgba(255,255,255,.8) transparent;
}
.header-info p {
    margin:0;
    color: #605f5f;
    font-family:'Ubuntu',sans-serif;
    font-weight:700
}
  • 这就是其对应的样式表内容，可以根据需要修改。(Chrome) 按F12然后点击你想查看的部分就会给你提示对应的部分。对应关系已经标出来，可以用这个功能快速找到网页和css对应关系，方便进行修改

七.顶部图片和效果

1.顶部图片

在 /themes/sakura/config.yml 中找到如下代码：

1
2
3
4
# 背景图片 更好的修改
bg:
  - /images/bg/1.jpg
  - /images/bg/2.jpg
  • 注意这里是本地图片链接

2.顶部图片效果

我的顶部效果改为了点点，可根据需要修改在：
在 /themes/sakura/config.yml 中找到如下代码：

1
2
# 背景图片样式 空：原图 filter-dim：阴影 filter-grid：横条 filter-dot：点点
bgclass: filter-dot
  • 具体参数原作者在注释中已经标示

八.通知栏

还是在 /themes/sakura/config.yml 中找到如下代码,直接修改内容即可

1
2
#站点首页的公告信息
notice: 欢迎来到六六の小屋，感谢您的光临！！...

九.模块

1.startdash模块

在 /themes/sakura/layout/_partial/startdash.ejs 中有如下：

1
2
3
4
5
6
7
<div class="top-feature-row">
  <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif;">
  <i class="fa fa-anchor" aria-hidden="true">
  </i>
  兴趣</h1>
  <% for (dash in theme.startdash) { %>
  ....

2.startdash内容设置

在 /themes/sakura/config.yml 中找到如下代码：

1
2
3
4
startdash: 
  - {url: /, title: 亲爱的, desc: My Olny Love, img: /images/startdash/love.png}
  - {url: https://space.bilibili.com/13503064, title: Bilibili, desc: 博主的b站视频, img: /images/startdash/bilibili.jpg}
  - {url: /, title: 万事屋, desc: 技术服务, img: /images/startdash/wangshiwu.jpg}
  • 注释也已经标示出其参数，根据参数修改即可。

3.Discovery文章

在 /themes/sakura/layout/index.ejs 中找到如下代码：

1
2
3
4
5
<h1 class="main-title" style="font-family: 'Ubuntu', sans-serif;">
<i class="fa fa-envira" aria-hidden="true"></i>
文章</h1>
<%- partial('_partial/archive', {pagination: 2, index: true}) %>
<!-- 首页默认取最最新文章集 -->

十.文章封面和内容

1.文章封面

这个在在你写博客时，有photos属性，设置url即可 ，下面是示例，photos 就是文章的封面

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Hexo Sakura使用教程
author: LiuLiu
avatar: /images/avatar.png
authorLink: https://aill.gitee.io
authorAbout: 不积跬步，无以至千里！
authorDesc: 不积跬步，无以至千里！
categories: 技术
comments: true
keywords: Hexo教程
description: Hexo教程
photos: /images/sakura/demo.png
---

十一.分类及标签子页面

1.分类子页面

相关的设置是在 /themes/sakura/language/zh-cn.yml 找到如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
技术:
    #中文标题
    zh: 技术协会
    #英文标题
    en: technology
    # 封面图片
    img: /images/classify/coding.jpg
生活:
    zh: 生活
    en: Live
    img: /images/classify/live.jpg
·······

2.标签子页面

在 /themes/sakura/language/zh-cn.yml 找到如下代码进行修改

1
2
3
4
#tag
# 标签名即是标题
悦读:
    img: /images/classify/reading.jpg

3.番组

这个页面对应的配置是在 /source/bangumi/index.md 中修改，其中代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
  - img: http://pic.netbian.com/uploads/allimg/180413/121552-152359295246db.jpg
    title: 狐妖小红娘
    status: 追番中
    progress: 100
    jp: 狐妖小红娘
    time: 2019-05-24 SUN.
    desc: 白月初……
  - img: http://pic.netbian.com/uploads/allimg/170605/130458-149663909840b3.jpg
    title: 名侦探柯南
    status: 追番中
    progress: 1000
    jp: 名探偵コナン
    time: 2019-05-24 SUN.
    desc: 中生侦探工藤新一……
---

4.歌单

整个页面配置在 /source/music/index.md 中，其代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 歌单
date: 2018-12-20 23:14:28
keywords: 喜欢的音乐
description: 
comments: true
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/music.jpg
---
{% raw %}
<meting-js
  server="netease"
  type="playlist"
  id="2507814548"
  mutex="true">
</meting-js>
{% endraw %}

前面是常规的信息配置没什么好说的，photos就是这个页面的顶部图片
要改一下id，这个id就是网易云音乐歌单id：登录网页版网易云音乐，打开歌单，在地址栏中可以看到

1
https://music.163.com/#/playlist?id=762797776
  • 把id后面的数字复制粘贴到代码里面的id后面，就可以显示自己的歌单了

十二.友情链接相关配置

1.内容配置

友情链接内容配置具体在 /source/link/index.md 中

1
2
3
4
5
6
7
8
9
10
11
---
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg //背景图片
links:
  - group: 小伙伴们
    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
    items:
    - url: https://yremp.github.io
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: 好友1
      desc: 点击查看
---

2.界面布局

界面背景及布局主要在 /themes/sakura/layout/links.ejs 中

1
2
3
4
5
6
7
8
9
10
11
........
<p>
  欢迎交换友链qaq ꉂ(ˊᗜˋ)</p>
<p>
请留言告诉我你的：
  <br> 1、名字
  <br> 2、一句话介绍（熟人我会亲自帮写的）
  <br> 3、主页地址
  <br> 4、头像（HTTPS*，可在评论区上传）
</p>
........

十三.左下角播放器

设置自己的歌单 ，和清单里的歌单一样要先拿到网易歌单id，怎么获取上面清单子页面里有相关介绍，然后在 /themes/sakura/config.yml 中找到修改id

1
2
3
4
5
6
7
8
9
10
11
player: 
  id: 762797776
  server: netease
  type: playlist
  fixed: true
  autoplay: false
  loop: all
  order: random
  preload: none
  volume: 0.7
  mutex: true

十四.评论不在白名单问题

首先，和评论相关的配置在 /themes/sakura/config.yml 中

1
2
3
4
# Valine
valine: true
v_appId: Qtrxu5pUbpfjbn2CpMH1jetC-gzGzoHsz
v_appKey: 72NpGpYhuAYcKyDhYSOFE1b2

这里面的id和Key是需要修改的，因为这是我的v_appId和v_appKey，你需要去注册 leancloud ，具体的请自行百度。只提醒一点，注册完以后 ，申请app以后，要设置 白名单。

十五.如何添加分类和标签

先在主题下的 /themes/sakura/config.yml 添加分类这里以 自定义 为例

1
2
3
4
5
6
7
8
9
10
11
12
menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  分类: { path: javascript:;, fa: fa-folder-open faa-wrench, submenus: { 
    技术: {path: /categories/技术/, fa: fa-code }, 
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
  } }
  自定义: { path: /archives/, fa: fa-calendar-times-o faa-tada }
  兴趣: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /tags/悦读/, fa: fa-book }, 
    番组: {path: /bangumi/, fa: fa-film },

然后在主题的 /themes/sakura/languages/zh-cn.yml 添加如下所示配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
技术:
    #中文标题
    zh: 技术协会
    #英文标题
    en: technology
    # 封面图片
    img: /images/classify/coding.jpg
生活:
    zh: 生活
    en: Live
    img: /images/classify/live.jpg
自定义:
    zh: 资源
    en: Resources
    img: /images/classify/resources.jpg

*最后在写博客时添加这个分类，如果这个分类下没有文章点击就会404
*标签和这个分类操作基本一致

十六.搜索功能无法使用

在博客根目录下执行以下代码

1
npm install hexo-generator-json-content --save

十七.参考文献

赏

不积跬步，无以至千里！