自定义博客模板

温故知新: Jade 的 extends 与 block

extends & block 是 Jade 中的模板语法，涉及到了继承的逻辑，它们可以让我们整理模板的时候，更有条理性，以及写更好的代码。
想象下，extends 就像是一个底板，上面留置了多个 block，那么在某个具体页面，只需要在指定的 block 内填充内容就可以了。其实很好理解，为了更好的说明，我们做简单的 Demo 代码呈现:

父模板(比如名为base.jade)，它负责的是一个基本的框架：

h1 Title Here
block head
block content

子模板(比如名为detail.jade)，它继承父模板的框架，并最终渲染页面:

extends base.jade
block content
    p 具体的内容，content 这个 block 在 base.jade 中存在
p 没有在block里面的内容，最终不会呈现，比如我这一行文字。
block abc
    p 在base.jade中，并没有声明一个abc的block，所以，这段文字也是不会被呈现。

博客模板的源码

在我们实施 HTML+CSS 页面时，动态页面 与 静态页面 其实并无太本质的不同。如果理解了 动态页面 的基本逻辑，再往后走，就到了后端(服务器端)，偏离本课程就有些太远了。
关于 动态页面 的实践，最常见，也是最合适的，莫过于 个人博客 了。

我们准备了三个博客的模板，在 FirstWeb.app 中可以看到源码，以及对应的页面访问。源代码才是重点，本文作为文本内容除了阅读之外，是没有太大意义的。
三个模板，都是从 Bitcron 上移植过来的，因为 FirstWeb 内 Web 框架的限制，没有 Bitcron 上那般聪明，有个别地方，多了些冗余的代码。但总体而言，三个模板的代码量都是很少的。

blog 这个目录对应的是 Sollrei 创造的模板，你可以在 https://github.com/sollrei/bitcron-template 这里找到原始代码。Sollrei 是一个女生，代码非常干净，非常非常难得的品质。
blog2 对应的是我早先为 Bitcron 做的一个模板，取名叫 Classify，确实有其经典的一面，负责页面主逻辑的 Jade 代码量非常少。
blog3 (模板原名为 Puti (菩提)) 则是来自于 CaiCai，现在(2019)是一名产品经理，算起出身，倒可认为是设计师，唯独不能算是程序员、工程师。CaiCai 非常擅长处理简洁的风格，代码也保持着这个风格。

几个模板的意义

在写代码的时候，应该尽可能精减(主干上的)代码量。 但这也是无止尽的，度需要自己把握，或许 5 年后再看，觉得不够精简，再 5 年后，可能又觉得过于简化。但起码可以建立一个意识: 不少效果的实现，本身并不需要过于繁杂的代码。
这几个模板，基本上都遵循了这个原则，在主干上 (负责页面结构的 Jade 代码) 的代码量都很少，从而看起来就容易理解了。

写了好看的代码，并不意味着每一个地方都是好看的。如果真的力求自己做到每个细节的完美，这非常值得敬佩，但对于多数人来说，并不鼓励，因为，真正属于我们的时间并不多，且人生在世，本身就会浪费掉不少时光，故有些地方的浪费能避免则就避免了。
还有就是，写了好看的代码，如果在正式的工作中，可不会给你带来 KPI(绩效) 上的加分。有一些诡谲？现实便是如此。我见过一些人的代码闪耀着美感，而作者常常没有什么名气；而反观那些浮在台面上的人，往往会让不少人失望吧。也看到过一些最终效果非常不错，但代码层面亟待优化，即便如此，写代码的人，手艺起码是真诚的；可悲的另一面，如果未来的你真以码为生，更大的概率，你会遇到一些连真诚都缺失了，不停制造糟糕的代码，但又算完成了工作任务的同事。
本段落的内容，是负面的吗？不是的呢。我们应该以写好的代码为一个目标，但也不要对此抱有太大的期望，代码如诗，是一个自我满足的行为。它其实没有什么门槛，大多数以此为目标的人，大多是自学的。但我们真的达到目标了吗？或许永远都不能吧，完美难达，追求而不苛求；而这过程，反倒蛮美的。

