博客文章/页面内添加时间轴记录

今天分享一个如何在你的博客里加一个“时间线”的方法。想象一下，你的故事或者信息就像电影里的剧情，时间线就像那个一直往前跑的字幕，告诉你现在进行到哪一步了。这样，你的读者就能更清楚地跟着你的思路走，而且看起来也很有趣哦！别担心，做起来很简单，这篇文章会手把手教你怎么做。

效果展示

2024-04-08T01:12:19.png

具体操作

将以下代码添加到typecho文章或者页面合适位置即可：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h4>
<span style="font-size: 20px; color: #99ccff;">
    <a style="color: #99ccff;text-decoration: none;">2024年</a>
</span>
</h4>
<div id="teamnewslist">
    <ol>
<li><b>2024年05月</b>荣获国际吹牛妄想双奖 </li>
<li><b>2024年04月</b>xxx </li>
<li><b>2024年03月</b>编不下去了…… </li>
<li><b>2024年02月</b>筹备收购xxx </li>
<li><b>2024年01月</b>完成对刘郎阁的升级，创建刘郎阁集团</li>
</ol>
</div>
<h4>
<span style="font-size: 20px; color: #99ccff;">
    <a style="color: #99ccff;text-decoration: none;">2023年</a>
</span>
</h4>
<div id="teamnewslist">
    <ol>
<li><b>2023年09月</b>成功收购腾易讯云</li>
<li><b>2023年7月</b>成功收购华啥为</li>
<li><b>2023年05月</b>成功收购百不度</li>
<li><b>2023年03月</b>成功收购阿一里不晕</li>
<li><b>2023年01月</b>刘郎阁初创，并收购yjvc.cn</li>
</ol>
</div>
<style>
/* 站点动态时间轴 */
#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;}
</style>
</body>
</html>

注意：由于 typecho 的MD编辑器的原因，为了防止被 MarkDown 解析引擎解析建议加上 !!!html 特权模式才能不被网页前端解析。

其他样式参考

除了本文分享的这个源码，你还可以参考本站其他文章：网站可视化时间轴。

完！