V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
MrBrother
V2EX  ›  分享创造

Hugo 博客主题 Icarus-Lite

  •  
  •   MrBrother · 163 天前 · 2385 次点击
    这是一个创建于 163 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一句话介绍

    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

    其他

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

    16 条回复    2022-01-17 14:14:56 +08:00
    xinyana
        1
    xinyana  
       163 天前 via Android
    我喜欢的样子
    MrBrother
        2
    MrBrother  
    OP
       163 天前 via iPhone
    @xinyana 😘
    zzzain46
        3
    zzzain46  
       163 天前 via iPhone
    目前还不支持 dark mode 吗
    MrBrother
        4
    MrBrother  
    OP
       163 天前 via iPhone
    @zzzain46 我研究研究,希望可以年前做好
    auh
        5
    auh  
       162 天前
    hugo 的很多主题为何都没有文内导航?
    wolong
        6
    wolong  
       162 天前
    《爱莲说》的中文字体很好看
    yibie
        7
    yibie  
       162 天前
    文字部分和卡片的边框挨的有点近,看上去布局有点紧张,可以适当调一下默认文字的大小,和文字在卡片中摆放的位置
    yibie
        8
    yibie  
       162 天前
    很不错!此外提一个小建议:

    文字部分和卡片的边框挨的有点近,看上去布局有点紧张,可以适当调一下默认文字的大小,和文字在卡片中摆放的位置
    MrBrother
        9
    MrBrother  
    OP
       162 天前 via iPhone
    @auh #5

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

    这是我的想法,不知道其他主题是基于怎样的考量
    MrBrother
        10
    MrBrother  
    OP
       162 天前 via iPhone
    @wolong #6

    哈哈,你的电脑上应该预装了 Office 吧?我在 font-family 中为汉字调用的是 STZhongSong ,即华文中宋,这字体会随 Office 安装。我也觉着很好看
    MrBrother
        11
    MrBrother  
    OP
       162 天前 via iPhone
    @yibie #8

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

    至于边距确实是一个问题,调大我嫌它太空了,而且若正文是中文的话,卡片右边会有莫名的多余间隙;调小了就会很挤,也不好看。因此现在暂时设置的是这个数值。不过我用的是 em 而不是 px ,所以你可以直接在自定义 CSS 里面把 html 的 font-size 调小一点看看是否会好些。后续如果我找到了更合适的边距,再 at 你一下
    zackzeng
        12
    zackzeng  
       162 天前
    我也用的这款原版 确实挺好看
    yibie
        13
    yibie  
       162 天前
    @MrBrother 了解,我回头试一试
    chenmobuys
        14
    chenmobuys  
       161 天前
    原版的好看点
    MrBrother
        15
    MrBrother  
    OP
       161 天前 via iPhone
    @zackzeng @14chenmobuys

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

    /t/178310
    /t/672495

    好厉害 Orz
    suyuyu
        16
    suyuyu  
       161 天前
    404 我器了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1551 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:32 · PVG 01:32 · LAX 10:32 · JFK 13:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.