纯代码为你的 wordpress 网站创建一个时光轴页面

2018-09-2022:55:38 53 1,161 人看过
纯代码为你的 wordpress 网站创建一个时光轴页面

2011 年 12 月 15 日,Facebook 全球上线的 timeline 是【时光轴】的原型(Facebook 翻译为“生活画报”),它能够让用户自主的以图文等形式按照事件实际发生的时间点(而非发布时间点)来展现,全面记录自己的生活与消费体验,与好友分享。它被形象的命名为“时光轴”。由于“时光轴”(timeline)由乐活平台第一个推出,并主要用于生活记录和分享,也被广泛称为“乐活轴”。

 

时光轴的出现,一改过去长篇累牍的表达形式,用简练的语言将关键信息直接呈现给读者,大大提高了信息传播效率。简单清爽的界面,又常常给人一种耳目一新的感觉。非常适合用于记录一系列重要节点上事件。

当外面的世界飞速发展,作为时尚巅峰的新生代(没错,就是咱 ),我们对博客的认知不应该停留在“写日志”的层次,而是探求一些更简单高效的表达形式。当我们想发表内容不长又重要的事情时,时间轴就是一个更加理想的表达形式。

比如很多站长都有记录建站历程的需求,但用文章的形式又不太合适。所以,本文将以 wordpress 平台为例,和大家一起从零开始创建一个用于记录建站历程的时光轴页面。

 

一、先上效果图

纯代码为你的 wordpress 网站创建一个时光轴页面

 

二、实现方法

1、打开我们的所使用主题的根目录,找到样式表文件 style.css,在最后添加下面代码:

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

2、网站后台新建一个页面,切换到文本模式,复制粘贴下面代码,然后保存,即可创建一个简单的时间轴。

纯代码为你的 wordpress 网站创建一个时光轴页面

比如,创建一个 2018 年的时间轴代码为:

  1. /* 注释:2018 年时间轴*/
  2. <h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2018</a></span></h4>/* 注释:定义年份的字体大小、文字颜色*/
  3. <div id="teamnewslist">/* 注释:2018 年的时间轴内容的开始标签*/
  4. <ol>
  5.     <li><b>2018 年 08 月 18 日</b>购置腾讯云服务器【标准型 S2】和.cn 域名【uednote.cn】。</li>/* 注释:第一条时间轴内容*/
  6.     <li><b>2018 年 08 月 16 日</b>本地使用 typecho 博客程序搭建网站成功,并购入 handsome 主题包。</li>/* 注释:第二条时间轴内容*/
  7.     <li><b>2018 年 07 月 24 日</b>续费 OSS 对象存储。</li>/* 注释:第三条时间轴内容*/
  8.     <li><b>2018 年 3 月 26 日</b>升级【共享虚拟主机普惠版】到【独享虚拟主机经济版】。</li>/* 注释:第四条时间轴内容*/
  9.     <li><b>2018 年 3 月 24 日</b>续费.cn 域名【uistudy.cn】</li>/* 注释:第五时间轴内容*/
  10.     <li><b>2018 年 1 月 24 日</b>阿里云平台上注册.top 域名【liangzhiquan.top】</li>/* 注释:第六条时间轴内容*/
  11.     <li><b>2018 年 01 月 07 日</b>续费阿里云【共享虚拟主机普惠版】</li>/* 注释:第七条时间轴内容*/
  12. </ol>
  13. </div>/* 注释:2018 年的时间轴内容的结束标签*/

 

除了注释,上面的代码主要由标题和内容两个部分组成:

第一部分:第 2 行的<h4></h4>标签主要是定义文字标题【2018】的文字大小和颜色。

  1. <h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2018</a></span></h4>/* 注释:定义年份的字体大小、文字颜色*/

 

第二部分:第 3 行至第 13 行的<div></div>标签之间的代码是 2018 年的所有时间轴内容。

  1. <div id="teamnewslist">
  2. <ol>
  3.     <li><b>2018 年 08 月 18 日</b>购置腾讯云服务器【标准型 S2】和.cn 域名【uednote.cn】。</li>
  4.     <li><b>2018 年 08 月 16 日</b>本地使用 typecho 博客程序搭建网站成功,并购入 handsome 主题包。</li>
  5.     <li><b>2018 年 07 月 24 日</b>续费 OSS 对象存储。</li>
  6.     <li><b>2018 年 3 月 26 日</b>升级【共享虚拟主机普惠版】到【独享虚拟主机经济版】。</li>
  7.     <li><b>2018 年 3 月 24 日</b>续费.cn 域名【uistudy.cn】</li>
  8.     <li><b>2018 年 1 月 24 日</b>阿里云平台上注册.top 域名【liangzhiquan.top】</li>
  9.     <li><b>2018 年 01 月 07 日</b>续费阿里云【共享虚拟主机普惠版】</li>
  10. </ol>
  11. </div>

 

