网站添加时光轴记录页面

原创

用户1094633

发布于 2022-02-14 16:38:33

7190

发布于 2022-02-14 16:38:33

文章被收录于专栏：运维随笔运维随笔

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

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

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

教学部分

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

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

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、在编辑页面或者文章的时，切换到源码模式，并按照以下格式编辑内容

Markup

<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>

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

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

Markup

<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 。就行了。

例如：

Markup

<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>复制粘贴，然后修改文字即可！例如：

Markup

<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

JavaScript

<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！