接触 typecho 是 2014 年开始的,期间建删很多个站点,也下载了很多插件、主题,纯粹就是为了折腾。搭建的过程是很愉快的,搭建完感觉开启圣贤模式了😂。
年中的时候使用的是 Mirages 主题,用了不到一个星期,改用 metheno 的 kibou (后改为 kibou_lite),然后换回了默认主题,折腾了几天后看到了这个站点 jordanmike.rubenstom.nl,很喜欢这种性冷淡的风格(应该是吧),于是扒了下来开是折腾。
在 typecho 的文档中提到开发主题具备的条件:

能够在本地运行的web开发服务器,并装好typecho的最新版本。
基本的HTML知识
少得可怜的php知识

对于这几个条件,我满足了第一点以外,其他两点...说真的,我没学过前端、后端以及服务器等等这些东西,完全是爱折腾然后谷歌,勉强懂基本的一些东西,要我自己做是做不出来的,基本照着抄达到效果就行。有几个地方折腾比较久,评论框、评论列表、图片灯箱效果以及 css 样式。
评论部分,一开始我把 form 部分弄好了,但是提交评论没有任何反应,对着默认主题一个一个对比,没发现少啥东西,然后直接把默认主题的 comments.php 里的内容整个搬过来,再一个一个改样式,改到最后我才发现是少了 <?php $this->respondId(); ?>这个 id 。这个站点是没有评论列表的,于是我直接用了Typecho Theme Moricolorkibou_light 的评论列表,只改了分页部分。
这个网站自带了图片灯箱效果,但就是我不会添加。 使用方法是这样 <a href="gallery-image-one.jpg" data-lightbox="example-set"><img src="gallery-thumb-one.jpg" /></a>,在 img 标签外裹着 a 标签,而且还要带 data-lightbox="example-set",但是文章输出的直接就是 <img src="gallery-thumb-one.jpg" />,我完全没办法,然后去找自带有图片灯箱效果的主题,才发现是用了 js ,可是我压根不会,只好去搜索 “js 给 img 标签加 a 标签”,很快就找到了这么一段

$(document).ready(function() {
    $("img").each(function() {
        var strA = "<a href='" + this.src + "'></a>";
        $(this).wrapAll(strA);
    });
});

试着模仿加入data-lightbox="example-set"
var strA = "<a href='" + this.src + "' data-lightbox='"example-set"'></a>";
浏览器一打开,完全没效果啊,而且没学过也不知道从哪里下手,只好去看 js 的基础,可是看了半天也不知道在哪里能找到解决办法,想想也许别人写的实例有类似的,果然,不到 2 分钟就找到了问题的所在,引号用得不对。
var strA = "<a href='" + this.src + "' data-lightbox='example-set' ></a>";
css 部分,结合浏览器一点一点调,可能在命名、属性的排序上很不科学,但目前对我来说,先达到效果吧。
与其说造轮子,不如说是拼轮子。虽然这个过程很累,很多地方完全不知道从哪里下手,但是能学到很多有趣的东西,以后慢慢完善。基本没有前端后台的基础硬生生凑出这个主题,也许出来效果能看但内在的代码不符合逻辑、要求,还希望路过的大佬能指点一二。
这个主题我暂且叫它 sexapa 。还有就是,我扒的这个网站模板在 Creative Market 出售,售价 $27
还参考了以下博客的成果:

-------------完-------------