Icarus主题DIY

发表更新网站日志7 分钟读完 (大约2898个字)

Icarus主题确实很好看，不过有些地方我不太满意，就自己到处找美化教程，于是就有了现在的博客界面。本文列出了我修改的一些地方，供有兴趣的朋友参考。
本文所参考的文章链接如下：

本文所使用的Icarus版本为5.1.0，以下修改不保证在其它版本能正常生效。

准备工作

首先我们需要找到Icarus主题的资源目录。如果是通过npm安装的Icarus，其目录应在/node_modules/hexo-theme-icarus/下。下文将以icarus/代替这个路径。
在icarus/source/css/下新建custom.styl文件，然后打开同目录下的style.styl文件，在最后添加一行：

1
@import './custom'

另外，由于下文可能涉及到_config.yml和_config.icarus.yml两个文件的修改，请注意这两个文件在博客的根目录（以/代替根目录）。

网站样式

修改网站背景

Icarus默认的背景是纯色，很单调，所以我们来修改一下背景图片。
在icarus/source/css/custom.styl中添加：

1
2
3
4
5
6
7
8
body { 
    background-image: url(/img/background.jpg);//改成自己的背景地址
    background-position: center center;//居中显示图片
    background-repeat: no-repeat;//如果不指定则会重复显示图片直到把页面填满
    background-attachment: fixed;//固定图片不随页面滚动
    background-size: cover;//指定图片大小为覆盖整个页面
    //background-color: #RRGGBBAA;//当然你也可以只指定背景色
}

图片地址可以是一个相对地址，也可以调用随机图片API。

修改导航栏

默认的导航栏为白色，带有logo，并且不能始终置顶。我们来修改一下。

svg格式的logo似乎没法加载，在移动端的显示效果很差，所以我干脆就删掉了。
找到icarus/layout/common/navbar.jsx，删除以下代码中注释”begin”到”end”之间的内容。

1
2
3
4
5
6
7
8
9
10
return <nav class="navbar navbar-main">
	<div class="container navbar-container">
		<!--begin-->
		<div class="navbar-brand justify-content-center">
			<a class="navbar-item navbar-logo" href={siteUrl}>
				{navbarLogo}
			</a>
		</div>
		<!--end-->
		<div class="navbar-menu">

修改颜色

在icarus/source/css/custom.styl中添加：

1
2
3
4
5
6
7
.navbar {
    background-color: #ffffff00;//这个设置的作用请自行体会
    box-shadow: none;//去掉边框的阴影效果
}
.navbar-menu {
    background-color: #f2e6cea5;//在这里改颜色，RGBA颜色值
}

如果想要修改菜单在高亮和鼠标悬浮时的颜色，可在.navbar-menu中添加：

1
2
3
4
5
6
7
8
.navbar-menu {
    .navbar-item{
        &:hover, &.is-active{
            color: #2177b8;
            background-color: #f2deb6a5;
        }
    }
}

修改高度

继续在.navbar-menu中添加：

1
2
3
.navbar-menu {
    height: 3rem;//单位可用px或rem
}

设置置顶

继续在.navbar中添加：

1
2
3
4
5
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
}

此时导航栏就会一直留在顶部了。

修改卡片

这里的卡片（card）包括两侧的挂件（widget）和中间的文章页面（article）。

修改透明度

为了能透过卡片看到设置的背景，有必要进行透明度的设置。
在icarus/source/css/custom.styl中添加：

1
2
3
.card {
    background-color: #f8f4eddf;
}

正常情况下背景应当是纯白色（#ffffff），这是RGB颜色值。为了实现透明，需要在最后加上透明度（Alpha），”00”表示完全透明，”ff”表示完全不透明，根据需求可以自行调整。

修改宽度

在使用宽屏的情况下，卡片对于屏幕的利用率很低。需要对不同屏幕大小做适配。
首先打开icarus/source/css/style.styl文件，插入以下代码中注释”begin”和”end”之间的行。

1
2
3
4
5
6
7
8
9
// Base CSS framework
//begin
$gap ?= 64px
$tablet ?= 769px
$desktop ?= 1440px
$widescreen ?= 1600px
$fullhd ?= 1920px
//end
@import '../../include/style/base'

