钧言极客钧言极客

不因何事去制作
只因兴趣而创造

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

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

typecho.png

像这个效果,这里的我是把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">标签前面。

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

未经允许不得转载:钧言极客 » Typecho 博客文章/页面内添加时间轴记录

评论 抢沙发