添加折叠功能的时光轴记录网站发展历程——WordPress美化

2017年9月6日19:50:42 36 14,401

我们玩独立博客的,都会有一个关于我们或个人档案的页面,专门用来记录我们折腾博客、网站的一些重大事情或者发展历程。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。所以,今天就跟大家说一说如何为我们的博客网站添加时光轴记录,包括WordPress、zblog等程序建站的都可以。

 

添加折叠功能的时光轴记录网站发展历程——WordPress美化

 

博主提供方法很简单,就是一段代码,一段css。时光轴的效果也不错,比较简洁,适合记录博客的一些重大事件。

详细操作步骤(以WordPress为例说明):

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

  1. /* 站点动态时间轴 */
  2. #teamnewslist ol{list-style:none;padding-left14px;border-left2px solid #eee;font-size15px;color#666;}
  3. #teamnewslist b{font-size12px;font-weightnormal;color#999;displayblock;positionrelative;margin-bottom:5px;}
  4. #teamnewslist b::after{positionabsolute;top6px;left: -22px;content'';width14px;height14px;border-radius: 50%;background-color#fff;border2px 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-weightbold;color:#333;font-size:18px;cursor:pointer;padding1px 0 0 14px;}
  13. #timedd dt a:hover{color#FF0000;}

 

添加折叠功能的时光轴记录网站发展历程——WordPress美化

 

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

此处为隐藏的内容!
发表评论并刷新,方可查看

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

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

  1. <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">2018</a></dt><dd id=LM1>
  2. <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=LM1dd id=LM2 这个1和2就是顺序。

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

例如:

  1. ******这是第一个年份开始,用的时候删除这句话!******
  2. <dt onClick=javascript:ShowFLT(3) href="javascript:void(null)"><a href="javascript:;">2015</a></dt>
  3.          <dd id=LM3>
  4.   <div id="teamnewslist">
  5.     <ol>
  6.     <li><b>2017年X月X日</b>.........</li>
  7.           <li><b>20170810日</b>注册国际顶级域名www.ixianzong.com,并购买独享虚拟主机,申请备案。</li>
  8.    </ol>
  9.    </div>
  10.    </dd>
  11. ******这是第一个年份结束,用的时候删除这句话!******

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

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

  1. <li><b>2015年12月9日</b>这是第一条</li>
  2. <li><b>2015年12月7日</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!

好吧,如果你还不明白,可以在下方留言,我尽力帮助你解决。

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论取消回复

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:36   其中:访客  0   博主  0

    • 落叶尘飞 落叶尘飞 0 来自天朝的朋友 广东省深圳市 电信

      正需要,需要学习。。。

      • bh8sel bh8sel 0 来自天朝的朋友 云南省楚雄州 电信

        学习。

        • voice站点 voice站点 3 来自天朝的朋友 四川省成都市 电信

          支持支持

          • 壹清云 壹清云 0 来自天朝的朋友 辽宁省阜新市 联通

            来了来了来了

            • 燕州闲人 燕州闲人 2 来自天朝的朋友 辽宁省 联通

              感谢分享

              • 孤狼 孤狼 1 来自天朝的朋友 黑龙江省大庆市 联通

                看一下

                • 小任 小任 0 来自天朝的朋友 重庆市 移动

                  感谢分享

                  • 小米米 小米米 3 来自天朝的朋友 吉林省吉林市 联通

                    非常实用

                    • GQL119871 GQL119871 2 这家伙可能用了美佬的代理 美国

                      加油

                      • 孤狼博客 孤狼博客 1 来自天朝的朋友 黑龙江省大庆市 联通

                        来看看。

                        • dyt5AAUI dyt5AAUI 1 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                          感谢分享,歇息学习

                          • xichengwan xichengwan 4 来自天朝的朋友 火狐浏览器 Windows 10 河南省郑州市 联通

                            谢谢分享

                            • shdder shdder 3 来自天朝的朋友 谷歌浏览器 Windows 10 天津市 腾讯公司联通数据中心节点

                              学习学习

                              • 王小优 王小优 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省株洲市 电信

                                路过学习

                                • wordus wordus 1 来自天朝的朋友 搜狗浏览器 Windows 10 江苏省盐城市 电信

                                  学习。