Typecho模板Diary、Write、NearBox

Diary、Write、NearBox这三个模板，是我最近用过的三个，这三个我都花费了一定的心血：一个是我修改的、一个是我原创的、一个是我移植的。

本文目录：

diary

diary，是我根据一个不太完整的模板修改得到的。这个模板，曾经在Typecho模板站登记过，不过已经被删了。我在模板站登记的该模板作者的github账号里面看了一下，他发布的项目中已经没有了这个模板的踪迹。

我找这个模板找了一段时间，始终没有找到。后来，无意中找到了它，不过看起来和Typecho模板站中那张预览图有一定的差别。同时，模板缺少一些常见的元素，如分类。也许，原作者设计这个模板时，并没有想加入分类。我很喜欢它的简洁，但有些地方不符合自己的胃口，而且存在一些功能缺陷。因此，我开始对这个模板进行改造。

首先，我将模板的页面宽度从600px调整到850px。重新设计一部分样式，包括：正文和评论字号调大、评论框样式改造、新增archive页面、加入分类显示、首页样式修改、加入无插件文章置顶、增加博客描述（手机端不显示）等等。另外，补充了一部分缺陷，如表格支持等。

就在我修改的过程中，我发现它和一款付费模板很像。我前往这个模板的官方博客，以及使用该模板的一个博客看了一下，样式相似度很高。我发现页脚的“上一页”、“下一页”的位置，在宽度调大以后看起来别扭，便模仿这个付费模板进行设计。

最终完稿后，我在自己的博客用了大概半个月。

我为它取名“diary”，中文名“日记”。它似乎就像日记本一样。

write

这是一个自己设计、自己完成的模板，用时两天。

我本人不是前端设计师，我只是从自己的一点“邪恶”的想法出发，根据自己目前的水平来设计。最终结果，我想你一定想得到——丑。

自己设计时，我用笔大概勾画了一个草草的样式。最简单的博客标题、页面链接，下方便是博文的标题和摘要。在设计时，与diary相似，我将分类加入到正文标题下方的发布时间旁边。其他部分样式，我从diary进行了借鉴，如标签，并且将diary改造后的评论框样式直接搬到write之中。

实际上，我并没有对这个模板抱有多大希望。因为我并不了解我自己想要什么样式。因此，这完全是一个练手的产物。

这个模板，我有意设计成电脑端和手机端几乎完全不同的样式。电脑端显示博客标题、页面链接、正文标题和摘要、翻页链接；手机端显示博客标题、页面链接、发布时间、正文标题、翻页链接。电脑端左对齐，手机端居中对齐。博客背景色，按@图南山 的建议，选择了我从未使用过的幽灵白。

这个模板，我用一天半的时间写出，但只在我的博客使用两个小时。我为它取名“write”，没什么特别含义，简洁，简洁到过分，适合纯粹的书写。

不管你看到这个模板的样式以后，会把我骂成什么样子，我都要把它的截图放出来。

NearBox

这个模板，是我移植的。原模板是Farbox平台的官方模板之一，使用经模板作者修改过的jade语言编写，由模板作者编写的Farbox平台进行解析。移植之前，我查看了模板的授权协议，是MIT。因此，我可以放心地移植它，并且，拥有MIT协议赋予的权利、遵守MIT要求的义务。

移植之前，我看到有人号称对此模板进行了移植。我发现，这位作者将页眉和页脚移植的很相似，其他地方则全部不同。并且，他放出来的源码，并不完全与他的博客吻合。此话怎讲呢？他在源码中描述“自用的主题”，但是，他博客的部分样式与源码中包含的样式完全不同。似乎，他有所保留，不愿意让别人用到和他一样的样式。

另外，原模板官网公开的源码，与使用原模板的站点，样式也不完全相同。也就是说，原模板的源代码也是有所保留的。

原模板是经过修改过的jade语言。我对jade语言不熟，不过它的写法对比php，还是有一定的相似。然而，经过修改过的jade语言就不是这样了。同时，原模板源码对接Farbox后台，有很多的隐藏功能，相当于只在模板中写入了接口。由于这两点原因，凭源码进行移植是不可能的。我只能凭借css样式，使用Typecho默认模板与css进行对接。

