上个周末，我将个人博客肘子的Swift记事本进行了一番装修升级。我对本次更新的效果比较满意，并非博客变得多好，而是通过此次更新，让我对当今的Web技术有了一定的了解。同时在本次更新过程中，无论是调试Swift代码、CSS代码还是Markdown文档，都是在Visual Studio Code中进行的，这也让我对Visual Studio Code有了进一步的认识和掌握。
通过本文将这几天更新过程记录下来。
作为一个使用CSS、javascript仅几天的人来说，本文的内容可能并不正确或相当偏颇，望见谅。
本次更新目标
在完全停止写博客和写代码超过15年后，2020年我重新创建了自己的个人博客。目的同之前的博客一样，记录并分享自己的编程学习心得、体会、经验和教训。
本博客的主题是记录有关Swift学习方面的内容，因此在使用了一段时间的WordPress、Hexo后，我找到了一个由Swift编写的静态站点生成器Publish，并用它完成了博客的第一次重大调整。
如果对Publish感兴趣，可以阅读我写的几篇Publsih的介绍文章。用Publish创建博客——入门，主题开发，插件开发。
当时我对Swift的掌握很一般（现在也很一般，不过比当时强些），因此上次博客的更新过程跌跌绊绊，很多预期的功能并没有实现。随着博文的增多，觉得有必要对博客进行再度更新了。
本次更有以下几个主要目标：
- 添加评论功能
- 调整版式，提高对移动设备的适配
- 增加TOC（文章目录），方便长文章的阅读
尽管最终的结果基本达到了预期，但我还是将本次更新的难度想的简单了。
今时不同往日
从2005年开始我就没有多余的精力投入编程这个业余爱好了。在此之前我自认对Web技术还有一定的了解，使用过HTML、PHP、Python（用了一段时间的Django），不过真当我进行此次更新时，才发现时代完全变了。
Publish虽然可以帮助我完成内容管理、Markdown转换、大的布局构建等工作，但如果没有CSS、Javascript的基础，想实现复杂版式、动态功能几乎寸步难行。
本着临时抱佛脚的态度，用了点时间大致接触了点CSS、Javascript的知识。很短的时间后我就清除地认识到，它们不是我短时间可以掌握的——已经发展的太庞大了。
CSS和Javascript就像两个雪球一样，随着互联网的高速发展极速膨胀。仅从我的初步观感来看，它们的技术基础已经不适应当今的需要了。有什么需求，就添加什么功能，难度不算高，但内容非常多，完全是两个大杂烩。
好在，如今网络上分享知识的朋友越来越多，多花点时间查找还是能找到所需的资料和解决方案。
添加评论
这个是最先解决也是最容易的。
作为静态站点，评论系统选择不是特别多。排除掉国内外商业机构提供的静态评论系统外，最终选择了基于Github Issue的解决方案。
一开始试用了gitment，不过总是出现授权错误，无法加载评论区代码，最后采用了gitalk，几天的使用下来，感觉还是不错的。唯一遗憾的是，官方的js没有汉化方案，有时间再调整吧。
gittalk的使用非常简单，在GitHub的OAuth Apps创建了ClientID后，经过简单配置就可以将其添加到博客代码中。
对于像gittalk这样只需要少量js代码的应用来说，在Publish中，可以直接使用.raw将其包装进Swift代码中。例如：
.script(
.raw(
"""
$(document).ready(function(){
setHeight();
})
"""
)
)
如果代码量大，还是采用导入js文件更方便些。毕竟在Swift代码中添加Javascript代码无法获得编辑器的帮助（拼写检查、自动补全等）。
调整版式、提高适配
绝大多数的版式都是通过CSS来实现和调整的。
版式
可能是由于这两年我被SwiftUI惯坏了，很多我认为应该没有什么难度的地方，在CSS中实现起来不太容易。
我希望在更新后Footer能够在浏览器的最下方，即使中间的内容不足以充满整个空间。在SwiftUI中，一个Spacer()就能解决问题，但我查找了很久，都没有找到只使用CSS即可实现的便捷方案。最后依靠javascript的配合才达到了预期的效果。
修改后的结果。
另外，在CSS中如果想实现复杂的版式位置不太直观。尽管提供了不少的Position选项，但是想配置成想要的结果需下不少功夫（最主要的原因是我太菜）。
随着Style设置的增多，我发现在CSS文件中想找到对应的配置不容易。希望有经验的朋友能够告诉我应该如何在开发中组织CSS文件。
调试
Chrome（和Safari）的调试功能为我本次更新提供了非常大的便利。Publish是静态生成框架，对源文件的任何修改都需要生成后才会在网页中体现出来。通过使用浏览器的调试功能，我可以在浏览器中尝试各种CSS的设置，调试满意后再在代码中做最终的修改，极大的提高了效率。
本次更新中，Javascript代码大多也是通过浏览器的调试功能进行的学习和调整。我有点理解了为什么当前的浏览器都如此的庞大和消耗资源（相当于内建一个小IDE）。
Javascript在浏览器中的运行效率远超我的预期，本来我打算更多的依赖静态生成，但在见识了效率后，我在不少地方都采用了通过javascript进行后期调整的方式。
适配
适配不同的屏幕尺寸，难度倒不大，主要是个功夫活。不过解决不同浏览器的表现差异确实比较让人痛苦。
在日常生活中，我绝大多数的时间都是使用Safari。本次更新调试代码我采用了Chrome（Safari的调试区在下方，用起来不舒服），绝大多数的代码执行效果的都符合预期。但切换成Safari后，突然发现在某些页面的表现差异不小，甚至完全无法接受（不是都差不多的内核吗）。解决这些问题耗时不小。最终我也没有再测试FireFox和Opera，看不见问题就不心烦。
TOC
我一直都希望博客有个漂亮的TOC，对于阅读篇幅较长的博文很有帮助。在众多的网站中，我个人比较喜欢掘金的TOC表现。
最初打算写一个Publish的插件，在Publish解析Markdown文档时，一并将文档结构记录下来，并在生成时创建静态页面代码。不过在认识到Javascript有足够的效率后，我还是决定上网找现成的JS方案直接拿来用。
网上基于javascript实现的TOC着实不少，不过很多都用不了，要不就是针对某些内容管理器制作的插件，要不然就是单独的Markdown TOC生成（不包含网页注入），有几个注入效果不错的又不支持扫描HTML生成目录结构。经过比较和测试后，最终在一个国内网友Xinxing Li提供的代码基础上实现了预期的效果。完全保留了他的扫描HTML生成结构的代码，改动了锚点判断逻辑并解决了滚动不正常的问题。
Visual Studio Code
我绝大多数时间都使用的是Xcode，由于本次更新中大量工作都是针对CSS和Javascript代码的编写，因此全程采用了Visual Studio Code。
VSCode对于CSS和Javascript的支持好于Xcode是理所当然的。在此次更新过程中，VSCode在Swift开发上的表现还是让我比较吃惊的。
在完成了在Linux系统上搭建Swift开发调试环境一文后，我很少有机会长时间的在VSCode中开发Swift代码。除了在调试方面差距较大外，用VSCode来开发Swift代码的部分体验竟然好于Xcode，尤其在Format和lint的集成度方面完爆Xcode。真希望Xcode也能更加开放自己的插件API，提高插件的集成度。
后续
本次更新还有些小的目标没有实现，比如支持Twitter Card（目前发现是域名解析的问题，正在更换注册商）、提供微博、微信分享（都需要注册API）等。将来有时间再调整。
PS：最近一直都工作在macOS Monterey Beta5下，系统基本已经达到了一个稳定的状态。
