Hexo & Icarus 个性化配置

Hexo & Icarus 个性化配置

引入

上一篇Blog中分享了如何使用 Hexo & Icarus 完成博客的搭建与部署。完成主题的基本配置后,有一些不满意的地方:图标仅可配置一项、无背景配置选项、无 ICP 备案配置选项。

在此,分享一下我的解决方案。

额外图标

打开 icarus主题目录\layout\common\head.jsx,在 </head>; 行上方添加引入图标的 link 标签。

1
2
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_xxxxxxxxx.css" />
</head>;

添加的是 iconfont 图标,就可以通过 iconfont icon-xxx 来使用相应的图标了。

背景图片

新建文件:icarus主题目录\source\css\custom.styl,在 icarus主题目录\source\css\style.styl 末尾添加引入新样式文件代码:

1
2
// custom
@import './custom'

接着就可以在 custom.styl 文件中添加自己需要的样式。

选了一张看起来比较舒服的纹理图片作为背景,放入 source/img/background.png,最后在 custom.styl 中添加相关代码:

1
2
3
4
5
// 背景纹理图片
.is-2-column {
background-image: url(/img/background.png);
background-repeat: repeat;
}

纹理图片来源: Subtle Patterns | Free textures for your next web project

备案号

可以参考:在hexo的Icarus主题页面底部加入备案号 - 编程技术笔记 (yxchangingself.xyz)

在主题配置文件 _config.icarus.yml 中新增一项:

1
2
3
icp:
    title: 闽ICP备xxxxxx号-2
    url: https://beian.miit.gov.cn/

要在 icarus 主题目录\layout\common\footer.jsx 中添加 icp 相关配置的解析与渲染:

解析

搜索相关代码找到对应位置加入 icp 字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const {
logo,
logoUrl,
siteUrl,
siteTitle,
siteYear,
author,
links,
copyright,
showVisitorCounter,
visitorCounterTitle,
// 备案号
icp
} = this.props;
1
const { logo, title, author, footer, plugins, icp } = config;
1
2
3
4
5
6
7
8
9
10
11
12
13
return {
logo,
logoUrl: url_for(logo),
siteUrl: url_for('/'),
siteTitle: title,
siteYear: date(new Date(), 'YYYY'),
author,
links,
copyright: footer?.copyright ?? '',
showVisitorCounter: plugins && plugins.busuanzi === true,
visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>'),
icp
};

渲染

搜索相关代码找到对应位置加入渲染代码

1
2
3
4
5
6
7
8
9
<p class="is-size-7">
<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 /><br />
<span>ICP&nbsp;&nbsp;</span><a href={icp.url} target="_blank">{icp.title}</a>
{showVisitorCounter ? <span id="busuanzi_container_site_uv"
dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
</p>

最后

完成必要的一些个性化配置,就该收手啦。

虽然主题样式上还有很多可以折腾,但是Blog的内容才是关键。所以,时间精力还是用在刀刃上吧。

   Vector Landscape Vectors by Vecteezy
作者

AkiChase

发布于

2024-01-03

更新于

2024-01-07

许可协议