写在前面

这一讲,罐头提供了一个最最最简单的主题示例,来讲解一个主题的基础组成部分
简单到什么程度呢,没有侧边栏,没有评论区,整个主题加起来一共 6 个文件,代码总行数也就几十行,老规矩,适合纯新手,老鸟忽略

这一篇先放主题文件,便于直观理解,下一篇会列举各种常用代码,比如怎么调用站点标题、怎么判断当前分类等等

主题效果

主题效果见下图(真的非常简陋,仅作示例)

主题教程示例.png

接下来,罐头列出所有主题文件的内容,部分可能有疑惑的地方做了注释

header.php

站点的标题、描述、全站导航可以放在这里,一些头部的 便签、站点的 keywords 和 description 程序会自动输出

<!DOCTYPE html>
<html>

<head profile="http://gmpg.org/xfn/11">
  <meta charset="UTF-8">
	<title><?php $this->archiveTitle(array(
				'category'  =>  _t('分类 %s 下的文章'), // 分类列表页
				'search'    =>  _t('包含关键字 %s 的文章'), // 搜索结果页
				'tag'       =>  _t('标签 %s 下的文章'), // TAG 列表页
				'author'    =>  _t('%s 发布的文章') // 作者名下的文章列表页
			), '', ' - '); ?><?php $this->options->title(); ?></title><!-- 根据不同页面类型显示不同的页面 title -->
	<link rel="stylesheet" href="<?php $this->options->themeUrl('style.css'); ?>">
  <?php $this->header(); ?> <!-- 输出默认的头部,无需自定义 keywords 和 description 时无需修改 -->
</head>

<body>
  <div id="container">
    <div id="header">
      <div class="site-title"><a href="<?php $this->options->siteUrl(); ?>"><h1><?php $this->options->title(); ?></h1></a></div>
      <div class="site-description"><?php $this->options->description(); ?></div>
    </div>
    <div id="menu">
    	<li><a href="/" >主页</a></li>
    	<li><a href="/about.html" >关于</a></li>
    </div>
    <div id="main">

index.php

主题的一些基本信息需要写在 index.php 的最前面,这些信息都会显示在后台的主题管理页面

在没有 archive.php 页面的时候,xx分类下的文章列表页、xx Tag 下的文章列表页、xx 作者下的文章列表页、xx 关键词下的文章列表页都会套用 index.php

<?php
/**
 * Update 2018-07-23
 * 
 * @package demotheme
 * @author 罐头
 * @version 1.0
 * @link https://vpscan.com
 */
$this->need('header.php'); ?><!-- 主题的基本信息,会显示在 /admin/themes.php -->

<?php while($this->next()): ?>	
<div class="post">
    <div class="post-title"><a href="<?php $this->permalink() ?>"><h2><?php $this->title(); ?></h2></a></div>
    <div class="post-meta"><?php $this->author(); ?> // <?php $this->category(','); ?> // <?php $this->date('Y-m-d H:i'); ?></div>
    <div class="post-content"><?php $this->excerpt(250); ?></div><!-- 文章摘要,超过 250 则截断 -->
    <div class="post-more"><a href="<?php $this->permalink() ?>">继续阅读</a></div>
</div>
<?php endwhile; ?>

<?php $this->pageNav('上一页','下一页',2,'...'); ?><!-- 分页代码区域 -->

<?php $this->need('footer.php'); ?><!-- 引入 footer.php -->

footer.php

这个没什么好说的

  </div><!-- end of main -->
  <div id="footer">
    Powered by <a href="http://typecho.org" target="_blank" >Typecho</a>
  </div>
</div><!-- end of container -->

</body>
</html>

post.php

文章详情页

<?php $this->need('header.php'); ?>

<div class="inner-post">
	<div class="post-title"><h2><?php $this->title(); ?></h2></div>
	<div class="post-meta"><?php $this->author(); ?> // <?php $this->category(','); ?> // <?php $this->date('Y-m-d H:i'); ?></div>
	<div class="post-content"><?php $this->content(); ?></div>
</div>

<?php $this->need('footer.php'); ?>

page.php

独立页面,和文章详情页差不多

<?php $this->need('header.php'); ?>

<div class="inner-post">
	<div class="post-title"><h2><?php $this->title(); ?></h2></div>
	<div class="post-meta"><?php $this->author(); ?> // <?php $this->date('Y-m-d H:i'); ?></div>
	<div class="post-content"><?php $this->content(); ?></div>
</div>

<?php $this->need('footer.php'); ?>

style.css

html,body,h1,h2,h3,h4,h5,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea {margin: 0; padding: 0;}
body{background:#f8f8f8; color:#555; font-size:16px; line-height:22px; font-family:"Hiragino Sans GB", "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;}
h1,h2,h3,h4,h5,h1 a,h2 a,h3 a,h4 a,h5 a{color:#555;}
h1 {font-size:48px;}
h2 {font-size:22px;}
h3 {font-size:18px; margin-bottom:30px;}
p{margin-bottom: 30px;}
img{border:none;}
a{color:#666;text-decoration:none;}

#container{width:800px;margin:0 auto;}

#header{margin:50px 0 20px 0;}
#header .site-title{height:80px;line-height:80px;margin-bottom:20px;}
#header .site-description{font-size:18px;font-style:italic;}

#menu{height:80px;line-height:80px;margin-bottom:30px;font-size:20px;}
#menu li{float:left;list-style: none;margin-right:20px;}
#menu li a{padding:6px 12px;border:1px solid #ddd;}

.post,.inner-post{margin-bottom:50px;}
.post .post-title{margin-bottom:20px;}
.post .post-meta{margin-bottom:20px;color:#888;}
.post .post-content{margin-bottom:20px;line-height:25px;color:#777;}
.post .post-more{margin-bottom:20px;color:#888;}

.inner-post .post-title{margin-bottom:30px;}
.inner-post .post-meta{margin-bottom:30px;color:#888;}
.inner-post .post-content{margin-bottom:20px;line-height:25px;color:#777;}
.inner-post .post-more{margin-bottom:20px;color:#888;}

.page-navigator{margin-bottom:50px;height:50px;}
.page-navigator li{float:left; margin-right:10px;list-style:none;}
.page-navigator li{padding:10px 20px;border:1px solid #ddd;}
.page-navigator li.current,.page-navigator li:hover{background:#eee;}

#footer{margin-bottom:50px;}

必读声明

内容声明:本站仅发布信息,不为任何商家和产品背书,详见《 VPSCAN 服务协议 》
评测声明:本站发布的评测文章,仅代表评测当时特定主机的表现,仅供参考
容错声明:业余时间维护,难免出现错误,如有冲突请以商家官网为准,欢迎报告错误
产品选择:海外主机的访问表现受多种因素影响,请根据自身情况对比选择,切勿盲从
争议处理:本站不介入访问者和商家之间的纠纷,有问题请自行协商解决