临近小猫黄基金的生日,自作多情的铲屎官写了一个以他名字命名的Hugo主题送给作为生日礼物。2025.02.16,V1.0.0-happybirthday。

前言

在构建Hugo的站点过程中,看到了太多的主题和喜欢的设计,之前也对PaperMod做了非常多的修改和功能接入。但是在最后,还是选择了从头开始自己写一个主题,也许是技术人所谓的追求作祟,也许是想给自家猫仔一个特殊礼物的虚荣心作祟。总之,这个以我们家小猫黄基金命名的Hugo主题,在他生日的当天如期发布了。

由于本人不是前端工程师,实现能力有限,更新进度可能欠佳。这一个版本是作为礼物送给我家毛孩子的,可能不是非常完美,但我自觉使用是没有问题的。如果各位有对这个主题的建议,欢迎issue或联系本人。

主题介绍

主题源码已发布在 ZaNksC/hugo-theme-fund,如需使用请自取。

ZaNksC/hugo-theme-fund

第一个版本实现了一些基础功能:

  • 主题基本功能
  • 全站多作者支持
  • 双主题切换
  • 代码渲染加强
  • 图片灯箱
  • 评论系统集成

以下是一些主要页面的展示

首页

首页的布局抛弃了PaperMod的Profile模式,虽然Profile模式的布局确实很有格调,但是作为一个博客,首页展示的信息过于少,博文的链接也被藏了起来。Fund的首页设计使用了左右布局,将博文列表放在了左侧,其中左侧的最顶部,使用了一个滚动屏来实现推荐阅读。右侧用于展现博客的元数据信息。

home-page

博客页

博文的页面保持了主页的基本布局,左侧为内容,右侧为作者信息与目录等。博客的元数据信息被放到了博客的头部,封面虚化后作为半页背景。

single-page

其中正文中的代码部分做了重新渲染,使用类似苹果窗口的外观设计,保留了Hugo的高亮、行号等特性的同时,拓展了固定高度、可折叠、显示标题等特性。另外做了一些正文阅读体验的加强,如图片实现了灯箱,表格样式、引用适配主题等。

code

标签&分类页

采用了比较简单的页面设计,可以点击某个标签跳转到对应的列表页。

label

友链

友链页保留了内容编辑的能力,content部分采用了与正文一致的样式。友链列表的展示使用了栅格布局。(友链存活检测未实现)

friends

碎碎念

碎碎念的页面参考了很多个人博客的短博文设计(朋友圈)等,保留站点基本布局,将多篇文章渲染在同一个页面中,实现了类似于微信朋友圈的效果(自适应图片布局,但可能不好用)。同时,支持每条碎碎念拥有独立的评论空间。

chrips

About页

关于页适配了全站多作者的设计,将作者信息以tab形式渲染到同一页面。介绍信息与博客正文采用同一样式渲染。

about