Michael Vector

静心养神的空间,自我陶醉的庙宇

0%

Hexo博客搭建教程《二、主题美化》

本教程基于Hexo v4.2Next v7.7作为教学案例进行演示。
从第一篇建站后的主题美化,并进行自定义修改,可以让大家按照自己的想法进行美化改造。

下载主题

例如 Next主题,进入官网Github后,可以看到介绍下载内容。

1
2
3
4
# 进入hexo建站文件夹
cd hexo
# 下载next主题到themes文件夹
git clone https://github.com/theme-next/hexo-theme-next themes/next

全局修改主题

打开/HexoBlog/_config.yml,修改:

1
2
3
4
5
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# theme: volantis

注意:HexoBlog建站文档里会有两个_config.yml配置文件,各存在于:

  • HexoBlog/_config.yml
  • HexoBlog/themes/next/_config.yml

其中,上面的配置文件是针对于全局Hexo的配置文档,例如博客名称、主题、链接、以及git保存链接。
下面这一个是针对next这个主题的具体配置信息,请勿混淆。

主题自带样式修改

Next这样的使用量超广的主题,在主题配置文件下都可以有很多自定义的详细修改参数,一般都可以通过true和false来进行修改。

首页菜单栏

这部分可以自主定义博客的几大类别:首页、存档、分类、标签、关于。

比如:

1
2
3
4
5
6
7
8
menu:  #目录
home: / || home #首页
archives: /archives/ || archive #存档目录
categories: /categories/ || th #分类目录
tags: /tags/ || tags #标签目录
about: /about/ || user #关于目录

# 链接的值 :链接的目录位置 || 链接的图标

这部分可以增减,依靠个人喜好,也可以进行目录名称的修改。修改文章大目录的位置在HexoBlog\themes\next\languages\zh-CN.yml里。

链接的值不可修改,一旦修改next主题识别不到位置。需要修改的是在对应的翻译文档里将所定义的分类目录修改为指定的名称。

例如:

themes\next\languages\zh-CN.yml
1
2
3
4
menu:
home: 大世界 #home: 首页
archives: 全部文章 #archives: 归档
categories: 归类文档 #categories: 分类

菜单栏样式

此处修改目录样式

1
2
3
menu_settings:
icons: true # 是否图标显示
badges: true # 计数或者圆点

侧边栏样式

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
31
32
33
sidebar: # 侧边栏位置
position: left
#position: right

# 侧边栏宽度
# Muse | Mist: 320
# Pisces | Gemini: 240
width: 280

# 侧边栏展示方式(只针对于 Muse | Mist)
# - post 发布的文章页面自动展开(默认)
# - always 所有页面自动展开
# - hide 只有点击侧边栏切换图标时才展开
# - remove 移除所有侧边栏界面
display: always

avatar: # 侧边栏头像
url: #你的头像地址(图床)
rounded: false #圆型头像
rotated: false #旋转

site_state: true #日志、分类、标签计数显示

social: #展示社交链接
GitHub: https://github.com/MichaelVector || github
E-Mail: mailto:cbw390179428@cloud.com || envelope

toc: #文章标题目录
enable: true
number: true
wrap: true #换行
expand_all: false #自动展开所有
max_depth: 6 #最大目录深度

文章设置

阅读更多

在文章简介后可以加入<!-- more -->来缩短在首页显示的内容(而不是整个篇幅)。
同时需要打开read more button的开关。

1
2
<!-- more -->
read_more_btn: true

文章信息

1
2
3
4
5
6
7
post_meta:
item_text: true #显示文字
created_at: true #创建时间
updated_at:
enable: true #更新时间
another_day: true # 同一天则不显示
categories: true #显示分类

文章计数

1
2
3
4
5
6
symbols_count_time:
separated_meta: true #另起一行
item_text_post: true #文字计数
item_text_total: true #文字计数
awl: 3
wpm: 300

代码块样式

1
2
3
4
5
6
codeblock:
highlight_theme: night eighties
copy_button:
enable: true
show_result: true
style: mac # Available values: default | flat | mac

页脚

页脚标签美化

使用图标来代替#的标签样式

1
tag_icon: true

打赏设置

1
2
3
4
5
6
7
8
reward_settings:
enable: true
animation: false #动态
reward:
wechatpay: /images/paypal.png
alipay: /images/paypal.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

相关文章

1
2
3
4
5
6
related_posts:
enable: true
title: #自定义标题,留空做默认
display_in_home: true
params:
maxCount: 5

功能模块

返回顶层

1
2
3
4
back2top:
enable: true
sidebar: false #是否显示在侧边栏
scrollpercent: true #百分比

阅读进度条

1
2
3
4
5
reading_progress:
enable: false
position: top # Available values: top | bottom
color: "#37c6c0"
height: 3px

Github条幅

1
2
3
4
github_banner:
enable: true
permalink: https://github.com/MichaelVector
title: Follow me on GitHub

本地搜索

1
2
3
4
5
6
7
8
local_search:
enable: true
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
preload: false

第三方代码样式

增加建站时间

修改footer.swig,在最后加上:

/themes/matery/layout/_partial/footer.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
31
<div class="sitetime">
<span id="sitetime"></span>
</div>

<script language=javascript>
function siteTime() {
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(2018, 09, 11, 00, 00, 00); //北京时间
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}
siteTime();
</script>

鼠标点击特效

点击下方按钮下载相应的脚本,并置于 themes\next\source\js\cursor\ 目录下:

爆炸特效 礼花特效 爱心特效 文字特效

在主题自定义布局文件中添加以下代码:

layout\_third-party\custom.swig
1
2
3
4
5
6
7
8
9
10
11
12
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
<script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
<script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
<script async src="/js/cursor/text.js"></script>
{% endif %}

如果 custom.swig 文件不存在,需要手动新建并在布局页面中 body 末尾引入:

layout\_layout.swig
1
2
3
4
5
6
7
      ...
{% include '_third-party/exturl.swig' %}
{% include '_third-party/bookmark.swig' %}
{% include '_third-party/copy-code.swig' %}
+ {% include '_custom/custom.swig' %}
</body>
</html>

在主题配置文件中添加以下代码:

_config.yml
1
2
# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

这样即可在配置文件中一键快速切换鼠标点击特效。

  • 本文标题: Hexo博客搭建教程《二、主题美化》
  • 本文作者: Vector
  • 创建时间: 2020年03月03日 - 20时03分
  • 修改时间: 2020年04月12日 - 11时04分
  • 本文链接: https://vector.today/posts/4db997df/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!