其中,<li></li>标签是单条时光轴的内容,如果想增加一条时光轴,就复制粘贴一个<li></li>标签,并在标签内填写时光轴内容即可。比如:

  1. <li><b>2018 年 01 月 08 日</b>第三条时间轴</li>
  2. <li><b>2018 年 01 月 02 日</b>第二条时间轴</li>
  3. <li><b>2018 年 01 月 01 日</b>第一条时间轴</li>

 

同理,如果想创建多个年份的时间轴,就将 2018 的时间轴的代码复制一份,粘贴并更改年份和时光轴内容即可。比如 2016 到 2018 的时间轴,为了方便理解,每个年份的时间轴都用添加了注释作为区分,具体使用时可以把所有的/ 注释/标签删除。

  1. /* 注释:2018 时间轴结束*/
  2. <h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2018</a></span></h4>
  3. <div id="teamnewslist">
  4. <ol>
  5.     <li><b>2018 年 08 月 18 日</b>购置腾讯云服务器【标准型 S2】和.cn 域名【uednote.cn】。</li>
  6.     <li><b>2018 年 08 月 16 日</b>本地使用 typecho 博客程序搭建网站成功,并购入 handsome 主题包。</li>
  7.     <li><b>2018 年 07 月 24 日</b>续费 OSS 对象存储。</li>
  8.     <li><b>2018 年 3 月 26 日</b>升级【共享虚拟主机普惠版】到【独享虚拟主机经济版】。</li>
  9.     <li><b>2018 年 3 月 24 日</b>续费.cn 域名【uistudy.cn】</li>
  10.     <li><b>2018 年 1 月 24 日</b>阿里云平台上注册.top 域名【liangzhiquan.top】</li>
  11.     <li><b>2018 年 01 月 07 日</b>续费阿里云【共享虚拟主机普惠版】</li>
  12. </ol>
  13. </div>
  14. /* 注释:2018 时间轴开始*/
  15. /* 注释:2017 时间轴结束*/
  16. <h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2017</a></span></h4>
  17. <div id="teamnewslist">
  18. <ol>
  19.     <li><b>2017 年 12 月 03 日</b>注册.com 域名【liangzq.com】</li>
  20.     <li><b>2017 年 06 月 27 日</b>提交管局审核,通过。备案信息变更成功。</li>
  21.     <li><b>2017 年 05 月 25 日</b>备案信息变更,站点名称改为【行动派】,备案初审通过。</li>
  22.     <li><b>2017 年 05 月 17 日</b>购置 OSS 资源包</li>
  23.     <li><b>2017 年 04 月 02 日</b>注册.com 域名【uitwo.com】。</li>
  24.     <li><b>2017 年 03 月 31 日</b>注册.cn 域名【uistudy.cn】、【iconui.cn】。</li>
  25.     <li><b>2017 年 03 月 14 日</b>购置云解析。</li>
  26.     <li><b>2017 年 03 月 12 日</b>注册.studio 域名【ebike.studio】、.cn 英文域名【bikestyle.cn】。</li>
  27.     <li><b>2017 年 01 月 33 日</b>购置网站木马查杀。</li>
  28.     <li><b>2017 年 01 月 22 日</b>购置【共享虚拟主机普惠版】。</li>
  29. </ol>
  30. </div>
  31. /* 注释:2017 时间轴开始*/
  32. /* 注释:2016 时间轴结束*/
  33. <h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2016</a></span></h4>
  34. <div id="teamnewslist">
  35. <ol>
  36.     <li><b>2016 年 12 月 05 日</b>企业邮箱免费版 0 元续费。</li>
  37.     <li><b>2016 年 01 月 17 日</b>购置 CDN 流量包(建站版)。</li>
  38. </ol>
  39. </div>
  40. /* 注释:2016 时间轴开始*/

 

3、最后,打开你主题根目录的 footer.php 文件,在</body>标签之前,添加下面 JS 代码!

  1. <script>
  2. var number=3; //定义年份的个数,这里定义的是 3 个年份。
  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>

