看到很多Wordress的博主都有时间轴模块来记录自己的建站大事记，很漂亮。其实typecho也可以添加代码来实现。

像这个效果，这里的我是把css代码写在了style.css，比如像handsome主题，可以在后台添加自定义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;}

把以下代码添加到typecho文章或者添加到页面，但是typecho的MD编辑器的原因。为了防止被MarkDown解析引擎解析建议加上!!!html特权模式才能不被网页前端解析。

<h4>
<span style="font-size: 20px; color: #99ccff;">
    <a style="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>

如果想添加一个大事记记录，可以在页面一条条添加

<li><b>2019年01月</b>你的大事记</li>

添加年份记录

<h4>
<span style="font-size: 20px; color: #99ccff;">
    <a style="color: #99ccff;text-decoration: none;">2019年</a>
</span>
</h4>

一定要在<div id="teamnewslist">标签前面。

文章来自：如何为我们的博客网站添加时光轴记录