得益于大模型的发展,借助Trae的帮助,终于能按照自己的设计完成一个符合自己预期的主题了。
整体设计上参考了原先使用的hugo-theme-stack主题,不过根据我自己的需求,做了很多调整。
首先整体的布局使用左中右三列,左边是导航栏,中间是内容区域,右边是侧边栏。
导航栏可以切换菜单和文章树,允许用户通过拖拽来调整宽度,在手机端的窄屏上会精简为一个按钮,用户可以点击展开。
文章树是参考notion、知识库等产品的目录结构,是一种很好的整理文章结构的方式,因此通过允许在文章中指定parent来确定父子级关系,从而生成一个文章的树状结构配置。
正文区域引入了霞鹜文楷字体,这是一个开源的中文字体,在中文显示上有很好的效果。
右侧的目录会根据文章的目录结构自动生成,用户可以点击目录项来跳转到对应的位置,当屏幕宽度较少时会隐藏。
整体的色调使用了我入行以来一直喜欢的配色Solarized,整体营造一种纸张感,同时考虑的暗色模式。在这个设计下正文配色有种黑色墨水的感觉,而链接则是一种蓝色墨水的质感。
体验下来基本符合我现阶段的审美了,也许后面会继续优化一下。
不过还是之前说的,一个博客的意义更多的肯定还是内容,对于主题的改造更多地是作者的情怀和个人的情绪价值吧。