其中,第 2 行代码主要用于定义年份的个数,比如你只创建了一个年份的时间轴,这里就填 1,如果定义了 3 个年份,这里就填 3。

全文完。

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

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

目前评论:53   其中:访客  47   博主  6

    • avatar 熊二 0

      这个时光轴typecho可以使用吗?

        • avatar 简单梁 Admin

          @熊二 wordpress搭建的站点都可以哦,typecho没有测试过。

        • avatar isdola 3

          过来看看具体是怎么实现的

          • avatar isdola 3

            博主,你好!你给我的留言我看到并回复了,由于我的博客暂时还没设置好邮件回复通知的功能,所以你可能无法收到我的回复,怕你错过可能可以解决问题的机会,特意来你博客留言告诉你一下。

              • avatar 简单梁 Admin

                @isdola 好的呢,谢谢你呢。你的解答很有用。我以前是直接媒体库插入图片,没有单独为图片添加链接。可能就是你说的那个原因。

              • avatar 岐山猕猴桃网 1

                学习一下!

                • avatar 岐山猕猴桃网 1

                  评论了,没显示!

                  • avatar 李学江博客 3

                    一直在找

                    • avatar 说丰年 0

                      教程很详细,收藏了

                      • avatar ソ穹ヲ 1

                        带走了

                        • avatar ソ穹ヲ 1

                          又来折腾了

                          • avatar wuyun 1

                            还是隐藏的

                              • avatar Action Admin

                                @wuyun 刷新一下就好,感谢来访。

                              • avatar 发表评论 0

                                发表评论

                                • avatar 七彩云博客 0

                                  试试

                                  • avatar 南遇伯乐 1

                                    学习一下

                                    • avatar 南遇伯乐 1

                                      是我卡了嘛天哪

                                      • avatar zhangjia 0

                                        来取经啦

                                        • avatar 如辉 0

                                          看看

                                          • avatar 塞纳河畔喝咖啡 0

                                            很棒棒

                                            • avatar 塞纳河畔喝咖啡 1

                                              想要

                                              • avatar 塞纳河畔喝咖啡 1

                                                这个插件很不错!!!

                                                • avatar usairaq 0

                                                  简洁明快 试一下

                                                  • avatar 吴廷熙 0

                                                    不错 支持一下

                                                    • avatar 氧气 0

                                                      不错 支持一下

                                                      • avatar 菜贩儿 1

                                                        很喜欢这个风格,看看

                                                        • avatar 菜贩儿 1

                                                          看起来不错

                                                          • avatar small2star 1

                                                            学习一哈

                                                            • avatar small2star 1

                                                              学习一哈 :razz:

                                                              • avatar 菜贩儿 1

                                                                我要代码

                                                                • avatar 小王先森 0

                                                                  不错不错,正需要呢

                                                                  • avatar 阿萨德噶 0

                                                                    过来看看具体是怎么实现的

                                                                    • avatar 市井文盲 1

                                                                      怎么实现

                                                                      • avatar 妍一爸爸 1

                                                                        看看是啥情况

                                                                        • avatar 妍一爸爸 1

                                                                          为什么回复看不到内容

                                                                          • avatar candybox 0

                                                                            谢谢,很实用。

                                                                            • avatar 潇湘公子 0

                                                                              看看怎么样!!!!

                                                                              • avatar 0

                                                                                看看

                                                                                • avatar allony 0

                                                                                  过来看看具体是怎么实现的

                                                                                  • avatar 7758521 1

                                                                                    来测试一下

                                                                                    • avatar Hi闲说 0

                                                                                      哈哈,看看喽

                                                                                      • avatar 7758521 1

                                                                                        感谢呀

                                                                                        • avatar 幼稚的零六 0

                                                                                          这是个好东西

                                                                                          • avatar 国豪 0

                                                                                            看不到啊哦?

                                                                                              • avatar Action Admin

                                                                                                @国豪 现在应该可以了。

                                                                                              • avatar 谢先参Xshinsen 0

                                                                                                评论查看隐藏内容

                                                                                                • avatar 走心 0

                                                                                                  l来看看

                                                                                                  • avatar 无他 0

                                                                                                    看着不错,试一下

                                                                                                    • avatar zyx 1

                                                                                                      不错

                                                                                                      • avatar zyx 1

                                                                                                        主题隐藏有点问题

                                                                                                          • avatar Action Admin

                                                                                                            @zyx 评论审核通过了,刷新就正常显示了。

                                                                                                          • avatar 智方体 0

                                                                                                            感谢分享,学习一下