# 折腾了下博客主题 最近折腾了下不同博客和主题。简单记录下 ## Astro 之前折腾了下 Astro ，从文档介绍上来看相当不错。但是实际拉一个博客模板，实际运行来看。是不太符合预期的。 其实这是也是多方面影响，Astro 自身是模板引擎，而非博客引擎。大量功能需要自己写代码实现。更换主题与 Wordpress 或者其他博客系统不同，与其说是换主题，不如说是重建项目然后文章迁移。然后构建速度和 Hugo 也无法比较。不过 Astro 使用 js 生态确实方便，官网上也说，可以在每个岛上同时使用 Vue ， React 等，所以主要特点应该是在这里。 最开始其实我看的是 NextJS 的，因为有几个博客我觉得设计的很好看。后来我发现给我惊艳效果感受，基本都是 CSS 的功劳。 ## Landscape 不过在上手试用 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 还都没有，也是懒得移植了。 ## Unocss 像是 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 就行了。 ## hugo-m3 因为移植这个 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](https://github.com/HEIGE-PCloud/DoIt) 主题基于 [LoveIt](https://github.com/dillonzq/LoveIt) ，而 [LoveIt](https://github.com/dillonzq/LoveIt) 原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt) 。听起来让我想起了 Hexo 的好几个 Next 主题。隔壁 Zola 也有好几个移植 PaperMod 的。也不知道都能维护多久。 虽然理论上来说，静态博客本身部署完也就是往那一扔，不用考虑什么服务器安全，数据库维护等问题。而且浏览器也是往前兼容的，好像不维护也可以，有点 bug 问题也不大。甚至动态博客不常维护，没人攻击问题也不大。比如 https://www.ruanyifeng.com/blog/ 博客系统以前看文章说过，就挺老的似乎，还是个曾经有商业公司支持的博客系统。 说起来，估计也有不少博客，折腾起来就是为了练手的，或者试试新技术的。有的教后端 或者前端，或者全栈的书，案例也有博客系统的。开发者可能都不经常写博客，或者不用自己写的博客系统。搞出的博客系统，用的都是最新的，未成熟的技术，然后丢在仓库吃灰。 不过搜索一些教程，也确实能找到一些个人博客。有段时间关注了下十年之约的聚合，也能看到几篇文学类的短文，或者生活流水账，大部分还是技术类文章。