从零开始修typecho | 郑“家”

想试着做一个满足自己需求的主题（大概是复制粘贴吧！）

可以研究一下的东西[Typecho语法大全/Typech常用函数/Typecho调用方法](https://cloud.tencent.com/developer/article/2234320)

功能

- 总之先装了个`文章目录`哈……我给放到边栏（可能变成PC限定？）里去了，有技术再看看怎么进化吧

[Typecho教程：免插件为主题加入文章目录功能](https://typecho.dev/11/)

- 加了个`倒计时`

[给自己博客底部加上倒计时](https://forum.typecho.org/viewtopic.php?t=870)

- 增加`标签`（嫌标签太多，还是独立出来吧）和`文章归档`页面

[Typecho技巧：自定义独立页面模板实现归档、分类、标签](https://www.skyqian.com/archives/typecho-pages.html)

- 在页脚加个`运行时间`

Typecho显示网站运行时间的方法总结

- 加了个`时间轴`

[Typecho 博客文章/页面内添加时间轴记录](https://www.jinjun.top/156.html)

- 想加个独立页面`展示单独分类下的文章`，结果失败了……这个以后再看看好了~~，先用链接好了~~
- 增加了个`返回顶部`

[Typecho 返回顶部BacktoTop的几种方法](https://xuyu.in/1069.html)

- 加了个`编辑`功能，这样就不用一直登陆到后台修改了

[Typecho通过判断用户登陆状态，给文章加编辑按钮](https://cloud.tencent.com/developer/article/2267117)

- `二级菜单`看起来有点复杂，先不折腾，但是先码一下教程

[typecho输出导航（二级）和独立页面代码](https://www.dpaoz.com/823)

直达`评论`区，因为有的文章写得太长了，所以需要一个直接冲到评论区的功能，于是从index.php那扒了一个，好像可以用欸？不小心放进了编辑的PHP里，又没有退出登录查看，到大晚上才发现，失误失误！
加了个`短代码`看看怎么样失败了，好像要给短代码一个独立的类别，等有时间再折腾
首页要不要`显示摘要内容`，或直接`显示全文`

文章目录

functions.php

function createCatalog($obj) {

global $catalog;

global $catalog_count;

$catalog = array();

$catalog_count = 0;

$obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function($obj) {

global $catalog;

global $catalog_count;

$catalog_count ++;

$catalog[] = array('text' =<blockquote>trim(strip_tags($obj[3])), 'depth' =<blockquote>$obj[1], 'count' =<blockquote>$catalog_count);

return '<h'. $obj[1].$ obj[2].'><a name="cl-'. $catalog_count.'"></a>'.$ obj[3].'</h'.$obj[1].'>';

}, $obj);

return $obj;

}

function getCatalog() {

global $catalog;

$index = '';

if ($catalog) {

$index = '<ul>'."\n";

$prev_depth = '';

$to_depth = 0;

foreach( $catalog as$ catalog_item) {

$catalog_depth = $catalog_item['depth'];

if ($prev_depth) {

if ( $catalog_depth ==$ prev_depth) {

$index .= '</li>'."\n";

} elseif ( $catalog_depth <blockquote>$ prev_depth) {

$to_depth++;

$index .= '<ul>'."\n";

} else {

$to_depth2 = ($to_depth <blockquote>($prev_depth <li>$catalog_depth)) ? ($prev_depth <li>$catalog_depth) : $to_depth;

if ($to_depth2) {

for ( $i=0;$ i< $to_depth2;$ i++) {

$index .= '</li>'."\n".'</ul>'."\n";

$to_depth--;

}

$index .= '</li>';

}

$index .= '<li><a href="#cl-'.$catalog_item['count'].'">'.$catalog_item['text'].'</a>';

$prev_depth = $catalog_item['depth'];

}

for ( $i=0;$ i<= $to_depth;$ i++) {

$index .= '</li>'."\n".'</ul>'."\n";

}

$index = '<div id="toc-container">'."\n".'<div id="toc">'."\n".'<strong>文章目录</strong>'."\n".$index.'</div>'."\n".'</div>'."\n";

}

echo $index;

}

把上面的代码放到主题文件functions.php内，然后在functions.php内搜索关键词function themeInit，如果有themeInit这个函数，则在themeInit这个函数内添加下面的代码

有themeInit函数

if ($archive->is('single')) {

$archive->content = createCatalog($archive->content);

}

无themeInit函数

function themeInit($archive) {

if ($archive->is('single')) {

$archive->content = createCatalog($archive->content);

}

调用代码

<?php getCatalog(); ?>

倒计时代码

<Script Language="JavaScript"<blockquote>

　　 var timedate= new Date("May 2,2010");

　　 var times= "唐涛的生日";

　　 var now = new Date();

　　 var date = timedate.getTime() <li>now.getTime();

　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));

　　 if (time >= 0)

　　 document.write( "现在离"+times+"还有: "+time +"天")

</Script>

文章归档页面

<code>

<?php

/**

* 文章存档

*

* @package custom

*/

if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

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

<divclass="col-md-12 text-center">

<divclass="page-header">

<h2class="page-title"><?php $this->title() ?></h2>

<hr>

</div>

<divclass="col-md-12">

<articleclass="page-wrapper"itemscopeitemtype="http://schema.org/BlogPosting">

<divclass="post-content"itemprop="articleBody">

<?php

$stat = Typecho_Widget::widget('Widget_Stat');

Typecho_Widget::widget('Widget_Contents_Post_Recent', 'pageSize='. $stat->publishedPostsNum)->to($ archives);

$year=0; $mon=0; $i=0; $j=0;

$output = '<div class="archives">';

while($archives->next()){

$year_tmp = date('Y',$archives->created);

$mon_tmp = date('m',$archives->created);

$y=$year; $m=$mon;

if ( $year <blockquote>$ year_tmp || $mon <blockquote>$ mon_tmp) {

$output .= '</ul></div>';

}

if ( $year !=$ year_tmp || $mon !=$ mon_tmp) {

$year = $year_tmp;

$mon = $mon_tmp;

$output .= '<div class="archives-item"><h4>'.date('Y年m月',$archives->created).'</h4><hr><ul class="archives_list">'; //输出年份

}

$output .= '<li>'.date('d日',$archives->created).' <a href="'.$archives->permalink .'">'. $archives->title .'</a></li>'; //输出文章

}

$output .= '</ul></div></div>';

echo $output;

?>

</div>

</article>

</div><!-<li>end #main-->

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

<code>

运行时间代码

functions.php

<code>

// 设置时区

date_default_timezone_set('Asia/Shanghai');

/**

* 秒转时间，格式年月日时分秒

*

*/

function getBuildTime() {

// 在下面按格式输入本站创建的时间

$site_create_time = strtotime('2019-12-20 20:00:00');

$time = time() <li>$site_create_time;

if (is_numeric($time)) {

$value = array(

"years" =<blockquote>0, "days" =<blockquote>0, "hours" =<blockquote>0,

"minutes" =<blockquote>0, "seconds" =<blockquote>0,

);

if ($time >= 31556926) {

$value["years"] = floor($time / 31556926);

$time = ($time % 31556926);

}

if ($time >= 86400) {

$value["days"] = floor($time / 86400);

$time = ($time % 86400);

}

if ($time >= 3600) {

$value["hours"] = floor($time / 3600);

$time = ($time % 3600);

}

if ($time >= 60) {

$value["minutes"] = floor($time / 60);

$time = ($time % 60);

}

$value["seconds"] = floor($time);

echo '<span class="btime">'.$value['years'].

'年'.$value['days'].

'天'.$value['hours'].

'小时'.$value['minutes'].

'分</span>';

} else {

echo '';

}

<code>

调用代码

<?php getBuildTime(); ?>

时间轴代码

style.css

/* 站点动态时间轴 */

#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid

#eee;font-size: 18px;color: #666;}

#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}

#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}

#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}

#teamnewslist li:hover{color: #555;}

#teamnewslist li:hover b::after{border-color: #C01E22;}

#teamnewslist li:hover b{color: #C01E22;}

调用代码

!!!

<h4>

<span style="font-size: 20px; color: #99ccff;">

<astyle="color: #99ccff;text-decoration: none;">2019年</a>

</span>

</h4>

<div id="teamnewslist">

<ol>

<li><b>2019年10月</b>遭受大规模攻击，导致进入小黑屋三天。收录被K</li>

<li><b>2019年7月</b>修复DUX模板大部分BUG</li>

<li><b>2019年06月</b>完成jinjun.top的域名备案</li>

<li><b>2019年03月</b>腾讯云服务器过期，启用jinjun.top域名</li>

<li><b>2019年01月</b>完成对jinjun.top域名的收购</li>

</ol>

</div>

!!!

编辑页面/编辑文章

编辑页面代码

<?php if($this->user->hasLogin()):?>

<ahref="<?php $this->options->adminUrl(); ?>write-page.php?cid=<?php echo$ this->cid;?>">编辑</a>

<?php endif;?>

编辑文章代码

<?php if($this->user->hasLogin()):?>

<ahref="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo$ this->cid;?>">编辑</a>

<?php endif;?>

直达评论区代码

<li itemprop="interactionCount">

<aitemprop="discussionUrl"href="<?php $this->permalink() ?>#comments">

<?php $this->commentsNum('评论', '1 条评论', '%d 条评论'); ?></a>

</li>

显示摘要内容

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

显示全文内容

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

抄了post.php的……不然图片也太大了

<div class="post-content" itemprop="articleBody">

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

</div>

本文作者为昴，转载请注明。

Typecho