本文经同意转载自 VPSCAN

写在前面

打算写一系列 typecho 教程,帮助一些建站的新手同学快速上手,就先从怎么写主题开始吧
会写的比较傻瓜化,有 Coding 经验的老鸟可以忽略

阅读这一系列文章之前,需要做到熟悉 HTML&CSS 并且掌握基本的 PHP 语法,推荐没有基础的同学先学习 W3school 的 HTML/CSS教程

主题文件放在哪

下载 Typecho 并解压后,我们会得到一个 build 文件夹,用于存放主题的文件夹就位于 bulid/usr/themes,在这个文件夹中已经有一个官方主题,即下图中的 default

typecho 主题文件在哪.png

主题的目录结构

下面我们以官方主题为例,讲一讲一个最简单主题的文件构成(为了方便理解,删除了官方主题的部分文件),主题文件夹内的文件如下图,接下来我会讲解每个文件的作用

主题文件讲解.png

header.php

名称固定,这是所有页面公用的头部部分,下一篇文章会讲解内部内容

footer.php

名称固定,这是所有页面公用的尾部部分,下一篇文章会讲解内部内容

index.php

名称固定,这是网站首页的模板文件
例如:https://vpscan.com、https://vpscan.com/page/2/

post.php

名称固定,这是网站文章详情页的模板文件
例如:https://vpscan.com/hostshare-20180711-6.html

page.php

名称固定,这是网站独立页面的模板文件
例如:https://vpscan.com/about.html

archive.php

名称固定,这是网站特定类型文章的模板页面(例如同分类、同标签下的文章列表页)
例如:https://vpscan.com/category/promotion/
这个文件非必需,如果主题文件夹内没有 archive.php 文件,会直接套用 index.php

comments.php

文章详情页和独立页面中的评论部分,评论展示和评论的提交表单都可以写在这个里面

sidebar.php

网站的侧边栏,非必需,比如本站就没有侧边栏

404.php

名称固定,网站的 404 页面,对于失效的链接会自动展示 404 页面
例如:https://vpscan.com/nexril-20180722-24.html

style.css

网站的样式表文件

screenchot.png

名称固定,主题的截图,会展示在 “后台->控制台->外观列表中”,如下图
主题的缩略图片.png

img 文件夹

主题需要的一些静态文件可以单独放在文件夹内,比如官方主题的搜索 icon 就放在这里
☞ 如果您希望石头蟹收录您的作品,可以到投稿页面留言
☞ 如果发现演示地址和下载地址失效,可以留言告知,会尽快修复
☞ 本站所有素材收集自网络,如有侵犯,请告知我们,核实后立刻删除
☞ 业余时间维护,不可避免的存在错误,使用信息前请自行验证