bloggerv2 建设情况

本文记录了 blogger v2 theme 的建设情况

为何而建

原有xml维护太麻烦了，每次更新都要对2k+行的blogger专属语法xml进行维护。
在此之前，我一直是搭积木的方法，很多组件都依赖 blogger 专属 xml 标签，有学习成本，并且自定义性差。
另外嵌入js一直需要写原生js脚本，容易出错，并且需要大数量地依赖静态js资源提供不同的能力，不好长期维护。

因此我使用了当前较为熟悉的react+typescript这套技术栈重构了整个博客网站结构，视图。

难点和解决方案

动态资源获取

难点很多，最主要的就是，之前通过blogger section提供原生xml嵌入的组件，现在需要重新去挨个等价地实现。这个改动不仅带来了方便，也带来了一些不便。
先说方便吧，我用css in tsx可以非常好地规定每个组件的style，并且自定义流程随心所控。
不便的就是由于自己去实现就需要动态资源的来源，其实在先前的xml theme中，我已经使用了很多feed api，例如手机视图的日期归档等。但是现在大量实现就不止post list了，包括评论，标签，搜索等一切和请求blogger资源的都要去设计等价service代码。

这一点我前期调研过有 itokun99/codepelajar-react: A Blogger Template with React JS (Open Source). 和 uxxSam/react-google-blogger: Responsive React google blogger client build with Material UI for SPA。 但是他们两都有缺点，用的是 blogger v3 api, 需要公开自己的API KEY，他们的代码里也确实这么做的（用的是他们自己的API KEY），但是都失效了，为了规避风险，我不可能使用这些。

最后我还是用了Feed APi， 但是这玩意的文档真的比片还难找，我找遍全网只找到了部分参考。并以此实现了下面几个特性

• Archives (Post list filtered and paginationed by Date, Tags)
• Post Detail Content

就在我准备去实现评论区寻找相关示例参考时，我找到了一个非常神的库
kumardeo/deox: ✨ Internal Packages for personal projects (Plus UI, Web Apps, etc)
我看了这位老哥的其他repo，确实是一位用遍全网Free资源创建奇迹的大神。

发布评论

我用他的库轻而易举的实现了 Comment List，但是现在又有问题，这位老哥只提供了获取评论的方法呀，如何去实现用户写评论？

在我和 Gemini 多轮对话中，Gemini引用到了另外一位前端大神的文章给我一点启发。 博客评论功能升级（增加“留言过滤”、“200条之后自动加载”等） @ 编程随想的博客
这是一篇2014年写的文章，里面介绍了这位博主如何去设计blogger评论（他这里称之留言）功能。
其中他介绍了用pop up弹出blogger评论区窗口从而实现不太割裂的评论体验。

说句纯赞赏的话，这位大神真是神人，2014年，用jquery和纯js的能力，写了7k行的theme插入到 blogger xml template。据他说，他用了大量的本地客户端用例去测试这些功能是否运行正常。 佩服，我现代的react都很吃力。。。

那综合考虑确实只能这要折中的做了，毕竟csrf不太能用iframe，不过原版的blogger中，评论就是内嵌embeded的，或许之后能找到更加好的解决方案？

归档

这是在实现归档过程中发生的。
为了提供两套方案以及缓存，使用了ahooks（感谢阿里开源）的大量hooks（涉及状态刷新和InfiniteScroll）以及indexDB(dexie ORM封装操作)。

明暗两套theme

这完全是靠LLM帮我code的，全局状态管理不太会，最后使用LocalSession做的。ahooks本身的useTheme不太行，真不如expo框架好用

说到expo,当初为了开发Mobile多视图真准备用expo，后来想想这太大了，而且发布web有点杀鸡用牛刀，很多expo特性在browser不支持，需要不断地判断 env=="web" , 这点怕unexpected问题出现。

依然和未来

这是当前已经实现以及计划实现的特性列表

• PostList
• Archives
• Date Filter
• Tag Filter
• Search
• Discuss(Comments)
• Pages
• More Docs

我还是有一点野心的，未来是不是可以用活跃学习的godot4或者更适合并且已经掌握的phaser3去做博客网站上的小游戏？
当前blog的风格我还是特别喜欢的，虽然不能直接复制粘贴原来的风格，但是我在之前的色彩方案基础上又做了一套新style，而且有明暗两套，这是之前template xml无法做到的。