引入
上一篇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: `© ${siteYear} ${author || siteTitle}` }}></span>
Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> &
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
<br /><br />
<span>ICP </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
