折腾了下博客主题

最近折腾了下不同博客和主题。简单记录下

之前折腾了下 Astro ,从文档介绍上来看相当不错。但是实际拉一个博客模板,实际运行来看。是不太符合预期的。

其实这是也是多方面影响,Astro 自身是模板引擎,而非博客引擎。大量功能需要自己写代码实现。更换主题与 Wordpress 或者其他博客系统不同,与其说是换主题,不如说是重建项目然后文章迁移。然后构建速度和 Hugo 也无法比较。不过 Astro 使用 js 生态确实方便,官网上也说,可以在每个岛上同时使用 Vue , React 等,所以主要特点应该是在这里。

最开始其实我看的是 NextJS 的,因为有几个博客我觉得设计的很好看。后来我发现给我惊艳效果感受,基本都是 CSS 的功劳。

不过在上手试用 Astro 之前,有看着不错的主题。因此前几天,我把 Astro 一个主题移植到 Hugo 了。主题取名 Hugo-Landscape 。

Github https://github.com/kkbt0/Hugo-Landscape

Demo https://kkbt0.github.io/Hugo-Landscape/

移植自 Hexo-Theme-vivia 以及 Astro-Theme-Fuwari 。部分代码参考 Hugo-Theme-DoIt,而 vivia 是 Hexo Landscape 修改来的。所以取名 Hugo-Landscape 。

一直想在博客主题里尝试 TailwindCSS 来着,也想尝试 Unocss 。因此使用 Unocss 兼容 Tailwind 部分代码。移植过程非常粗暴,因为 vivia 使用 Stylus 和 EJS 实现,而 Fuwari 也包括 Stylus 和 TailwindCSS 代码。其中有些语言我都不太了解,因此我复制了大量最终生成的 CSS 代码。

最终效果还是不错的,只是不太适合我这 20 多个分类的用户,这会导致侧边栏很长。虽然原来主题侧边栏有收起功能,但是我还没移植,即使只有几个,也是看着侧边栏散乱。而且我现在使用的 DoIt 很好用,很简洁。功能上对比,代码复制,代码折叠,目录功能 Hugo-Landscape 还都没有,也是懒得移植了。

像是 Hugo Zola 都使用了 SCSS 。SCSS 号称是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言。和 Hugo 配合使用起来效果很好,但是我之前了解 TailwindCSS 就想要尝试了,说是原子化 CSS 。正好移植主题用的都是 Tailwind ,没用上 SCSS 。然后看文章又用了 Unocss 。

Tailwind 有人觉得有点像是 Bootstrap 的一些概念搞得新工具。不过从工具链上来看,还是比较完善而且现代化的。使用体验上也是挺有趣的,有点像是写语法糖。

在 Hugo 中使用 Unocss 还是比较简单的,虽然没法像官网文档里 Vue 那样能直接整合进入那一套工具链,但大概也是够用。起步运行 npx unocss "layouts/**/*.html" -o "static/css/uno.css" --watch 然后引入生成的 CSS 就行了。

因为移植这个 Landscape ,相当一部分是批量粗暴地复制 CSS ,移植的时候就感觉应该可以更好的利用 Unocss 等工具。于是我新建了个主题,试了试。目前大概是这样的

https://archived.ftls.xyz/hugo-m3/

之前觉得 https://gridea.dev/ 首页 Demo Bento 设计放在在博客里挺新鲜,于是复制过来。想了想,发现还是不太适合做首页,不仅承载内容有限,文字不能太密,而且大概需要个根据元素和文字长度之类的设计一下,才不显得突兀。于是放在了设置页面。

在了解 Bento 的时候,发现了个使用工具栏的博客 https://www.ibelick.com/blog/create-bento-grid-layouts 。(说起来这个博客大概是 NextJs 写的,我看源码的时候还报了一个客户端应用错误,后来我尝试复现也没成功)

虽然工具栏和我使用的安卓移动端 Via 浏览器工具栏有点冲突,部分重叠了,但是看上去倒是新鲜,于是也模仿了下其中主题明暗切换方式。整体布局是按照全屏模式下的手机 APP 写的,虽然看起来可能不太像。按我常常使用的安卓移动端 Via 浏览器全屏模式,倒是还可以。

写完还是没弄明白 Unocss 的排版预设 prose 怎么写,好像和 TailwindCSS 的不一样,文档里倒是提供了几个颜色方案。还加上点 CSS 才给代码背景换了个颜色。之前我还想给代码加个 tomorrow-theme 来着,看起来也只能在 CSS 文件里面写了。

大概下次会试试 SCSS 做一下对比。

截止发文我使用的是静态博客生成器 Hugo ,主题是 DoIt 。一开始找主题的时候,目标是中文搜索和 pJax 来着,但是我开始使用 DoIt 的时候 pjax 好像就是没有效果,维护着维护着还给 pJax 删除了。但代码折叠功能很好用,因为有些文章代码确实很长,也就一直这么用了。

这个 DoIt 主题基于 LoveIt ,而 LoveIt 原型基于 LeaveIt 主题KeepIt 主题 。听起来让我想起了 Hexo 的好几个 Next 主题。隔壁 Zola 也有好几个移植 PaperMod 的。也不知道都能维护多久。

虽然理论上来说,静态博客本身部署完也就是往那一扔,不用考虑什么服务器安全,数据库维护等问题。而且浏览器也是往前兼容的,好像不维护也可以,有点 bug 问题也不大。甚至动态博客不常维护,没人攻击问题也不大。比如 https://www.ruanyifeng.com/blog/ 博客系统以前看文章说过,就挺老的似乎,还是个曾经有商业公司支持的博客系统。

说起来,估计也有不少博客,折腾起来就是为了练手的,或者试试新技术的。有的教后端 或者前端,或者全栈的书,案例也有博客系统的。开发者可能都不经常写博客,或者不用自己写的博客系统。搞出的博客系统,用的都是最新的,未成熟的技术,然后丢在仓库吃灰。

不过搜索一些教程,也确实能找到一些个人博客。有段时间关注了下十年之约的聚合,也能看到几篇文学类的短文,或者生活流水账,大部分还是技术类文章。