各参数的含义我也是一知半解，姑且这么设置，各位也可以自行摸索。
（据我测试，当可视宽度 < $tablet 时，对应的是移动端布局；其它数值含义应该是类似的）
然后在icarus/source/css/custom.styl中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen and (max-width: 768px), print{
    .is-4-desktop {
        width: 20rem;
    }
}
@media screen and (min-width: 769px) and (max-width: 1439px), print{
    .column.is-4, .column.is-4-tablet, .is-4-desktop, .is-4-widescreen {
        width: 20rem;
    }
    .column.is-8, .column.is-8-tablet, .is-8-desktop, .is-8-widescreen {
        width: calc(100% - 20rem);
    }
}
@media screen and (min-width: 1440px), print{
    .column.is-4, .column.is-4-tablet, .is-4-desktop, .is-4-widescreen {
        width: 25rem;
    }
    .column.is-8, .column.is-8-tablet, .is-8-desktop, .is-8-widescreen {
        width: calc(100% - 25rem);
    }
}

我大概解释一下上面的代码。我的理解不一定准确，仅供参考。
第一个代码块是移动端布局，给widget设置一个20rem的固定宽度。
第二个代码块是平板布局，给widget设置一个20rem的固定宽度，同时设置article宽度为总宽（100%）减去widget宽度（20rem）。
第三个代码块是大屏布局，给widget设置一个25rem的固定宽度，同时设置article宽度为总宽（100%）减去widget宽度（25rem）。
经过以上设置后，页面的利用率就得到了提升。当然也可以设置成完全填满，不过那就有些不美观了。

添加圆角

给卡片添加圆角能让其看起来更美观。
在icarus/source/css/custom.styl中添加：

1
2
3
.card {
    border-radius: 15px;//圆角值可自行调整
}

自定义页脚

修改颜色

在icarus/source/css/custom.styl中添加：

1
2
3
.footer {
    background-color: #f2e6cea5;
}

跟上面修改导航栏是类似的。

添加备案号

本站的服务器并不是用的国内的，所以不需要备案。但是这肯定是有需求的，官方没给接口，就只能自己改咯。
找到icarus/layout/common/footer.jsx文件中的class为”level-start”的div容器，在其中合适的位置添加代码：

1
2
<a href="备案网址">xICP备xxxxxxx号</a>
<!--是否添加<br>换行符请自行决定-->

添加运行时间

首先在/source/js/下新建runtime.js文件，复制如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function show_runtime(){
	Begin = new Date("05/11/2023 18:00:00");//这里改成自己的建站时间
	Now = new Date();
	T = (Now.getTime() - Begin.getTime());
	if(T<0)
		return;
	a = T / 86400000;
	day = Math.floor(a);
	b = (a - day) * 24;
	hour = Math.floor(b);
	c = (b - hour) * 60;
	minute = Math.floor((b - hour) * 60);
	second = Math.floor((c - minute) * 60);
	if(typeof runtime_page !== 'undefined')
		runtime_page.innerHTML = "截至目前，本站已经运行了" + day + "天" + hour + "小时" + minute + "分" + second + "秒。";
	if(typeof runtime_footer !== 'undefined')
		runtime_footer.innerHTML = "本站已平稳运行" + day + "天" + hour + "小时" + minute + "分" + second + "秒~";
}
setInterval(show_runtime, 1000);

runtime_page和runtime_footer是我分别用来放在页面里和页脚上的两段话，根据需要可以自行调整。
在icarus/layout/common/footer.jsx中找到class为”level-start”的div容器，在其末尾添加代码：

1
2
3
4
5
<div class="level-start">
	<!--以上部分不要修改-->
	<p class="is-size-7"><span id="runtime_footer"></span></p>
	<script src="/js/runtime.js"></script>
</div>

如果需要在正文中插入运行时间，只需在md文件中加上下面这行：

1
<span id="runtime_page"></span>

之所以用两个不同的id，是因为相同id会互相冲突，导致两个都不显示。

文章样式

文章布局调整

