icarus 修改笔记

• 为博客更换 Logo
• 为文章添加封面和缩略图
• 添加瀑布流相册
• 为文章添加分类
• 为文章添加标签
• 显示网站安全运行时间
• 补充 Icarus 图标

1. 为博客更换Logo

icarus 主题默认的logo是 icarus 的图标，我们希望将其替换为自己的logo。
设置你站点的logo后，logo会显示在导航栏和页脚。

1.1 替换文字版logo

icarus 提供了一种便捷的更改图标方法，可以像下面这样设置成文字。
打开根目录下的 _config.icarus.yml 文件，修改logo字段：

logo:
    text: My Beautiful Site

1.2 替换图标版logo

如果你有愿意花时间制作图标的话，可以像下面这样设置成路径。
打开根目录下的 _config.icarus.yml 文件，修改logo字段：

logo: /img/logo.svg

---

2. 为文章添加封面和缩略图

若要为文章添加封面图，请在文章的 front-matter 中添加 cover 选项：

title: 这是一篇文章
cover: /_posts/这是一篇文章/cover.jpg
---
文章的内容...

类似地，可以在文章的 front-matter 中为文章设置缩略图：

title: 这是一篇文章
thumbnail: /_posts/这是一篇文章/thumbnail.jpg
---
文章的内容...

文章的缩略图会显示在归档页面和最新文章挂件中。要注意，如果你在front-matter中使用的是图片的路径，你需要确保它是绝对或者相对于你的source目录的路径。

---

3. 添加瀑布流相册

Icarus的主题已经默认支持瀑布流的相册布局，我们可以添加到文章的任意位置。

3.1 创建新页面

在 Git Bash Here 里输入指令：

hexo new page “photos”

然后检查 source 文件夹里是否出现了 photos 文件夹。

3.2 设置配置文件

打开根目录下的 _config.icarus.yml 文件，在menu字段中添加一条：

相册: /photos

并在 plugins 字段下，修改：

gallery: true

3.3 制作相册页面

打开 source\photos 文件夹，找到 index.md 文件，并在旁边创建 img 文件夹。

在 img 文件夹中放入照片并统一命名，此处建议对照片进行处理，单张图片大小不要过大。

打开 index.md，以如下的格式写入：

<div class="justified-gallery">

![](/photos/img/img2.jpg)
![](/photos/img/img1.jpg)
![](/photos/img/img0.jpg)

</div>

注意 <div></div> 和它们中的语句间要加空行。

---

4 为文章添加分类

在每篇博客 .md 文章的头部添加 categories 字段，如：

---
title: icarus 修改笔记
date: 2022-01-05 09:31:41
type: 
- icarus
---

注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

---

5. 为文章添加标签

在每篇博客 .md 文章的头部添加 tags 字段，如：

---
title: icarus 修改笔记
date: 2022-01-05 09:31:41
categories: 
- icarus
tags:
- 笔记
- hexo
- icarus
---

---

6. 显示网站安全运行时间

在想要要显示时间的地方添加如下代码：

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();

    function createtime() {
        var grt = new Date("12/30/2021 10:16:51");
        now.setTime(now.getTime() + 250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = " | 本站已安全运行 " + dnum + " 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒 | ";
    }
    setInterval("createtime()", 250);
</script>

效果如下：

载入天数…载入时分秒…

---

7. 补充 Icarus 图标

Hexo + Icarus 采用了 FontAwesome 图标，并未包含部分图标和 bilibili 这类国产网站图标。所以我们需要让 hexo 添加对这些网站图标的支持，使博客正常显示他们图标。

7.1 下载图标

在Iconfont+图库选择所需的图标，点击加入购物车。再点击右上方进入购物车，选择 Add to Project。然后在 Font class 中，点击 .css 文件，在新页面中右键另存为，将其保存至根目录下 themes\icarus\source\css 文件夹中。如果想对下载的图标的颜色、大小等进行修改，则打开所下载的文件，找到对应项进行修改。

7.2 引入图标

如果想使用所下载的文件，需要在 html 中将其引入。打开根目录下的 themes\icarus\layout\common\head.jsxw 文件，在其它链接后添加一条：

<link rel="stylesheet" href="/css/font.css" />

7.3 使用图标

做完上面的工作就可以将开始将新图标添加至界面上了。打开 _config.icarus.yml 配置文件，在需要使用图标的地方做如下格式的修改：

Zhihu:
    icon: iconfont icon-zhihu
    url: 'https://www.zhihu.com/people/lamber-51'