Hexo博客主题之Icarus的设置与美化(基础)

博客网站根配置文件_config.yml的常见修改

这个配置文件在你的博客网站本地文件的根目录,不要同主题的配置文件弄混淆。

第一个需要修改的地方:网站的一些基本信息

1
2
3
4
5
6
7
8
#Site
title: zazdream //网站的标题
subtitle: ''
description: ''
keywords:
author: 张之卿 //网站的建设者
language: zh-CN //网站的默认语言,如何对照修改请查看备注(1)
timezone: ''

第二个需要修改的地方:网站的域名

1
2
#URL
url: http://zazdream.com //域名即填你已申请的域名,如何申请查看备注(2)

备注(1):修改网站语言的方法

从博客网站文件的根目录打开主题文件themes->打开你的主题文件hexo-theme-icarus-master(对照自己)->打开languages->查看你想要设置的语言的对应文件名称:zh-CN.yml->language后面填写对应名称:zh-CN

备注(2):请查阅我的文章网站域名的申请和使用

如何更换你的博客网站主题

第一步:打开Github->在搜索框输入你想要的主题名称Icarus->点击All GitHub->选择收藏量最多的搜索结果打开->点击Clone or download->为了方便,这里我们选择Download ZIP->将下好的压缩包解压到你指定的位置得到文件夹hexo-theme-icarus-master->将文件夹复制到themes文件夹下

第二步:修改博客网站根配置文件_config.yml

1
2
#Extensions
theme: hexo-theme-icarus-master //改为第一步复制到themes下的文件夹名称

Icarus的美化

修改你的头像

打开你的主题文件hexo-theme-icarus-master->打开source->打开images->将其中的图片avatar.png换成你想要的头像(头像图片的分辨率要调整适当,最好按照原文件的分辨率调整)

修改后效果如下:

修改菜单栏

(1)修改主题的配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
menu:
首页: /
归档: /archives
分类: /categories
相册: /photo
音乐: /music
电影: /movie
游戏: /game
公益: /404
关于: /about

备注:后面路径为对应页面的路径,自己需要对照着在Git控制台中创建对应页面

(2)在Git控制台中创建对应页面
从你的博客网站的根目录打开Git控制台,新建对应页面,例如:

$ hexo new page "photo"

(3)继续在控制台键入命令:

1
2
3
$ hexo clean   回车
$ hexo g 回车
$ hexo server 回车

(4)重新加载你的博客网站主页http://localhost:4000/ ,即可发现菜单栏新增了你创建的菜单选项,点击打开后发现没有内容。这需要你自己编辑。

修改页面尾末打赏图片

1
2
3
4
5
6
7
8
9
10
11
donate:
-
# Donation entry name
type: alipay //支付宝收款码
# Qrcode image URL
qrcode: '/photo/index/pay/alipay.jpg' //此处路径填写图片相对于source文件夹的路径
-
# Donation entry name
type: wechat //微信收款码
# Qrcode image URL
qrcode: '/photo/index/pay/wechat.png'//此处路径填写图片相对于source文件夹的路径

个性化侧边栏

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
widgets:
-
# Widget name
type: profile //个人简介区域
# Where should the widget be placed, left or right
position: left //位置可自行设置,我都放置在左边
# Author name to be shown in the profile widget
author: 张之卿
# Title of the author to be shown in the profile widget
author_title: 为了那个梦想
# Author's current location to be shown in the profile widget
location: 安徽-桐城
# Path or URL to the avatar to be shown in the profile widget
avatar:
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# Whether to show avatar image rounded or square
avatar_rounded: false
# Path or URL for the follow button
follow_link: 'https://github.com/zazdream' //“关注我”的跳转链接
# Links to be shown on the bottom of the profile widget
social_links: //个人社交区域
Github: //我的GitHub的图标及链接,关于图标的使用和更换请查看我的备注(2)
icon: fab fa-github
url: 'https://github.com/zazdream'
E-mail: //我的邮箱的图标及链接
icon: fab fa-envira
url: 'mailto:[email protected]'
Weibo: //我的微博的图标及链接
icon: fab fa-weibo
url: 'https://weibo.com/u/5013594041'
RSS: //网站RSS的图标及链接
icon: fas fa-rss
url: /atom.xml
-
# Widget name
type: toc
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: links //相关链接区域
# Where should the widget be placed, left or right
position: left //位置可自行设置,一般选择左边
# Links to be shown in the links widget
links:
我的CSDN首页: 'https://me.csdn.net/weixin_42146857'
我的B站首页: 'https://space.bilibili.com/29187794'
-
# Widget name
type: category //分类
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: recent_posts //最新的文章
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: tagcloud //云标签
# Where should the widget be placed, left or right
position: left

备注(1):所有的侧边栏应用我都放在了左边,觉得好看些,另外觉得不需要的话可以将相关内容直接删除。
备注(2):Icarus的图标使用很简单,操作步骤:打开Font Awesome 图标官网->输入你需要图标的英文名并搜索->查看对应图标详情->按照提示复制图标名称到指定位置即可使用。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×