【Hexo】网站建设记录-2024年1月26日
本文最后更新于：2024年1月27日 凌晨 02:13
【Hexo】网站建设记录-2024年1月26日
1月21日的时候，因为写ACM算法博客想要添加一个小组件，可以折叠定理的证明内容，所以上网寻找合适的方式。找到一种在markdown中使用html原生的details标签来折叠的方法。但是，太原始了和网站的画风太冲突：
原生的Details标签，点击可展开
啦啦啦~~~那必须得上CSS美化一些。我又萌生了使用CSS动画的念头，可是，details标签点击之后只能立即展开，不能用CSS渐变展开，即使你用JS也不好使。
所以只好自己写一个组件啦~~~非常简单的小组件，但是调动画调了好久，因为我这时CSS还不熟，所以只能去网上找一些模板，然后自己改。
我看到有一个网站上面挂了好多超超超级好看的效果，在翻看几十个大佬作品之后，选了其中一个最”朴实无华“的效果：
效果如下，感觉不错，技术难度也不太高（相比大佬的其他作品而言）：
但是上面仅仅是一个小Tag，并且CSS也挺乱的，于是我又花了几个小时，重新整合到details里面，最后的效果如下：
Definition 定义
啦啦啦~~~
啦啦啦~~~
啦啦啦~~~
啦啦啦~~~
啦啦啦~~~
感觉非常不错，只是展开的时候没有动画。因为写的那时候我还没有意识到details不能用CSS动画渐变展开。
大佬的作品这么牛逼，那么我写的这个小组件肯定也是可以滴！于是我就开始了我的折腾之旅。（我CSS和JS只会个皮毛啊啊啊...）
如果要实现动画，那么就必须要用到JS了。那么整个东西都得重写了，所以，我又又又花了几个小时，重新写了一个JS版本的小组件。
期间还顺便学了SASS，因为想简化CSS的编写，但是，我发现SASS用了之后，CSS的编写反而更加复杂了，所以我就学了也没用。
但是，如果这里面有Mathjax公式块，当组件折叠的时候它因为懒加载没有加载，它的块大小是0，我无法计算展开的高度，如果让它自己撑开来，显得流畅度大大下降，还有各种bug（可能是我太菜了）。所以我又去学了Mathjax的懒加载（Mathjax的文档和Hexo的文档怎么都这么简洁啊。。），又要改fluid的东西，什么ejs啊，js啊，我都不会，只能一点点研究，最后终于搞定了。
啦啦啦~~~
啦啦啦~~~
啦啦啦~~~
超级QQ的~~~
没想到我这个网站还有黑夜模式，那么要不要适配呢...
这下陷入了一个无穷循环，我要是适配了黑夜模式，那么我就要把所有的CSS都改一遍，因为里面的颜色也是写死的。
但是我又不想改，因为我觉得这个效果已经很好了，而且我也不会改，改了也不一定能改好。
而且，我也不知道怎么适配黑夜模式，因为我不知道黑夜模式的CSS是怎么写的，我也不知道怎么去改。
可！是！我！又！不！想！放！弃！
于是乎，我又又又又开始了漫长的研究之旅。（真的很久！至此已经15h x 2天 = 30h）
我先看看我hexo用的fluid主题的黑夜模式是怎么写的，然后我发现，他是用了一个CSS变量，然后在黑夜模式下改变这个变量的值，从而实现黑夜模式。
它把变量放到 :root 里面，然后在黑夜模式下改变这个变量的值，从而实现黑夜模式。
这里fluid又用的是Stylus，我又不会，所以我又去学了一下Stylus。。。好吧，我承认我是个菜鸡。
好在这东西还挺简单的，我很快就学会了，然后我就开始改我的CSS了。
真的改了好久，因为fluid那个Stylus用了一些函数，并且那时候我连 root 都不知道是什么，所以我就只能一个一个的试和猜测。（期间疯狂问ChatGPT，花了好多钱啊啊，好像也就几十块钱XD）
最后，我终于把我的小组件适配了黑夜模式，效果如下：
啦啦啦~~~
啦啦啦~~~
超级黑黑的~~~
这个时候，我已经花了3天 x 15h了，已经上瘾了。这时我又看到有人的网站背景有毛玻璃效果，并且可以固定背景，我觉得很好看，于是我又开始了我的折腾之旅。
我在复制了这位大佬的代码后，效果确实可以。可是看了一会儿，我觉得这个效果不太好，太过于花哨了，阅读效果不好。并且又要适配黑夜模式。。。
于是我想，要是能够切换背景就好了，这样就不用在二者之间选择了。于是我就开始了我的折腾之旅。。。。
这回可不好搞，因为涉及到了Hexo和Fluid主题的修改，而且我又不会JS。。。到Hexo的官网上看了一下，发现Hexo的文档真是依托。。。根本没用。只好自己研究源码喽~~~
于是我把整个Fluid主题的结构和文件都看了一遍，发现主要思路就是 inject 注入，然后在网站源码js里添加一些代码，就可以实现这样的效果。
于是乎，漫长的JS编写过程又开始了。。。（真的很久！又花了15h x 3天 = 45h）
由于这种奇葩的需求，我没去找别人的代码，而是自己写了一个。真的，我写的代码真的很烂，但是我也没办法。期间代码改了好多好多版，从最开始完全耦合在fluid里面，到现在最低耦合的版本，我也是疯了。
尤其是，我又想出了一个更奇葩的想法，我看到全屏背景固定住后，由于要让标题和背景的对比度高，所以必须添加一个灰灰的mask在背景上，但这样就搞得毛玻璃的文章背景显得灰灰的，阅读效果极差。我想了一个笨办法，我把所有透明的组件都添加相同的固定背景（全亮不透明），并且显示的区域和它覆盖的区域一样，这样就可以伪装成没有mask了。
好在CSS支持这个背景的操作，但是JS就复杂了，要为所有透明组件添加wrapper显示背景，再添加mask显示独立的遮罩（后面的是我又想出来的需求。。。）
与此同时，我还希望这个东西方便配置，并且支持热切换。所以，写了很久，读取配置文件注入代码，又是生成JS文件。。。终于在第6天晚上，我把这个东西写完了。
效果如下：
点击右上角的按钮，可以切换主题的效果，可以看到，背景和标题的对比度很高，阅读效果很好。并且如果看腻了就可以切换回来。非常爽！！！
同时，我拓展了fluid主题的设置，写了一个拓展属性的管理器，非常方便地编写拓展功能，并且支持监视配置的变化，实时更新组件样式。我还写了一个子主题管理器，可以方便地切换子主题，并支持子主题的文件分开存放，非常方便。并且选择的子主题会记录在Local Storage里面，下次打开还是这个。每个子主题都可以覆盖父主题的文件，这样就可以实现子主题的定制化了~~~（虽然性能拉跨，但是我不管了，我就是要这么做！）
至此，我终于把我的网站美化完毕了，虽然还可以玩很多内容，但是我已经很满意了。这次先告一段落吧！
这篇文章2k5字左右，花了1.5小时就写好了，还嵌入了一些组件，感觉我的手速变快了~~~
我的VSCode在这个时期装了TODO-Tree插件，用起来还不错，可以把TODO和FIXME的注释都显示出来，还可以自定义颜色，非常方便！
\[ The\ End. \]