自定义博客模板

温故知新: 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 类似的排版的,其实也可以拿来如此使用。