!
也想出现在这里? 联系我们
广告位

个人网站如何添加添加时光轴记录页面

很多人自己搭建了独立博客个人网站,都会有一个关于我们或者时光轴页面,专门用来记录折腾博客的一些事件。一直想折腾一个发现搞不来或者都不好看,所以折腾了下如下效果

个人网站如何添加添加时光轴记录页面

在浏览boke112网站的时候发现有一篇关于折腾时光轴记录的文章:http://boke112.com/2964.html   博主提供的方法很简单,就是一段代码加上一段CSS,时光轴的效果就这样诞生了

参考https://www.wangwenwu.com/1598.html 感谢作者提供思路

教学部分

以Zblog博客为例进行说明(其他开发的网站添加方法差不多一样)

1、首先在我们使用网站style.css文件中添加如下样式代码

/* 站点动态时间轴 */
#timelist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}
#timelist b{font-size: 12px;font-weight: normal;color: #d11a1a;display: block;position: relative;margin-bottom:5px;}
#timelist 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)}
#timelist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#timelist li:hover{color: #555;}
#timelist li:hover b::after{border-color: #C01E22;}
#timelist li:hover b{color: #C01E22;}
#timelist{padding-left:33px;}
#time dd{margin:0;padding:0;}
#time dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
#time dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}
#time dt a:hover{color: #FF0000;}

2、在编辑页面或者文章的时,切换到源码模式,并按照以下格式编辑内容

<div id="time">
<!--这是第一个年份开始,用的时候删除这句话!-->
<dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><b>2022</b></dt>
    <dd id=LM1>
        <div id="timelist">
        <ol>
            <li><b>2022年xx月xx日</b>.........</li>
		<li><b>2022年xx月xx日</b>.........</li>
        <ol>
   </div>
   </dd>
<!--这是第一个年份结束,用的时候删除这句话!-->
<!--这是第二个年份开始,用的时候删除这句话!-->
<dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><b>2021</b></dt>
    <dd id=LM2 style="DISPLAY: none">
        <div id="timelist">
        <ol>
           <li><b>2021年xx月xx日</b>.........</li>
           <li><b>2021年xx月xx日</b>.........</li>
        </ol>
        </div>
    </dd>
<!--这是第二个年份结束,用的时候删除这句话!-->
</div>

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

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

<dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><b>2022</b></dt>
<dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><b>2021</b></dt>

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

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

例如:

<dt onClick=javascript:ShowFLT(3) href="javascript:void(null)"><a href="javascript:;">2019</a></dt>
         <dd id=LM3>
  <div id="teamnewslist">
    <ol>
    <li><b>2019年xx月xx日</b>.........</li>
   </ol>
   </div>
</dd>

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

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

<li><b>2022年xx月xx日</b>第一条</li>
<li><b>2022年xx月xx日</b>第二条</li>
<li><b>2022年xx月xx日</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!

具体效果演示

个人网站如何添加添加时光轴记录页面

以上是站长整合修改。如有不对,欢迎指正,谢谢

给TA打赏
共{{data.count}}人
人已打赏
CMS教程WordPress教程

wordpress 将数组数据包装成一个函数在前端使用

2025-4-3 16:25:46

CMS教程

网站页面顶部加载中进度条图文教程

2025-4-10 13:53:22

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索