Zblog用代码制作时间轴页面,记录网站大事
在wp中制作时间轴页面的插件是很多的，样式也足够丰富、好看，无需用纯代码制作；而Zblog暂时这方面的教程较少，想要在Zblog网站中创建一个自适应模板的时间轴页面，可以通过纯代码实现，虽说样式简单了一些，可毕竟能够用来记录网站大事。好了，废话不多说，直接上教程。
1、在CSS文件中，添加如下样式。
#shijianzhou ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid #eee;font-size: 18px;color: #2e98f1;}
#shijianzhou b{font-size: 12px;font-weight: normal;color: #009d4f;display: block;position: relative;margin-bottom:5px;}
#shijianzhou b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #009d4f;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#shijianzhou li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#shijianzhou li:hover{color: #2e98f1;}
#shijianzhou li:hover b::after{border-color: #C01E22;}
#shijianzhou li:hover b{color: #C01E22;}2、新建一个模板，莹莹是直接复制了一份template文件夹下的post-page页面模板，取名为“abc”，在该文件中插入网站的头部和底部代码（可以在Index文件中复制）。
3、在模板文件“abc”的内容调用代码{$article.Content}下方，插入以下格式代码。
<div id="shijianzhou"> <ol> <li><b>2021年9月20日</b> 搜索关键词莹莹笔记排名第一位</li> <li><b>2021年8月30日</b> 百度收录十几个内页</li> <li><b>2021年7月27日</b> <a href="https://www.ynyn34.com/" target="_blank" style="color:#F00" rel="noopener">莹莹的日常</a>主页被收录</li> <li><b>2021年7月16日</b> 网站上线</li> </ol> </div>
4、发布网站大事记录文章，模板记得使用刚刚建立的“abc”，想要增添或是修改记录，也同样需要在“abc”模板文件中进行。新增事件记录的方式为：复制<li><b>此处填写时间</b> 事件内容</li>一行即为一件事。
至此，Zblog用代码制作时间轴页面已经完成，这种方式的缺点是修改和维护都非常的麻烦，有能力的大牛可以尝试开发插件。
