时间线是如何绘制的？

[ChenZhongPu]

请问，你博客里面的“历史”中的时间线是如何绘制的？谢谢。

[tufu9441]

Create a history folder in source, including an index.md file within following codes:

title: 历史
layout: page
comments: false

---
<div class="timeline">
    <div class="timeline-item active">
        <div class="year">2007 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">初试个人博客，先后在天涯博客和Blogger上落脚</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2009.6 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">开始用Wordpress搭建独立博客，注册域名aabaa.cn，使用由cmded提供的免费虚拟主机</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2010 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">cn域名因过期或未备案被收回，导致博客消失一段时间</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2011.6 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">购买域名9441.me，网站重新建立，部分数据丢失</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2014.1 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">离域名到期还有半年时更换新域名haomwei.com，原域名301重定向至此</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2014.2 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">博客程序由Wordpress更换至国产PHP程序Typecho</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2014.3 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">主机迁移至性价比出众的香港TECHNETCAL付费空间</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2015.1 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">主机短暂迁移至Bandwagon Host（搬瓦工）提供的廉价VPS</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2015.2 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">博客程序由Typecho更换至Hexo，并同时托管于Github和Gitcafe</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2015.6 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">域名完成国内备案，开始使用又拍云CDN加速服务，并开启全站https访问</div>
    </div>
    <div class="timeline-item active">
        <div class="year">2015.10 <span class="marker"><span class="dot"></span></span>
        </div>
        <div class="info">服务器迁移至阿里云ECS青岛机房，海外访问解析至DigitalOcean</div>
    </div>
</div>

[pangsir8983]

这代码不能自动生成吗?

[shixin-guo]

请问这个时间线的css在哪里 能参考一下你的吗