Hugo 博客主题 Icarus-Lite

[MrBrother]

一句话介绍

Icarus-Lite 是一款基于 Hexo 主题 Icarus 的卡片样式制作的单栏 Hugo 主题。

前言

最开始接触到各家的 Pages 静态页面服务时用的是 Jekyll 的主题，后来发现脱离 GitHub 自己搭建环境实在复杂，于是搜索一番后转投 Hexo ，主题选用了新手村的 NexT 。之后有一次玩游戏，在页脚看见了 Icarus 主题的链接，点进去发现太好看了，遂换用该主题。使用过程中遇见过自己瞎改搞出的许多小问题，也去胡乱提过 issues 给作者，人家的回复对新手而言非常友好，因此更喜欢这款主题了。

不过有个小东西始终让我有些头疼：一份完整引入的 bulma 的 CSS 有 160KB 多——哪怕用了 JsDelivr 加载起来还是不够快，而且有很多样式我确实用不上... 因此又搜了一番，用 Chrome 的 DevTools - Coverage 工具给它删了一大半（这个方法很蠢，我后来意识到了），效果也挺好，就剩 10 个 K 。

删是删得爽，用着用着偶尔当然会出问题了，但“又不是不能用”。直到后来发现 Hugo 只需要一个可执行文件便可生成页面，再看这边一个硕大 nodemodules 文件夹的 Hexo ，我暗暗捏紧了手掌，换！

然后发生的事简单来说就是“Hugo 主题不够多，偶然发现的好看主题又限于水平改不动”。纠结了一个周末，不如自己学。于是仿着前面提到的 Icarus ，按照其卡片样式整了一个 Hugo 主题 Icarus-Lite 。期间很多不懂的玩意儿都有网友已写过教程了，很感谢大家。

主题特点

特点（抓抓脑袋）.. 好像没有，只稍微讲一下小功能吧：

Config 文件设置

• CSS 文件可以选择外联或直接内联，因为总共不到 8KB 。

• 导航栏可以选择置顶（ sticky ）或跟随页面滚动。

• 导航栏中的网站 Logo 可以使用 img 元素引入，也可以直接嵌入 SVG 。

• 导航栏每个菜单在浏览器中显示的标题可以自定义。

• 可以全局设置是否让所有文章在列表中都“不显示摘要”（即直接显示全文）。

Front-Matter 设置

• 可以单独为某篇文章设置是否添加“阅读更多”按钮，也可以自定义该按钮的显示文字。

• 如果不想同时让文章标题和“阅读更多”按钮都能点进去，那么可以择一关闭（当然也可以都关掉）。

• 可以在卡片左下角加一个外链按钮，文字也可以自定义。

• 可以在列表视图中隐藏某篇 Post 。

• 可以隐藏卡片左上角的时间。

• 可以单独设置某篇文章“不显示摘要”。

相关链接

GitHub 链接: github.com/airinghost/hugo-theme-icarus-lite

演示站: icarus-lite.zhangjet.com

其他

虽然写得不好，但还是能用嘛（眯眼笑）。祝福大伙新年薪资新气象，给大家提前拜个年！

[xinyana]

我喜欢的样子

[MrBrother]

@xinyana 😘

[zzzain46]

目前还不支持 dark mode 吗

[MrBrother]

@zzzain46 我研究研究，希望可以年前做好

[auh]

hugo 的很多主题为何都没有文内导航？

[wolong]

《爱莲说》的中文字体很好看

[yibie]

文字部分和卡片的边框挨的有点近，看上去布局有点紧张，可以适当调一下默认文字的大小，和文字在卡片中摆放的位置

[yibie]

很不错！此外提一个小建议：

文字部分和卡片的边框挨的有点近，看上去布局有点紧张，可以适当调一下默认文字的大小，和文字在卡片中摆放的位置

[MrBrother]

@auh #5

就我个人而言的话，文章字数过万（也就是说要划很久）且目录结构很复杂才需要文内导航。日常情况下，打个比方说期刊论文，在篇幅有限的那些文章它也是没有目录的。

这是我的想法，不知道其他主题是基于怎样的考量

[MrBrother]

@wolong #6

哈哈，你的电脑上应该预装了 Office 吧？我在 font-family 中为汉字调用的是 STZhongSong ，即华文中宋，这字体会随 Office 安装。我也觉着很好看

[MrBrother]

@yibie #8

感谢建议。卡片内的字体大小之所以是这个数值，是因为我认为目前包括 V2 、知乎等等许多论坛的正文字确实不够大，如果视力状况正常倒还好说，可对近视和老花眼而言看久了一定很累。

至于边距确实是一个问题，调大我嫌它太空了，而且若正文是中文的话，卡片右边会有莫名的多余间隙；调小了就会很挤，也不好看。因此现在暂时设置的是这个数值。不过我用的是 em 而不是 px ，所以你可以直接在自定义 CSS 里面把 html 的 font-size 调小一点看看是否会好些。后续如果我找到了更合适的边距，再 at 你一下

[zackzeng]

我也用的这款原版 确实挺好看

[yibie]

@MrBrother 了解，我回头试一试

[chenmobuys]

原版的好看点

[MrBrother]

@zackzeng @14chenmobuys

嘿嘿，的确是好看，好看我才用了好久嘛。大佬那个主题从开坑至今已经更新六、七年了：

/t/178310
/t/672495

好厉害 Orz

[suyuyu]

404 我器了