Icarus指南

Icarus指南

Icarus的默认主题配置文件为_config.icarus.yml
此文件定义了站点全局的布局与样式设置,同时也控制了例如插件与挂件等外部功能的配置。
本文详细介绍了主题的一般配置,并且解释了Icarus使用哪些配置文件和它是如何生成并验证这些配置。

配置基础属性

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
version: 4.0.0  // 版本号
variant: default // 皮肤,目前支持default和cyberpunk
logo: /img/logo.svg 或者
logo:
text: My Beautiful Site
head:
favicon: /img/favicon.svg
article: // 代码高亮
highlight:
# 代码高亮主题
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light
# 显示复制代码按钮
clipboard: true
# 代码块的默认折叠状态。可以是"", "folded", "unfolded"
fold: unfolded

折叠代码块

1
2
3
{% codeblock "可选文件名" lang:代码语言 >folded %}
...代码块内容...
{% endcodeblock %}

文章配置

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title: Icarus指南 // 标题
date: 2020-09-22 // 创建时间
tags: // 标签
- Icarus指南
categories: // 分类
- HexoTheme
language: zh-CN // 语言
toc: true // 是否生成目录
providers: // 使用cnd地址
cdn: loli
fontcdn: loli
iconcdn: loli
cover: /gallery/covers/beautiful-landscape.svg // 封面图
thumbnail: /gallery/covers/beautiful-landscape.svg // 缩略图
comment: // 评论
search: // 搜索
share: // 转发
widgets: // 挂件

按钮

点击展开代码
1
2
3
4
5
6
<div class="buttons">
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
</div>

显示一言增加了一个单击事件

↑↑↑ 试着点击“显示一言”!
点击展开代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button class="button is-info" onclick="showHitokoto(event)">显示一言</button>
<blockquote class="hitokoto">↑↑↑ 试着点击“显示一言”!</blockquote>

<script>
function showHitokoto (event) {
event.target.classList.add('is-loading');
$.ajax({
type: 'GET',
url: 'https://v1.hitokoto.cn/',
success: function (data) {
$('.hitokoto').text(data.hitokoto);
event.target.classList.remove('is-loading');
}
});
}
</script>

进度条





点击展开代码
1
2
3
4
5
<progress class="progress is-info" value="20" max="100"></progress>
<progress class="progress is-success" value="40" max="100"></progress>
<progress class="progress is-warning" value="60" max="100"></progress>
<progress class="progress is-danger" value="80" max="100"></progress>
<progress class="progress is-info" max="100"></progress>

标签页

Pixabay 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材…

网易云音乐 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。

哔哩哔哩 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。

点击展开代码 >folded
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
<div class="tabs is-toggle"><ul>
<li class="is-active"><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a></li>
</ul></div>

<div id="Pictures" class="tab-content" style="display: block;">
[Pixabay](https://pixabay.com/zh/) 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材...
</div>
<div id="Music" class="tab-content">
[网易云音乐](https://music.163.com/) 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。
</div>
<div id="Videos" class="tab-content">
[哔哩哔哩](https://www.bilibili.com/) 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。
</div>

<style type="text/css">
.content .tabs ul { margin: 0; }
.tab-content { display: none; }
</style>

<script>
function onTabClick (event) {
var tabTitle = $(event.currentTarget).children('span:last-child').text();
$('.article .content .tab-content').css('display', 'none');
$('.article .content .tabs li').removeClass('is-active');
$('#' + tabTitle).css('display', 'block');
$(event.currentTarget).parent().addClass('is-active');
}
</script>

或者

点击展开代码 >folded
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="tabs is-boxed my-3">
<ul class="mx-0 my-0">
<li class="is-active">
<a href="#install-source">
<span class="icon is-small"><i class="fas fa-file-code" aria-hidden="true"></i></span>
<span>从源码安装</span>
</a>
</li>
<li>
<a href="#install-npm">
<span class="icon is-small"><i class="fas fa-cubes" aria-hidden="true"></i></span>
<span>使用NPM安装</span>
</a>
</li>
</ul>
</div>
<div id="install-source" class="tab-content">
从GitHub的仓库中下载源码的压缩包并解压到你Hexo站点的主题目录中。
或者,你可以使用Git来克隆Icarus的代码仓库到`themes`目录下:

<figure class="highlight plain"><figcaption><span>Git Bash/命令行</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https:&#x2F;&#x2F;github.com&#x2F;ppoffice&#x2F;hexo-theme-icarus.git themes&#x2F;icarus -b &lt;version number&gt; --depth 1</span><br></pre></td></tr></table></figure>

<p> 你可以省略<code>-b &lt;version number&gt;</code>来获取Icarus的最新开发版本。<br> 如果你想同时下载Git仓库的完整提交历史,请同时省略<code>--depth 1</code><br> 另外,你也可以使用下面的命令将Icarus安装为Git子模块(submodule):</p>
<figure class="highlight plain"><figcaption><span>Git Bash/命令行</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git submodule add https:&#x2F;&#x2F;github.com&#x2F;ppoffice&#x2F;hexo-theme-icarus.git themes&#x2F;icarus</span><br></pre></td></tr></table></figure>
</div>

<div id="install-npm" class="tab-content is-hidden">
若要使用NPM将Icarus安装为Node包,在你的Hexo站点根目录运行如下命令:

<figure class="highlight plain"><figcaption><span>命令行</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -S hexo-theme-icarus</span><br></pre></td></tr></table></figure>
</div>

彩色突出

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

活用 Bulma 美化 Icarus 文章

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
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
<div class="notification is-info">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div>

<div class="notification is-success">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div>

<div class="notification is-warning">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div>

<div class="notification is-danger">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div>

<article class="message is-info"><div class="message-body">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div></article>

<article class="message is-success"><div class="message-body">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div></article>

<article class="message is-warning"><div class="message-body">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div></article>

<article class="message is-danger"><div class="message-body">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div></article>

<article class="message is-info"><div class="message-header">
活用 Bulma 美化 Icarus 文章
</div><div class="message-body">
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
</div></article>

颜色遮罩(你知道的太多了)

我在这里 我在这里
点击展开代码 >folded
1
2
3
4
5
6
7
8
9
10

<style type="text/css">
.heimu { color: #000; background-color: #000; }
.heimu:hover { color: #fff; }
.heimu-red { color: red; background-color: red; }
.heimu-red:hover { color: #fff; }
</style>


<span class="heimu">我在这里</span>

封面图来源声明

   Vector Landscape Vectors by Vecteezy
点击展开代码
1
2
3
4
<a class="tag is-dark is-medium" href="https://www.vecteezy.com/free-vector/vector-landscape" target="_blank">
<span class="icon"><i class="fas fa-camera"></i></span>&nbsp;&nbsp;
Vector Landscape Vectors by Vecteezy
</a>


Something wrong with this article? Click here to submit your revision.

Vector Landscape Vectors by Vecteezy

作者

blacklisten

发布于

2020-09-22

许可协议

CC BY-NC-SA 4.0

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×