引入
上一篇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