这个过程走了很多弯路。原模板css写的一团糟，我需要对其进行改写。改写过程中，我写错了很多地方，以至于后期修bug修了数日。用了两天的时间，写出来三个版本，除了评论之外，其他页面样式的三个版本如下：

第一个版本：首页与archive页面具有相同的样式，单页显示文章标题和摘要，下方有翻页链接。摘要为无格式自动截取，限制100字。

第二个版本：首页与原模板相同。首页摘要为带格式自动截取270字符，如果有图片则会显示在首页，如有代码则自动添加结尾的格式。archive页面的样式、各文章的摘要截取方式等，与第一个版本一致。

第三个版本：首页、archive页面格式与原模板均一致，包括archive页面的日期显示格式、页脚翻页链接等。

最终，第一个版本被我废弃，因为看起来和write并没有太大区别，没有什么特色；第二个版本，则是我的博客目前使用的模板；第三个版本，我并没有正式用，而是放在了测试站。当对第二个版本进行bug修复时，会同时应用到第三个版本。

我为何选择第二个版本呢？原因有二：

第一，原模板的archive页面，与归档页面太过于相似，仅有两点差别：日期显示格式不同，archive页面有翻页链接。日期显示格式，在archive页面是d M Y，在归档页面是Y-m-d。Y-m-d看起来很整齐，而d M Y则不是。为什么呢？M代表英文月份三字母缩写，不同月份的缩写，占用的页面宽度不同。这造成的结果是，日期看起来不整齐，有的宽，有的窄。强迫症难以忍受。

第二，原模板的archive页面，与归档页面太过于相似，我觉得单调。

移植成功后，我给模板添加了目录树样式。Typecho有一个目录树插件，可以进行对接。原插件使用与more标签类似的写法，由于Typecho 1.1对“<”和“>”进行了转义，因此该插件在1.1版本失效，后有高手对其进行了修改。这次，我将其改成了Markdown标准语法，与“<”和“>”被转义不发生关系，两个版本的插件均可使用；我还把插件生成目录树的样式对接到模板预留的样式中。对插件进行修改后，只要按Markdown标准语法书写，就会在自己想要的位置生成目录树。

目前，有高手开发出第三方Markdown解析插件，将独立的Markdown解析程序打包进来，在这个插件中包含了对目录树的支持。不过，如果使用这个解析插件，则不会对接我为目录树预留的专用样式。为了使其看起来不丑，我在CSS里添加了无序列表的独立样式。

对这个模板，我的感觉是不卑不亢。简洁是它的优点，但和write相比，它的样式显得多元化，不至于简洁的过分；与一些样式复杂的模板相比，它的简洁突出了内容。

这个模板被我命名为“NearBox”。我把它的主要字号调整为20px。目前，绝大多数模板的字号都不超过这个数值，它们常用的字号在14~16px之间。20px已经很大了，看起来不累眼睛，又不会觉得很浮夸。配合模板的简洁，打开博客，主要的目光便集中在内容上。

感想

折腾模板过程很痛苦，因为我是外行人，对于一部分css和php不熟悉。我凭借Typecho默认模板的样式，对照源代码，进而了解到哪部分代码对应哪些内容。

在这个过程中，仅凭自己的力量无法完成。我数次利用搜索引擎查找相关的信息，尤其是各种css样式的介绍。我也参考了部分免费的开源模板。

折腾过后，我学到很多东西。虽然我并没有专业学习php+css，但还是了解了一部分有关的知识。同时，增进了自己对Typecho这款简洁且强大的博客程序的了解。

最后，我要说一下关键的问题：这三个模板，暂时不开源、不分发。因为，可能存在暂时未发现的bug，而且代码写的不好。我不想在公开后看到部分戾气重的人对此指指点点，甚至侮辱谩骂。

在此，感谢Typecho，感谢我参考的开源模板作者，感谢在博客公开有关技术的博主们，感谢帮助过我的博友。也感谢自己，在闲暇的时间有这份毅力坚持下来。