这一部分我还在调试，待补充。

调整页边距

在icarus/source/css/custom.styl中添加代码：

1
2
3
4
.article {
    margin-right: 2px;
    margin-left: 2px;
}

图片居中

默认情况下在文章中插入图片，会发现图片的标题居中了，但是图片却是左对齐。
尝试在img的style属性中加入margin控制边距，发现无效。这是因为img元素属于内联元素，无法设置边距。
为了实现图片居中，在.article中继续添加：

1
2
3
4
5
6
.article {
    .content a img {
        margin: auto;
        display: block;
    }
}

这段代码的意思是将文章中的img元素改为块级元素（block），边距为自动（也就是居中）。

文章目录设置

固定目录

在阅读文章的时候，我们希望目录应当始终位于可视区域，不应随页面滚动而消失。因此需要固定目录这个widget。
Icarus官方是有固定widget的设置的，但是它只能对于左边或者右边的widget整体进行固定，不符合需求，这可以通过给toc单独设置sticky属性解决。
在icarus/source/css/custom.styl中添加代码：

1
2
3
4
#toc {
    position: sticky;//设置为固定
    top: 3.5rem;//距离页面顶端的距离
}

顶端距离的设置取决于导航栏是不是固定在页面顶部。
如果不固定，可以设置得小一点；如果固定的话，就要调整到不被遮挡的程度。

添加目录滚动条

如果子目录足够多，展开时整个目录组件超出了屏幕，导致无法查看下面的目录。这时候就需要给它添加滚动条。
接着在#toc中添加：

1
2
3
4
#toc {
    max-height: calc(100vh - 3.5rem);//减掉的值要与上面的top值一样
    overflow-y: scroll;//在目录右侧显示滚动条
}

这样目录就拥有滚动条了。

仿萌百黑条

萌百页面中的黑条是出了名的，可以隐藏一些不想让人直接看到的内容。
实现起来非常简单，只需要在icarus/source/css/custom.styl中添加代码：

1
2
3
4
5
6
7
.heimu {
    color: #000000;
    background-color: #000000;
    &:hover{
        color: #ffffff;
    }
}

在需要添加黑条的地方写上下面这句代码即可。

1
<span class="heimu>要隐藏的文字</span>

但要注意，在夜间模式下黑条显示是有问题的，这一点萌百也一样。

其它设置

自定义404页面

404页面用来告诉访客“打不开网页是因为地址不存在，而不是服务器有问题”。
我听说有个叫“404公益”的项目，本来想加入的，然后去查了一下，它现在虽然还在运营，但是提供的内容已经没以前丰富了。所以我就只找了个很简单的模板，改一下就是我的了。
404页面需要在/source/下新建404.html文件，然后进行编辑。
注意！在完成修改后，如果直接部署，hexo也会对404页面进行渲染，而这并不是我们希望看到的。所以需要把它列入排除列表，这样hexo只会将其复制到/public/目录。
在/_config.yml中找到skip_render，添加项目：

1
2
skip_render:
  - '404.html'

保存后执行hexo clean && hexo g，在/public/中检查404页面是否被渲染。

文章加密

如果需要对部分文章进行加密，那么你需要下面这个插件。
加密功能由hexo-blog-encrypt插件提供支持，主页上有帮助文档，此处不再赘述。
安装好插件后，需要在/_config.yml中进行配置，在末尾添加：

1
2
3
4
5
6
7
8
# Security
encrypt:
  enable: true
  silent: true
  abstract: 这篇文章被加密了哦，请输入密码查看！
  message: 请在此输入密码
  theme: default
  wrong_pass_message: 密码不正确哦！请不要试密码！

在文章信息头添加“password”字段即可实现对指定文章的加密。

结语

以上是我对Icarus主题的一些个性化设置，可能并不全面。如果你对我没有提到的部分感兴趣的话，欢迎与我联系！

Icarus主题DIY

https://blog.xenon2333.online/posts/2023/6.html

作者

Xenon

发布于

2023-05-18

更新于

2023-05-25

许可协议

#

喜欢这篇文章？打赏一下作者吧

关注我
×