我们玩独立博客的,都会有一个关于我们或个人档案的页面,专门用来记录我们折腾博客、网站的一些重大事情或者发展历程。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。所以,今天就跟大家说一说如何为我们的博客网站添加时光轴记录,包括WordPress、zblog等程序建站的都可以。
博主提供方法很简单,就是一段代码,一段css。时光轴的效果也不错,比较简洁,适合记录博客的一些重大事件。
详细操作步骤(以WordPress为例说明):
1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码:
- /* 站点动态时间轴 */
- #teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;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;}
- #teamnewslist{padding-left:33px;}
- #timedd dd{margin:0;padding:0;}
- #timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
- #timedd dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}
- #timedd dt a:hover{color: #FF0000;}
2、在编辑页面或文章时,请切换到文本模式, 然后按以下格式编辑内容:
大家可以看出来第一个年份代码和第二个是一样的,其实就是一段代码一直循环。如果需要添加年份,就复制其中一段代码粘贴到后面就可以了,其中上面这段代码中需要注意的地方有三个。
以下这段代码是我从上面的每段代码开头复制的,以便给大家说清楚需要修改的地方!这段代码不添加在任何地方,只是为了给大家说明!
- <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">2018</a></dt><dd id=LM1>
- <dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">2017</a></dt><dd id=LM2 style="DISPLAY: none">
这上面代码里面的2017 2018 都是年份,里面的ShowFLT(1)和ShowFLT(2)还有dd id=LM1和dd id=LM2 这个1和2就是顺序。
如果你想添加一个2016年的年份的话,就把上面循环的那段代码复制一遍按照格式粘贴在下面,然后把ShowFLT和LM 改成 3 。就行了。
例如:
- ******这是第一个年份开始,用的时候删除这句话!******
- <dt onClick=javascript:ShowFLT(3) href="javascript:void(null)"><a href="javascript:;">2015</a></dt>
- <dd id=LM3>
- <div id="teamnewslist">
- <ol>
- <li><b>2017年X月X日</b>.........</li>
- <li><b>2017年08月10日</b>注册国际顶级域名www.ixianzong.com,并购买独享虚拟主机,申请备案。</li>
- </ol>
- </div>
- </dd>
- ******这是第一个年份结束,用的时候删除这句话!******
如果你想默认展开时间轴记录,就把<dd?id=LM2?style="DISPLAY:?none">中的style="DISPLAY:?none删除,比如以上代码中我默认展开的是2018年的时间轴,所以我删除了style="DISPLAY:?none"如果你想默认全部展开,就全部删除,反之全部添加!
如果你想在所在年份里面添加一条记录就把上面代码中的其中一条记录<li></li>复制粘贴,然后修改文字即可!
- <li><b>2015年12月9日</b>这是第一条</li>
- <li><b>2015年12月7日</b>这是第二条</li>
- <li><b>2015年12月3日</b>就是这样搞</li>
3、在你的博客footer.php文件里面的</body>之前添加这段js!
- <script>
- var number=2; //定义条目数
- function LMYC() {
- var lbmc;
- for (i=1;i<=number;i++) {
- lbmc = eval('LM' + i);
- lbmc.style.display = 'none';
- }
- }
- function ShowFLT(i) {
- lbmc = eval('LM' + i);
- if (lbmc.style.display == 'none') {
- LMYC();
- lbmc.style.display = '';
- }
- else {
- lbmc.style.display = 'none';
- }
- }
- </script>
这段js需要修改的地方就是上面的定义条目数 ,这个定义条目数是和上面有几个年份对应的,如果你有三个年份你就修改成3 ,4个 你就修改成4!
再说简单一点就是这篇文章最上面的那段代码,你循环了几次就填写几 !上面我循环了两次所以我这里是2!
好吧,如果你还不明白,可以在下方留言,我尽力帮助你解决。
2018年8月7日 22:05 21楼
正需要,需要学习。。。
2018年8月10日 15:34 22楼
学习。
2018年8月15日 16:12 23楼
支持支持
2018年8月18日 19:37 24楼
来了来了来了
2018年10月23日 16:50 25楼
感谢分享
2018年12月9日 20:54 26楼
看一下
2019年1月2日 15:34 27楼
感谢分享
2019年1月28日 15:13 28楼
非常实用
2019年3月8日 19:34 29楼
加油
2019年4月5日 20:35 30楼
来看看。
2019年5月11日 07:30 31楼
感谢分享,歇息学习
2019年9月25日 16:41 32楼
谢谢分享
2020年4月25日 12:32 33楼
学习学习
2020年12月6日 13:25 34楼
路过学习
2022年2月5日 22:57 35楼
学习。