Typecho 仿简书主题 时间轴归档页实现
今天博友找到一个好的时间轴实现文档,我拿过来改了改，变成了自己的。
根据文档提供的示例代码如下：
<meta charset="utf-8">
<title>说说</title>
<link rel="stylesheet" href="https://img.aihoom.com/shuoshuo.css" type="text/css">
<!--<style type="text/css">
</style>-->
<ul class="cbp_tmtimeline">
<li> <time class="cbp_tmtime"> <span>2018-09-11</span></time>
<div class="cbp_tmlabel">
<p>截止 2018-09-11 号。总更新文章 229 篇，获得 511 条评论</p>
</div> </li>
<li> <time class="cbp_tmtime"> <span>2018-08-30</span></time>
<div class="cbp_tmlabel">
<p>博客 1年183天了</p>
</div> </li>
<li> <time class="cbp_tmtime"> <span>2018-05-06</span></time>
<div class="cbp_tmlabel">
<p>数据丢失了100多篇，有点心疼</p>
</div> </li>
</ul>而我的归档页面数据封装在Textends插件里,没法直接改主题代码实现。所以我找到了插件对应的代码，进行了修改。
修改如下：
- 首先，找到
Textends插件的Plugin.php文件，找到下面代码：
public static function archives($options=null){
$options = new Typecho_Config($options);
$options->setDefault(array(
'desc'=>true ,'wrapClass'=>'archives', 'monthClass'=>'archive-month', 'monthTitle'=>'Y年m月', 'monthTitleTag'=>'h2', 'listTag'=>'ul', 'listClass'=>'archive-list',
'dateFormat'=>'Y-m-d H:i:s', 'listFormat'=>'<li>{day}日<a href="{permalink}">{title}</a></li>', 'output'=>true
));- 将上面代码改成下面这样：
public static function archives($options=null){
$options = new Typecho_Config($options);
$options->setDefault(array(
'desc'=>true ,'wrapClass'=>'archives', 'monthClass'=>'archive-month', 'monthTitle'=>'Y年m月', 'monthTitleTag'=>'h2', 'listTag'=>'ul', 'listClass'=>'archive-list',
'dateFormat'=>'Y-m-d H:i:s', 'listFormat'=>'<li><time class="cbp_tmtime"> <span>{day}日</span></time> <div class="cbp_tmlabel"> <a href="{permalink}">{title}</a></div></li>', 'output'=>true
));实际修改部分为：'<li><time class="cbp_tmtime"> <span>{day}日</span></time> <div class="cbp_tmlabel"> <a href="{permalink}">{title}</a></div></li>'
主要是给日期和标题外面包装了两个class，以便适用文档里提供的class。
根据它的class，我做了一些修改
主要修改点：
- 全局替换
.cbp_tmtimeline为.archive-list - 添加样式：
.archive-list > li .cbp_tmlabel a {color: #fff;} - 在样式：
.archive-list > li .cbp_tmlabel{里添加display: inline-block;
最后记得在header.php里面把archives.css链接进来。
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/archives.css'); ?>">好啦，完成了。
祝你成功！！！
参考文档：时间轴实现文档
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年04月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录