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

像这个效果,这里的我是把css代码写在了style.css,比如像handsome主题,可以在后台添加自定义css。
1/* 站点动态时间轴 */
2#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid
3#eee;font-size: 18px;color: #666;}
4#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
5#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)}
6#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
7#teamnewslist li:hover{color: #555;}
8#teamnewslist li:hover b::after{border-color: #C01E22;}
9#teamnewslist li:hover b{color: #C01E22;}
把以下代码添加到typecho文章或者添加到页面,但是typecho的MD编辑器的原因。为了防止被MarkDown解析引擎解析建议加上!!!html特权模式才能不被网页前端解析。
1<h4>
2<span style="font-size: 20px; color: #99ccff;">
3 <a style="color: #99ccff;text-decoration: none;">2019年</a>
4</span>
5</h4>
6<div id="teamnewslist">
7 <ol>
8<li><b>2019年10月</b>遭受大规模攻击,导致进入小黑屋三天。收录被K</li>
9<li><b>2019年7月</b>修复DUX模板大部分BUG</li>
10<li><b>2019年06月</b>完成jinjun.top的域名备案</li>
11<li><b>2019年03月</b>腾讯云服务器过期,启用jinjun.top域名</li>
12<li><b>2019年01月</b>完成对jinjun.top域名的收购</li>
13</ol>
14</div>
如果想添加一个大事记记录,可以在页面一条条添加
1<li><b>2019年01月</b>你的大事记</li>
添加年份记录
1<h4>
2<span style="font-size: 20px; color: #99ccff;">
3 <a style="color: #99ccff;text-decoration: none;">2019年</a>
4</span>
5</h4>
一定要在<div id="teamnewslist">标签前面。