2020-09-22Hexo18 分钟读完 (大约2683个字)0次访问

Icarus指南

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

配置基础属性

_config.icarus.yml

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

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: // 挂件

按钮

点击展开代码

<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>

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

↑↑↑ 试着点击“显示一言”！

点击展开代码

<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>

进度条

点击展开代码

<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>

标签页

Pictures
Music
Videos

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

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

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

点击展开代码 >folded

<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

<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 语法就不够用了，所以在此分享一下我的高级玩法。

活用 Bulma 美化 Icarus 文章

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

点击展开代码 >folded

<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


<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

点击展开代码

<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

Icarus指南

https://crazychenzi.github.io/nblogs/Hexo/icarus%E6%8C%87%E5%8D%97/

作者

CrazyChenzi

发布于

2020-09-22

许可协议

CC BY-NC-SA 4.0

#Hexo-Theme Icarus指南

Icarus指南

配置基础属性

文章配置

按钮

进度条

标签页

彩色突出

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

封面图来源声明

作者

发布于

许可协议

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

评论

目录

Your browser is out-of-date!