今天博友找到一个好的时间轴实现文档,我拿过来改了改，变成了自己的。

根据文档提供的示例代码如下：

<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，我做了一些修改

主要修改点：

  1. 全局替换.cbp_tmtimeline为.archive-list
  2. 添加样式：.archive-list > li .cbp_tmlabel a {color: #fff;}
  3. 在样式：.archive-list > li .cbp_tmlabel {里添加display: inline-block;

最后记得在header.php里面把archives.css链接进来。

    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/archives.css'); ?>">

好啦，完成了。

祝你成功！！！

参考文档：时间轴实现文档