【WordPress 教程】年单侧伸缩式时间轴记录网站发展历程

【单侧伸缩式时间轴】

【功能介绍】

实现过程

• 采用自定义列表的方式实现时间轴效果
• 时间轴以年为单位进行分段，每一个“年”为一段

实现功能

• 点击“年份”可以展开或闭合该段内容，默认情况下第一段展开，其余闭合
• 鼠标移动到具体的某一行时，该行内容颜色发生变化，以突出鼠标所在当前行
• 自适应屏幕，在不同屏幕尺寸下实现相同效果

相关说明

• 使用相同主题的童鞋可以直接套用，使用其他主题的童鞋，可能需要对样式做一定的调整
• 我没有对时间轴在后台编辑器的样式做优化，所以在可视化模式下不能实时看到效果，只能看到基本框架结构
• 增删内容时，建议在文本模式下操作

【操作方法】

• 首先：新建一个页面，页面标题自定义，切换到【文本】模式，复制以下代码到编辑器中并发表

<div id="history-time-line">
	<p class="year">年份 1</p>
		<div class="time-line">
			<dl>
				<dt>日期 1</dt>
				<dd>内容 1</dd>
				<dt>日期 2</dt>
				<dd>内容 2</dd>
				<dt>日期 3</dt>
				<dd>内容 3</dd>
			</dl>
		</div>
	<p class="year">年份 2</p>
		<div class="time-line">
			<dl>
				<dt>日期 4</dt>
				<dd>内容 4</dd>
				<dt>日期 5</dt>
				<dd>内容 5</dd>
				<dt>日期 6</dt>
				<dd>内容 6</dd>
			</dl>
		</div>
</div>

代码说明：

• 代码第 2~12 行为一个内容段，也就是一个“年”，这里我放了两个段作参考
• 如果你需要多个段，就复制这部分代码到最后一个</div>的前面即可
• “年份”：可任意输入，长度不限
• “日期”：由于样式的关系需要写成“XX-XX”的格式，否则后面的蓝色小圆点会不在蚂蚁线的中间
• “内容”：可任意输入，长度不限

后台编辑器效果：

然后：打开【style.css】文件，在任意位置（或最后）添加

代码说明：

• 第 49 行的一条代码主要用来适应屏幕宽度不大于 700 时让时间轴整体向左移动
• 第 49 行的第二条代码主要用来当屏幕宽度不大于 700px 时，使蓝色小圆点和蚂蚁线水平居中对齐。

接着：打开【js/script.js】文件，找到代码

// 文字展开
$(".show-more span").click(function(e) {
	$(this).html(["<i class='be be-squareplus'></i>展开", "<i class='be be-squareminus'></i>折叠"][this.hutia ^= 1]);
	$(this.parentNode.parentNode).next().slideToggle();
	e.preventDefault();
});

在其下面添加

//博客历程时间轴展开
$(document).ready(function(){
	(function(){
		$('#history-time-line p.year').each(function(){
			var num=$(this).next().children('dl').children('dt').size();
			var text=$(this).text();
			$(this).html(text+' <span class="year-num">共'+num+'条</span>');
		});
		var $all_time_line=$('#history-time-line .time-line'),
			$first_time_line=$('#history-time-line .time-line:first');
			$all_time_line.hide(1,function(){
			$first_time_line.show();
		});
		$('#history-time-line p.year').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
	})();
});

• 这部分代码用来实现点击“年份”时，该段内容展开/闭合效果。
• 或者可以新建一个JS文件保存代码自定义文件位置，也方便以后主题更新不用去修改代码。