我们可以设定一些要求，但只要不是触及根本的，这些要求本身都可以被破坏掉。在这几个模板的源码中，你应该能看到 lower_word 之外的命名风格，比如 lower-word，甚至同一个代码文件内出现两种命名风格 (可能出自于两人之手)。如果仔细研判，特别 CSS 代码中还有冗余的部分，以及变量的命名是否恰当？这有待商榷。
另外，你也可能看到 +h.load('/template/css/style.scss') 类似的代码，会感到困惑， .scss 文件怎么可能直接作为样式文件载入呢？难道不应该是编译后的 .css 文件被载入？这是因为 FirstWeb 中特殊处理了， .scss 文件的地址会自动替换为 .css。
总而言之，现实环境不是理想的，特别对初学者来说，必然会遇到这种、那种的小障碍。

其实，学了，便就忘了吧。有些知识，不过是索引，形成自己的风格与追求，才是重要的事情。
你可以将这几个模板作为案例进行了解，或者以此为基础，修改完成自己的一个博客模板，以后完全按照自己的想法，重新构建。
以上，便是这几个模板的意义了。

几个模板内的一些技术细节

为了降低难度，几个模板如无必要，都没有引入 Javascript，唯一的例外是 blog 中:

+h.load('/template/js/lib/jquery-3.3.1.min.js')
+h.load('/template/js/lib/particles.js')
+h.load('/template/js/index.js')

它其实是引入了 https://github.com/VincentGarreau/particles.js Javascript 库，来实现头部图片上动态连线圆点的效果。这也是很多 Javascript 被使用的方式，先引入一个库，然后在其基础上完成自己想要的效果。

不但 Javascript 如此，甚至引入一个 CSS 文件，然后赋予某个 DOM 元素以指定的 class，就能达到 库 的效果。
比如在 blog3 中的 +h.load('/template/static/css/animate.3.5.2.min.css')，它实现了页面载入后的 淡入 的效果。

同样在 blog3 中，我们看到一些小图标的修饰，并非真正的图片，其实是引入了 fontawesome，fontawesome 是一个字体，只是文字匹配呈现的是图标，而不是我们看到 abc 这样有意义的字符。
我个人更喜欢直接使用伪元素构造简单的修饰，或者将指定的图标(字体)打包合并到单独字体中，然后压为 base64 的编码，直接在 CSS 中引入，这样一般可以让页面渲染的速度更快，因为减少了页面资源请求的次数和大小。

在 blog 中，我们也在 CSS 中引入了单独的字体 +h.load('/template/css/fonts.css')，它们是在 Google 上托管可免费使用的英文字体，由于英文字体一般都很小，数字+英文字母的集合，不像中文字体一个字库会很大，所以，为了页面排版的美观，引入英文字体渲染页面，也是一种常见的方法。

总之，这些琐碎细节，其实都是应用级别的，拿来用就好了。
换句话说，等你遇到了，即使之前一窍不通，直接上手也不会有什么难度。

几个模板的截图

下面是几个模板的截图，以示大概。但重点仍然在于源码本身，跳出源码以及具体的页面访问，单纯看几张截图，没有什么价值。

blog：

blog2：

blog3：

Ze：
这个并未作为本次的模板呈现，主要原因是因为字体的问题，里面用了花园明朝体。这个技术细节，在 FirstWeb 中无法实现，只有 Bitcron 上的服务器端另外处理，才能生效。
但我们可以尝试，或者说是一种启发，去临摹这种竖排的效果，当然，(效果中)标点符号上要特殊标记，只能自己手工设定了。
我们再回顾下，在课程中，我们提到过将 HTML+CSS 用起来的案例，将其作为完全的排版工具，(借助 ImageBox) 去完成一些图片的生成。Ze 类似的排版的，其实也可以拿来如此使用。