毫无疑问，基于 Jekyll 的博客对我来说是个有趣的新玩具1。在使用它的实践过程中，我也有了一些体会，也按照自己的想法和需求做了一些自认为有益的修改。
很多不错的代码会被不断地派生，而我用的博客代码已经是二转了，追溯到源头，是 LOFFER。
由于我的知识基础已经包含了 HTML 和 CSS，因此，我将着重谈这两个方面。
下列内容的叙述基本按时间顺序。
HTML
首先引起我注意的，就是 HTML 文件里的 {{ }} 和 {% %}，因为之前我比较熟悉 PHP，所以类比于 <? ?>，不难猜知其属于某种能使 HTML 内容动态化的语言，经过一番查找，获知它是 Django 模板语言，可惜不熟悉语法，就不能深入改动它了，现在我唯一关心的是，能否依靠它实现网页的多语言化。
SCSS
其次令我关注的是 SCSS 文件。它真是太有趣了，在某种程度上确实很方便，对于我来说，是秒懂。它可以把子元素的样式塞进父元素样式代码块的内部，如果在内部还要提及父元素，就用 &。此外，颜色相关都是变量名，这意味着可以通过变更某个开关（比如主题名称）来一次性变更全局界面的配色，属实方便。
Details
之前用惯了 BBCode，如果要写能够默认收起，点一下展开的内容，只要用 [hide] 标签就可以，但 Markdown 是不支持的，只能用 HTML 标签 <details> 来做。而且，其内含的内容不具备任何样式，与外界并无明显边界，于是我在写文章的时候就需要参考代码块的 HTML 结构，也照样搬过来，这样就可以兼顾便捷性与清晰度了，就是后台文本会复杂一些：
|
|
这段代码用来做 Log 等文本的展示确实效果很好，来个示例：
汐音社 - 人间词话
Exact Audio Copy V1.3 from 2. September 2016
EAC extraction logfile from 27. July 2020, 11:24
汐音社 / 人间词话
Used drive : HL-DT-STDVDRW GS31N Adapter: 1 ID: 0
Read mode : Secure
Utilize accurate stream : Yes
Defeat audio cache : Yes
Make use of C2 pointers : No
Read offset correction : 667
Overread into Lead-In and Lead-Out : No
Fill up missing offset samples with silence : Yes
Delete leading and trailing silent blocks : No
Null samples used in CRC calculations : Yes
Used interface : Native Win32 interface for Win NT & 2000
Gap handling : Appended to previous track
Used output format : User Defined Encoder
Selected bitrate : 1024 kBit/s
Quality : High
Add ID3 tag : No
Command line compressor : D:\Tools\FLAC\flac.exe
Additional command line options : -8 -e -p -V -T “ARTIST=%artist%” -T “TITLE=%title%” -T “ALBUM=%albumtitle%” -T “DATE=%year%” -T “TRACKNUMBER=%tracknr%” -T “GENRE=%genre%” -T “COMMENT=%comment%” -T “BAND=%albuminterpret%” -T “ALBUMARTIST=%albuminterpret%” -T “COMPOSER=%composer%” %haslyrics%–tag-from-file=LYRICS="%lyricsfile%"%haslyrics% -T “DISCNUMBER=%cdnumber%” -T “TOTALDISCS=%totalcds%” -T “TOTALTRACKS=%numtracks%” %hascover%–picture="%coverfile%"%hascover% %source% -o %dest%
TOC of the extracted CD
Track | Start | Length | Start sector | End sector
---------------------------------------------------------
1 | 0:00.00 | 4:31.00 | 0 | 20324
2 | 4:31.00 | 4:40.00 | 20325 | 41324
3 | 9:11.00 | 3:46.37 | 41325 | 58311
4 | 12:57.37 | 4:19.34 | 58312 | 77770
5 | 17:16.71 | 4:32.00 | 77771 | 98170
6 | 21:48.71 | 4:06.56 | 98171 | 116676
7 | 25:55.52 | 3:46.74 | 116677 | 133700
8 | 29:42.51 | 5:25.00 | 133701 | 158075
9 | 35:07.51 | 4:28.00 | 158076 | 178175
10 | 39:35.51 | 4:27.37 | 178176 | 198237
Track 1
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\01. Litterzy - 古旧人间・伴奏.wav
Pre-gap length 0:00:02.00
Peak level 96.3 %
Extraction speed 1.4 X
Track quality 100.0 %
Test CRC E898317E
Copy CRC E898317E
Track not present in AccurateRip database
Copy OK
Track 2
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\02. 月千宸 - 红梅白雪知・伴奏.wav
Peak level 96.6 %
Extraction speed 1.6 X
Track quality 100.0 %
Test CRC 34D2AC9D
Copy CRC 34D2AC9D
Track not present in AccurateRip database
Copy OK
Track 3
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\03. 宏宇 - 袖石东海・伴奏.wav
Peak level 96.0 %
Extraction speed 1.6 X
Track quality 100.0 %
Test CRC 9682A2F5
Copy CRC 9682A2F5
Track not present in AccurateRip database
Copy OK
Track 4
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\04. 兔子Jei - 篱边秋・伴奏.wav
Peak level 96.6 %
Extraction speed 1.8 X
Track quality 100.0 %
Test CRC 0FD863E5
Copy CRC 0FD863E5
Track not present in AccurateRip database
Copy OK
Track 5
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\05. Litterzy - 青山见我・伴奏.wav
Peak level 96.6 %
Extraction speed 1.9 X
Track quality 100.0 %
Test CRC 09D95409
Copy CRC 09D95409
Track not present in AccurateRip database
Copy OK
Track 6
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\06. 兔子Jei - 明珠山河歌・伴奏.wav
Peak level 96.6 %
Extraction speed 2.0 X
Track quality 100.0 %
Test CRC 85CF6DE5
Copy CRC 85CF6DE5
Track not present in AccurateRip database
Copy OK
Track 7
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\07. 潇梦临 - 千秋此意・伴奏.wav
Peak level 96.3 %
Extraction speed 2.1 X
Track quality 100.0 %
Test CRC D8996331
Copy CRC D8996331
Track not present in AccurateRip database
Copy OK
Track 8
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\08. Litterzy - 人在千古・伴奏.wav
Peak level 96.0 %
Extraction speed 2.0 X
Track quality 99.9 %
Test CRC 72AC7456
Copy CRC 72AC7456
Track not present in AccurateRip database
Copy OK
Track 9
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\09. 兔子Jei - 细雨湿流光・伴奏.wav
Peak level 95.7 %
Extraction speed 2.4 X
Track quality 100.0 %
Test CRC ADD9A662
Copy CRC ADD9A662
Track not present in AccurateRip database
Copy OK
Track 10
Filename E:\EAC\汐音社 - 人间词话 (2015) {CSCAV, CSCCD-3230, CD} [FLAC]\Disc 3 原声伴奏集\10. 兔子Jei - 词话寻得亦人间・伴奏.wav
Peak level 96.6 %
Extraction speed 2.5 X
Track quality 100.0 %
Test CRC A8905E13
Copy CRC A8905E13
Track not present in AccurateRip database
Copy OK
None of the tracks are present in the AccurateRip database
No errors occurred
End of status report
—- CUETools DB Plugin V2.1.6
[CTDB TOCID: qvlN0vWk1H3J8MPDvkQuPmgEd78-] found
Submit result: qvlN0vWk1H3J8MPDvkQuPmgEd78- has been confirmed
Track | CTDB Status
1 | (7/7) Accurately ripped
2 | (7/7) Accurately ripped
3 | (7/7) Accurately ripped
4 | (7/7) Accurately ripped
5 | (7/7) Accurately ripped
6 | (7/7) Accurately ripped
7 | (7/7) Accurately ripped
8 | (7/7) Accurately ripped
9 | (6/7) Accurately ripped
10 | (7/7) Accurately ripped
==== Log checksum 06DEEEE67E2C0A9545CFC1013A3229F0F2989269C098189E6C63A4316C554F3A ====
看着这一长段将所有内容都挤到后面去，又没有换行需要横向滚动的代码，我不禁陷入了沉思。它不仅碍眼，而且很不灵便。为了解决这两个痛点，我就针对性地修改了它的样式代码，一方面限制其高度，为 50vh，也就是占整个浏览器显示窗口的一半高度，非常灵活，能够适应各种情况，这样纵向就需要滚动，但显示的内容量也可以满足阅读需要，而且可以保留上下的正文，方便确定文意。对于横向需要滚动的问题，我做了强制换行，这样滚动就只剩纵向了，不必再考虑横向。
Scroll Bar
拖着滚动条让内容上下左右滚来滚去，我又陷入了沉思。这浏览器自动生成的滚动条样式实在是太丑了！于是我就嫖了一些代码，做了替换，嗯，现在所有的滚动条都符合现代审美了，而且根据层次，有颜色深浅的不同，也比较和谐，真不错。
Table of Content
我派生的代码来源直接把目录的开关给整个去掉了，导致我一开始没注意到有这么个好东西。看了看更原始的模板，发现有目录，而且是一行代码 toc: true 一下就能启用，这还能忍？目录对于我来说是刚需，我的好多教程都那——么长，没有目录很难用的！立马整上！整上以后，又带来一个问题，这个目录槽在文章的左侧，整个页面，如果宽度足够，是「全局导航区 - 目录 - 正文」的排布，所以我要前往其他的主页面，我还得跨过目录；而如果要快速在文章内部定位，又要受到左侧大大的彩色头像等元素的视觉干扰，体验很差；还有一点就是，它违背我日常敲代码工具 Visual Studio Code 的布局方式，让我感觉很不习惯。说时迟，那时快，我反手就把目录扔到右边去了。
满意了没有一分钟，我又被浇了一头凉水，这个目录，它高度有限，而我的标题数量非常多，以至于末尾有相当一部分装不下。好，解决方案是锁定目录高度为 100vh，让它吃满，又令 position: absolute，这样它就恒定在了视线右侧，且稳定不动，还可以根据需要上下滚动，快速定位读者关心的标题，至此，目录问题较圆满解决。
惟一的一个遗憾是，我还没有找到一个很好的方式，让目录和移动端布局配合良好。因为在移动端，全局导航区在顶部，从原本的左右结构变成了上下结构，这个时候锁定目录的位置就不好使了，当然现成方案也还是有的，但需要我掌握 JavaScript 以后。
Index
初始的首页文章标题排布方式太浪费了。一方面，它过于宽，导致只有几行的简介鸡零狗碎地横向展开，阅读体验并不好；另一方面，只有白底黑字，相互的分界不够明显，对于快速确定内容也不利。所以我做了两个改动：
- 分栏
- 添加边框和底色
最终的效果令人满意，所有的文章标题及简介被框在了一个个的小圆角矩形里，相互之间距离也很均匀，整整齐齐的豆腐块，挺好。此外，它还是响应式的布局，可以在移动端变成单列。
Types
这是我根据自己的需要原创编写的「分类」页面。一开始文章数量少，结构还比较简单，结果我总结近三年来的工作成果，是越理越多，一篇文章相关的又可能有一串，于是原本的框架（简单的 Markdown 纵向层次序列）就显得臃肿不便，需要我重新梳理。
首先，我引入了之前效果很好的「分栏」思想，并发挥到极致，将所有文章分为「指南」「研究」「科普」「杂谈」四个大类，横向排开，固定宽度，于是，它们就可以横向滚动了。
然后，「指南」下属的文章特别多，所以做成了「横向滚动内的纵向滚动」形式。原本「指南 | Guides」这个标题也是可以滚动的，但是后来发现这样会导致强烈的横向割裂感，特别违和，于是把这几个标题做成了固定的，然后让下属的内容单独滚动，再整理一下层级，效果还是相当不错的。这个部分的代码我调整了大概一个半小时，基本结构是写在 .md 文件里的 HTML 代码，然后给他们「赐名字」，再到 SCSS 里边去定义它们的样式。
总的来说，达到了预期，既能左右滑，又能上下滑，平添了不少乐趣。
Header
爷（的头像）真可爱，所以我想给它更大的展示空间。在 PC 页面，它有个尺寸上限，我把上限取消了，做成整个全局导航区宽度的百分比，于是大小变化也很平滑。此外，原本的方形头像已经不适应时代的发展了，所以我改成了圆形。
但是在移动端页面，由于宽度受到限制，全局导航区移动到了上部，于是就会挤占纵向空间，直接影响到有效内容的展示，此时如果强行放大头像，就会造成有效信息的损失（因为原本布局是从上到下「头像 - 博客标题 - 副标题 - 导航栏」，空间上其实很浪费）。
破局之道就是，将头像移到左边，而剩余三项移到头像右边，这样，整个高度将由头像完全享用，但从结果来看，全局导航区所占用的高度比原来还要少。
这又是一个令人满意的改动。
RSS
盆友说可以订阅我的 RSS，我心说「对鸭！」然后他找出来我的订阅地址发给我，同时疑惑为什么只有 10 篇，因为总量应有 60 篇上下。
那好吧，我自己弄一个，抄来 Jekyll 博客添加 RSS feed 订阅功能 提供的代码，尝试，说是缺少 rss.xsl，于是又去 Create an XSL stylesheet for your RSS or Atom feeds 嫖了一个，然后就能用了。
Friends
还就那个被逮到，好妹妹 要我加一个友链。
环顾四周，焯，这个模板没有预留位置！
首先可以肯定的是，全局友链比较酷！那么就要放导航栏。上面已经饱和了，如果窄屏的话，没什么空间，所以必须放在下面。
放下面的话就必须要处理和我社交平台图标们的关系。放下面吧。
然后再参考那些图标的动态代码做一个友链模块出来，然后样式再调整调整，好了，看起来还行。