Morecho 主题开发日记

你为什么这么熟练

这个寒假开始的时候，我立下了一个 Flag：要在这个寒假内把自己的博客重做一次。经过了长时间的颓废之后的本来快要开学的最近一段时间才着手开始做，但是我想说，你怎么做博客做的这么熟练啊kusa。
[这篇是因为半夜爆肝没有灵感了所以随手写出来的，如果阅读过程中有什么不适请立即停下]

就几天时间你也能整迭代开发

二十多天前开坑用 Typecho 引擎做新主题，顺势起了个名字叫做 Morecho。但是做了几天之后因为写的太丑就跑去学 python 了，做了个小作品之后又回过头来继续填坑。经过一天的考察决定还是用 jekyll + bootstrap + JQuery 的组合做，然后请 @Tabing [不是苦力]帮我移植到 Wordpress 上，虽然 bootstrap 的样式有点老旧了，但是我可以自己写啊。就这样，2月23日4时37分[我知道了，你不是东八区的人]，我把还是一堆空文件的二代目项目仓库提交到了 Gitea 上。

这个设计风格我自认为有些激进

最初构思网站风格的时候我就定下了几个原则，比如：

1. 不要顶栏底栏，因为浏览器本身已经有顶栏底栏了，页面内再有顶栏底栏就会压缩主要内容的阅读空间
2. 要简洁，不需要的分割线边框线之类的就不要加，这样看起来会比较干净。开发的时候也用了纯白背景，还没想好自定义配色和背景该怎么做
3. 动画要足够多但不拖沓，其实 bootstrap 的动画非常少，所以绝大部分动画都要自己写，实际写起来感觉难度也不大
4. 重 PC 体验，因为我的博客还是偏向技术性的，我自己和身边的朋友也是经常使用 PC 阅读的。而且个人感觉技术性文章用手机阅读的体验还是不太好的，屏幕不够大，也不能随时 copy。在设计层面考虑手机端也不能放太多内容不然会更加压缩主要内容的显示空间。所以我优先面向 PC 制作，然后是 ipad，然后是手机

在这些想法的驱动下，我鬼使神差地做出了三栏双层的页面设计，左右侧栏在一层，主体内容在一层，还更加方便实现 PC 上的隐藏侧栏和移动端上的侧栏开关。实话说，我自己非常喜欢 Morecho 主题，它十分的精致、冗余代码很少，还有一点点的谷歌苹果味。
相比之下我之前一直在使用的 Clean Blog 主题经过了两个人经手修改到我的手里又魔改乱加样式越来越沉重。每次打开它的时候我都感觉电脑风扇的响声是在向我诉说，这个网页堆效果堆的太多啦，还有那么多冗余代码，渲染起来很累的。

回到标题，即使我个人非常喜欢，问过几个朋友得到的反馈也是看起来不错，但是我感觉这种设计有些激进，把很多移动端上的设计风格做到了一个重 PC 体验的网页上，甚至左侧栏看起来就像是一个遵循 Material Design 2 设计的浏览器[讲个笑话：MD2 风格的 Android APP]，虽说因为大家都用手机所以操作习惯上不会有什么问题，但是完全不采用顶栏底栏的博客主题我还是挺少见到的。

我觉得伪元素不够用，应该整成 :before :after :current

众所周知，:before:after这两个伪元素本来是用在外观性的前置后置文本上的，但不知道怎么用着用着就变成了一言不合就

*:before,*:after{
    content: '';
    position: absolute;
}

然后定位宽高一把梭整成了各种花里胡哨的东西。
我喜欢，我在写 timeline 的样式的时候也用了伪元素，还因为技术不精被迫加了一个没有实际含义的 html 标签，就是因为伪元素不够用啊，请问什么时候再给我发一个伪元素，什么？你说:first-letter:first-line？

面向搜索引擎开发，熟练掌握 CTRL-C CTRL-V 的用法

我越发觉得自己需要好好研究一下搜索引擎的高级用法，怎么才能让我不会把同一篇文章在不同网站都搜出来一遍，自己还傻乎乎地一个个点进去再关掉，再一个个点进去再关掉。
这里放一下 copy 列表

1. Bootstrap+JQuery 且不提，还从 Argon 参考了很多代码
2. 根据 Bootstrap 的推荐页面选择了 Feather Icon，本来还想自己写一个 replace 函数，但是替换以后浏览器不加载资源，遂弃而使用官方提供的 js
3. Archive 页面的标签分类代码是 jekyll-TeXt-theme 主题的功能，被 Hux shamelessly borrow 之后又被我 shamelessly borrow 到自己的旧博客又被我 shamelessly borrow 到 Morecho，不得不说，有些老代码就是特别香。
4. 音乐播放器用到了 Plyr，但是由于 Plyr 对于自定义样式并不友好，所以我自己实现了外观

纯静态只是一种妥协

回顾自己最初接触 Jekyll 时，因为在网络上没有属于自己的东西，于是和很多 OIer 一样用免费的 .tk 域名解析到免费的 GitHub Pages 服务上别人免费的模板博客。不选其他静态引擎的原因也很简单，就是 jekyll 是唯一一个被 github pages 服务原生支持的。后来有了自己的域名，再后来有了自己的服务器，当手里的资源逐渐增多之后，纯静态引擎的劣势就显现出来了，没有后台服务等于更高的维护成本和更难实现的互动内容。虽然如今有了 gitment gitalk 等一众基于 issue 的评论区实现，但体验依旧是比较一般的，如果想写一篇新文章，就要自己操心图片放在哪里，然后在仓库新建文件，预览还需要安装本地服务，以用户的角度来看体验实在差。
事实如此，但我也认为 jekyll 引擎作为一个用来入坑前端的学习工具是十分优秀的，在插件体系和现成主题不是很美观的前提下，为了满足自己的需要我学到了很多前端知识。虽然到现在还是半吊子的程度，但是已经足以让我在一周时间做出目前的这个仅仅使用了 bootstrap 一个样式库的主题了。
接下来的计划是把开发分支转移到 hexo 引擎上，使用 node.js 的 hexo 相比于 jekyll 来说更加亲和前端开发，有更大的发挥空间也不会像 wordpress 有很多局限性。