icarus主题自定义

icarus这个主题挺好看的,但是似乎好多人的博客都用了这个主题,那就自己稍微改改吧。(2021/07更新:更新至icarus 4.0.3)

基本修改


基本修改,比如网站图标,评论区,rss,看板娘之类的很多地方都有提过,这里就不说了。
大都是修改_config.icarus.yml文件, 总之在 icarus\include\schema 中列出的都是能能在_config.icarus.yml修改的。比如有:

  • 网站图标favicon
  • 导航栏
  • footer上的图标
  • 评论区插件
  • rss订阅插件
  • 看板娘插件
  • 个人信息
  • 布局
  • cdn、字体cdn、图标cdn

经过我个人的测试,cdn用jsdelivr,fontcdn我用谷歌的fonts.font.im,iconcdn我用的是阿里iconfont。图标需要先在网页上选择需要用到的图标,再生成的对应的css。然后主题文件夹全文搜索fab和fas,把所有图标改成iconfont xxxxx之类的。当然如果你不想自定义,直接按官方文档来就行了,省事。

1
2
3
4
providers:
cdn: jsdelivr
fontcdn: 'https://fonts.font.im/${type}?family=${fontname}'
iconcdn: 'https://at.alicdn.com/t/font_XXXXXXXX.css'

添加备案号


服务器在国内,那在footer(就是博客最下面那一栏)加个备案号自然非常重要了。
icarus\layout\common\footer.jsx
在return里面根据个人喜好选择添加位置,我就加在了powered by hexo 下面。

1
2
3
4
5
6
7
8
9
10
<p class="size-small">
<span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
&nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>&nbsp;&&nbsp;
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
</br><a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备xxxxxxx号</a>

{showVisitorCounter ? <br /> : null}
{showVisitorCounter ? <span id="busuanzi_container_site_uv"
dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
</p>

加宽正文布局


修改icarus/include/style/base.styl里面,以下为本博客的配置

1
2
3
4
5
$gap ?= 64px
$tablet ?= 1104px
$desktop ?= 1400px
$widescreen ?= 1600px
$fullhd ?= 1920px

自定义js


icarus\source\js\下创建custom.js文件,然后在icarus\layout\common\scripts.jsxreturn里面加上

1
<script src={url_for('/js/custom.js')} defer={true}></script>

自定义css


icarus\source\css\下创建custom.styl文件,然后在icarus\source\css\style.styl里面加上

1
@import './custom'

然后在custom.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
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
64
65
66
67
68
// 加个背景图片
.is-2-column {
background-image: url(https://res.lolicon.app/bilibili/bg_small.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
// background-color: #f5f5fa;
}

// 给widget加点透明
.widget {
background-color: #ffffffcf;
}

// 单独设置目录widget的sticky属性,让它不会滚动消失。
#toc {
align-self: flex-start;
position: -webkit-sticky;
position: sticky;
top: .75rem;
}

// 左侧栏重新设置一下大小
@media screen and (min-width: 1104px), print {
.column.is-4, .column.is-4-tablet, .is-4-desktop, .is-4-widescreen {
width: 30%
max-width: 25rem;
}

.column.is-8, .column.is-8-tablet, .is-8-desktop, .is-8-widescreen {
width: 70%;
}
}

// 左侧栏重新设置一下大小
.article {
margin-right: 16px;
margin-left: 16px;
.content a img {
margin: auto;
display: block;
}
}

// 以下为本站样式
.navbar, .footer {
background-color: #f5f5fa;
}

.navbar-main, .card.widget {
box-shadow: none;
}

@media screen and (max-width: 1399px), print {
.navbar-menu {
background-color: #f5f5fa;
}
}

.card {
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
}

.tags.has-addons .tag:not(:first-child) {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06), 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.06);
}

评论区

本站评论区使用的是waline,可参考官方文档和Icarus用户指南 - 用户评论插件

要注意的是,waline会把 xxx.cn/a/xxx.cn/axxx.cn/a/index.html 视为不同的文章,如果B用户评论在第一个地址,那么访问后面两个地址时候是看不到B用户的评论的。解决方法

本站路由不会出现 xxx.cn/a 的情况,但是存在xxx.cn/a/xxx.cn/a/index.html,解决如下(需要 hexo-component-inferno >= 1.1.0,旧版本没有提供接口,自行去 node_modules\hexo-component-inferno\lib\view\comment\waline.js 中修改):

1
2
3
4
comment:
type: waline
path: location.pathname.endsWith('/index.html')?location.pathname.substring(0,(location.pathname.lastIndexOf('/')+1)):location.pathname
# 后面略

完工!(再附加点小内容)

在vscode中写博客


推荐以下插件:
Markdown All in One

Markdown Paste(复制文字的时候,他可以较好地保留网页文字格式)

Paste Image(和上一个差不多,仅有粘贴图片功能)

PicGo (强推,图片还是放图床好点)

markdownlint (检查markdown格式)

hexo中博客开头都有一个header,博主我用vscode的snippets来自动生成这段header,将下面的配置加入到user snippets中的markdown就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"Generate Hexo blog header": {
"prefix": "hexo header",
"body": [
"---",
"title: ${1:title}",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"categories: ${2:categories}",
"tags: [${3:tags, tags, ...}]",
"toc: true",
"---",
"${4:introduction}",
"<!-- more -->",
"${5:body}"
],
"description": "hexo header"
}

友链的自动生成


效果可参考本博客友链页面,99.9%的代码都参考(抄自)https://github.com/Candinya/Kratos-Rebirth
主要修改点:

  • 用一个_friends.yml文件来管理友链
  • 样式微调

都看到这一步了,想必读者有一定的能力了,有问题肯定能自己的解决的啦!

首先在 icarus/include/util 下创建friends.js文件,代码有点长,放gist https://gist.github.com/kuzen/d232e53e887e5f3771cded567ed28ad9

然后给 icarus/script/index.js 最后加上:

1
hexo.extend.generator.register('friends', require('../include/util/friends')(hexo));

然后新建 _friends.yml 中加上下面一段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
friends:
href: "friends"
page:
title: "友链"
comments: false
description: "扩列~"
updated: "2021-12-06"
list:
- name: "xxx的博客1"
bio: "一句话介绍自己吧"
avatar: "https://xxxxxxx/xxxxxx.jpg"
link: "https://xxxxx.xxx"
- name: "xxx的博客2"
bio: "一句话介绍自己吧"
avatar: "https://xxxxxxx/xxxxxx.jpg"
link: "https://xxxxx.xxx"

就可以啦!

部署


部署途径有很多,比如

  1. github page
  2. 自行搭建
  3. 各云服务提供商的静态网站托管
  4. 对象存储COS(注意腾讯云需要先购买备案资源包才能备案)

本站使用腾讯云对象存储,部署时用持续继承自动上传到cos。或者用hexo的插件,如腾讯cos部署插件

作者

Yida

发布于

2021-07-22

更新于

2022-04-16

许可协议

评论