前言
前面我们已经通过一个简单的 Hello World 主题简单了解了一下 Typecho 的主题开发过程。这次我们也不讲太多理论，而是直接还原一个相对真实的开发场景。
1. 寻找目标网站
既然是开发主题，那一定是看到了心仪的网站或者网站局部功能，希望自己也能实现一个类似的。最好不要完全凭想象实现，这样难度比较大不说，还不一定能达到预期的效果，除非你是懂设计的。技术好一点的可以直接通过浏览器开发者工具分析目标网站的源码，仿照实现。而更粗暴的方式是直接复制目标网站的源码，然后本地修改。
当然，你还可以到一些前端的模板网站下载源码，这样会比CV目标网站更简单一些，只不过这种操作往往要么收费，要么需要一些非常规手段，这里就不介绍了。
我这里就以仿百度为例，因为这个网站界面相对比较简单。
2. 实现仿百度主题
模仿一个主题通常可以分为三个步骤：下载源码及其依赖文件、调整代码结构和挖坑填空。
2.1 下载源码及其依赖文件
这一步比较简单，直接打开目标网站，右键查看网页源代码，复制下来即可。
不过，别忘了前面开发 Hello World 主题时的关键步骤，到usr\themes目录下面新建一个Baidu文件夹，增加index.php和screenshot.png两个文件，并且在index.php中添加注释，最后将复制的源码粘贴到index.php文件中，如下图所示：
全部代码都放在了index.php文件里面，这一步可以做一些粗加工，如删除一些不需要的代码等，然后就可以启用主题，并通过浏览器查看效果了。
这时我们可以打开开发者工具，看看有没有404的错误，有的话就代表缺少相关依赖文件，可以从原站下载下来放到本地目录中，百度全部采用的是CDN引用，所以没有404错误，这一步就可以省略了。
2.2 调整代码结构
这一步并不是必须的，但非常考验一个人的水平，我们从上面的代码截图可以看到，8000多行代码全在index.php文件中，可以想象后续维护起来有多麻烦。这时我们可以参考 default 主题，将其划分为header.php、index.php、footer.php 和 sidebar.php 四个文件，也就是四个模块。
划分完成之后，再通过need()函数，将他们聚合到index.php文件中，如下图所示：
我这里将head_wrapper之前的代码放在了header.php中，将s_wrap之后的代码放在了footer.php 中，最后将 s_side_wrapper 放在了 sidebar.php 中。当然，划分并没有一个绝对的标准，文件名也没有特定的要求，合理即可。
另外，在header.php和footer.php 中还存在大量的JS和CSS代码，导致这两个文件也很大，因此可以进一步拆分，二者操作方式相同，我这里以CSS为例。
将style标签中的样式复制到独立的css文件中，然后通过link标签的形式引用回来。这里的$this->options->themeUrl()是为了将主题目录和参数指定的文件相对路径拼接起来，JS也是同样的操作，就不再赘述了。
2.3 挖坑填空
目前，主题中的数据全是静态，也就是全是写死的，因此需要将写死的地方，挖一个坑，替换成动态的代码，这个涉及的点就比较多了，不同的坑，填的内容也不一样，所以无法一一列举，我就简单举两个例子，然后大家参考 default 主题举一反三。
首先，最简单的，把标题替换成自己的，如下图所示。
再例如，如果我们希望把下图所示的内容替换成自己的文章。
就需要将index.php文件中列表部分，用PHP的代码替换。
具体实现如下：
<?php if ($this->have()) : ?>
<ul class="s-hotsearch-content" id="hotsearch-content-wrapper">
<?php
$index = 0;
while ($this->next()) : ?>
<li class="hotsearch-item<?php if ($index % 2 == 0) : ?> odd <?php else : ?> even<?php endif; ?>" data-index="<?php echo $index; ?>"><a class="title-content c-link c-font-medium c-line-clamp1" href="<?php $this->permalink(); ?>" target="_blank">
<div class="title-content-noindex" style="display: none;"></div><i class="c-icon title-content-top-icon c-color-red c-gap-right-small" style="display: <?php if ($index != 0) : ?>none<?php endif; ?>"></i><span class="title-content-index c-index-single c-index-single-hot<?php echo $index; ?>" style="display: <?php if ($index == 0) : ?>none<?php endif; ?>;"><?php echo $index; ?></span><span class="title-content-title"><?php $this->title() ?></span>
</a><span class="title-content-mark ie-vertical c-text c-gap-left-small "></span></li>
<?php
$index++;
endwhile; ?>
</ul>
<?php else : ?>
<h2 class="post-title"><?php _e('没有找到内容'); ?></h2>
<?php endif; ?>可以看到，每一个可能变化的地方都会挖一个坑，替换后的运行效果如下：
虽然和原站略有差异，但大致的意思已经差不多了。代码中的$this->permalink();会生成跳转到文章详情页的链接，接下来定义详情页的结构与样式就可以了。这完全可以套用index.php的方式，当然，独立页面也是一样的，就不再重复介绍了。
结语
怎么样，不难吧？这个主题的实现完全就是复制粘贴，再加上参考 default 主题简单挖坑填空的过程。不难发现，不做深入开发的话，用到的php知识非常少，偶尔有不清楚的地方，也完全可以通过AI解决。但有一点不得不承认，如果对前端技术不太了解的话，可能抄起来也会很费劲，而且最后总归还是要私人定制的，了解一些前端技术，定制起来也会顺畅一些。
评论0
暂时没有评论