Typecho模板Diary、Write、NearBox

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

本文目录:

diary

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

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

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

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

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

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

diary

write

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

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

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

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

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

这个模板,我用一天半的时间写出,但只在我的博客使用两个小时。我为它取名“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已经很大了,看起来不累眼睛,又不会觉得很浮夸。配合模板的简洁,打开博客,主要的目光便集中在内容上。

NearBox

感想

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

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

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

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

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

30 条回复

大麦 2018年10月13日 回复

我用的hexo,也是自己改了个模板,效果看起来就像本书一样。
毕竟文字写出来放在网上了,就是为了分享,考虑读者的感受也应是博主的一项日常。

林海草原 2018年10月14日 回复

你的模板效果不错。看着很舒服。
你的valine应该放在本地了吧?因为我看如果用的是官方CDN,版本已经较新了,样式已经变了,你可以更新一下了。

演员 2018年10月14日 回复

typecho我用过,还行

林海草原 2018年10月14日 回复

现在用的emlog吧?用着怎么样?模板是买的还是免费的?

鸟不拉屎 2018年10月16日 回复

我好久没有捣鼓博客了,逛博客也少了
ToT
不行,我得拾起来

华子春新语丝 2019年1月28日 回复

华子春新语丝,这页面打开好清楚啊,字好大啊,哈

林海草原 2019年1月30日 回复

是的,我喜欢大字

新丝语华子春 2019年2月14日 回复

对于我们菜鸟来说,技术性挺强。

林海草原 2019年2月18日 回复

门外汉,如果我把自己写的模板发布出去,会让人笑掉大牙的

发表回复