懿古今时光轴记录修改版，增加折叠功能！

流年
流年
管理员
322
文章
447.8千
浏览
21,974字数 1809阅读6分1秒

之前在很多博客上看到博主们用一个时光轴来记录他们的博客历程，一直想折腾一个，因为事情很多，一直也没折腾。

昨天浏览博客的时候，发现boke112上面有一篇关于折腾时光轴记录的文章：http://boke112.com/2964.html   博主提供方法很简单，就是一段代码，一段css。时光轴的效果也不错，比较简洁，适合记录博客的一些重大事件。

懿古今时光轴记录修改版，增加折叠功能！-图片1

个人觉得美中不足就是这个时光轴不能折叠，如果我们记录的很多的话会导致页面很长很长。

所以我需要一个折叠的功能，于是就自己折腾了半天，然后就折腾出来了。送给需要的朋友！

理论上来说代码都是通用的不管你是什么博客！（ps：我瞎说的，我什么都不懂。。。）

方法如下

1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码：

  1. /* 站点动态时间轴 */
  2. #teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}
  3. #teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
  4. #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)}
  5. #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
  6. #teamnewslist li:hover{color: #555;}
  7. #teamnewslist li:hover b::after{border-color: #C01E22;}
  8. #teamnewslist li:hover b{color: #C01E22;}
  9. #teamnewslist{padding-left:33px;}
  10. #timedd dd{margin:0;padding:0;}
  11. #timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
  12. #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;}
  13. #timedd dt a:hover{color: #FF0000;}

 

懿古今时光轴记录修改版，增加折叠功能！-图片2

2、在编辑页面或文章时，请切换到文本模式， 然后按以下格式编辑内容：

  1. <div id="timedd">
  2. ******这是第一个年份开始，用的时候删除这句话！******
  3. <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">2016</a></dt>
  4.          <dd id=LM1>
  5.   <div id="teamnewslist">
  6.     <ol>
  7.     <li><b>2016年X月X日</b>.........</li>
  8.            <li><b>2016年01月31日</b>网站前几天备案成功，域名由lnaa.top更换为lnbibi.com。博客也改名为流年哔哔.</li>
  9.    </ol>
  10.    </div>
  11.    </dd>
  12. ******这是第一个年份结束，用的时候删除这句话！******
  13. ******这是第二个年份开始，用的时候删除这句话！******
  14. <dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">2015</a></dt>
  15.          <dd id=LM2 style="DISPLAY: none">
  16.   <div id="teamnewslist">
  17.        <ol>
  18.            <li><b>2015年12月3日</b>给说说增加了点赞的功能。未来可以做成插件，给需要的朋友。</li>
  19.            <li><b>2015年10月17日</b>自己折腾了下用户评论的等级和二维码生成。</li>
  20.            <li><b>2015年09月13日</b>感觉知言的模板功能虽然丰富，但是太过臃肿不利于阅读，所以换了知更鸟的模板！所以今后就是主要更新内容，模板不折腾了。挺好的。</li>
  21.            <li><b>2015年08月14日</b>一番折腾，给博客增加了类似QQ空间的说说功能用来发说说，反正我很需要这个功能。<a href="http://lnaa.top/shuo" target="_blank">点击进入说说</a></li>
  22.            <li><b>2015年06月26日</b>建立了这个博客，取名为流年博客！购买了柚子皮的模板，最后发现并不适合我，所以用回了默认模板，后来换成知言的模板！</li>
  23.        </ol>
  24.    </div>
  25.        </dd>
  26. ******这是第二个年份结束，用的时候删除这句话！******
  27. </div>

大家可以看出来第一个年份代码和第二个是一样的，其实就是一段代码一直循环。如果需要添加年份，就复制其中一段代码粘贴到后面就可以了，其中上面这段代码中需要注意的地方有三个。

以下这段代码是我从上面的每段代码开头复制的，以便给大家说清楚需要修改的地方！这段代码不添加在任何地方，只是为了给大家说明！

  1. <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">2016</a></dt><dd id=LM1>
  2. <dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">2015</a></dt><dd id=LM2 style="DISPLAY: none">

这上面代码里面的2015 2016 都是年份，里面的ShowFLT(1)和ShowFLT(2)还有dd id=LM1和dd id=LM2 这个1和2就是顺序。

如果你想添加一个2014年的年份的话，就把上面循环的那段代码复制一遍按照格式粘贴在下面，然后把ShowFLT和LM 改成 3 。就行了。

例如：

  1. ******这是第一个年份开始，用的时候删除这句话！******
  2. <dt onClick=javascript:ShowFLT(3) href="javascript:void(null)"><a href="javascript:;">2014</a></dt>
  3.          <dd id=LM3>
  4.   <div id="teamnewslist">
  5.     <ol>
  6.     <li><b>2016年X月X日</b>.........</li>
  7.            <li><b>2016年01月31日</b>网站前几天备案成功，域名由lnaa.top更换为lnbibi.com。博客也改名为流年哔哔.</li>
  8.    </ol>
  9.    </div>
  10.    </dd>
  11. ******这是第一个年份结束，用的时候删除这句话！******

如果你想默认展开时间轴记录，就把<dd id=LM2 style="DISPLAY: none">中的style="DISPLAY: none删除，比如以上代码中我默认展开的是2016年的时间轴，所以我删除了style="DISPLAY: none"如果你想默认全部展开，就全部删除，反之全部添加！

如果你想在所在年份里面添加一条记录就把上面代码中的其中一条记录<li></li>复制粘贴，然后修改文字即可！

  1. <li><b>2015年12月3日</b>这是第一条</li>
  2. <li><b>2015年12月3日</b>这是第二条</li>
  3. <li><b>2015年12月3日</b>就是这样搞</li>

3、在你的博客footer.php文件里面的</body>之前添加这段js！

  1. <script>
  2. var number=2; //定义条目数
  3. function LMYC() {
  4. var lbmc;
  5.     for (i=1;i<=number;i++) {
  6.         lbmc = eval('LM' + i);
  7.         lbmc.style.display = 'none';
  8.     }
  9. }
  10. function ShowFLT(i) {
  11.     lbmc = eval('LM' + i);
  12.     if (lbmc.style.display == 'none') {
  13.         LMYC();
  14.         lbmc.style.display = '';
  15.     }
  16.     else {
  17.         lbmc.style.display = 'none';
  18.     }
  19. }
  20. </script>

 

 这段js需要修改的地方就是上面的定义条目数 ，这个定义条目数是和上面有几个年份对应的，如果你有三个年份你就修改成3 ，4个 你就修改成4！
再说简单一点就是这篇文章最上面的那段代码，你循环了几次就填写几 ！上面我循环了两次所以我这里是2！
好吧，还不明白我就没办法了，我表达能力真的很有限，代码我又不太懂。不能很好给大家解释清楚！海涵！
 说明：以上代码来至与懿古今大神博客和懒人图库，我只是加以整合修改。如有不对，欢迎指正，谢谢！

 

最后演示地址:http://lnaa.top/about

博客最后更新：2016-4-23
流年
  • 本文由 流年 发表于2016年4月20日 13:15:42
  • 除非特殊声明，本站文章均为原创，需要转载，请留言说明！
博客个性化字体

加载中...

评论  2  访客  2
    • 分钱榜
      分钱榜 1
      上海市 2F
      回复

      其他可以了，重叠功能没折腾出来 :eek:

      • 网扑蜘
        网扑蜘 3
        重庆市 1F
        回复

        不错的功能，要是插件就好了

      匿名

      发表评论

      匿名网友
      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
      确定

      拖动滑块以完成验证