零基础Typecho主题移植教程

写在前面的话

主题预览地址： https://web.pcno.cn

移植前的准备

• 寻找目标站（今天移植的是4000年官网）http://ju-jingyi.com/
• 先观察目标站的整体构造（喜欢就直接先把网站以静态文件扒下来）

扒下目标站

• 我这里用到的是网上找的某扒站软件
  

• 保存到本地文件夹
  
• 打开首页文件看一下代码
  

开始移植大法

• 新建CSS,JS,IMG文件夹
  
• 新建 头部（header.php），脚部(footer.php)，首页(index.php)文件
  

header.php

• 把目标网站的头部部分移植到header.php里面。F12调试，变色部分代码就是头部

参考Typecho官方主题，写header.php

• 把目标站的头部代码复制进来 /头部引用CSS
  
• 把目标站的图片先上传到网站（我选择的是上传又拍云/速度贼快还免费）
  
• 替换链接
  

参考Typecho官方主题，写footer.php

• 把目标站的脚部代码复制进来 /脚部引用JS
  

参考Typecho官方主题，写index.php

• 把目标站的主体代码复制进来 /依样画葫芦
  

去后台启用这个新主题预览一下

待续...

更新...

继续上次挖完的坑，我抽空来填。

来看一下index.php的代码，显示文章怎么写：

来预览一下效果：

参考文档：TYPECHO模板开发快速入门

接下来就是文章页post.php了

直接参考 http://ju-jingyi.com/gallery.html 里面的样式来套娃。

代码如下

<?php $this->content(); ?>

就是显示文章的核心代码，放在合适的位置即可。

预览：

其他的page.php archive.php comments.php 404.PHP 等页面就依样画葫芦