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

【效果展示】

【功能介绍】

实现过程

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

实现功能

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

相关说明

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

【操作方法】

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

• 代码第 2~14 行为一个内容段，也就是一个“年”，这里我放了两个段作参考
• 如果你需要多个段，就复制这部分代码到最后一个</div>的前面即可
• 代码第 4~8 行为一个内容段，也就是一个“月”，这里我放了两个段作参考
• 如果你需要多个段，就复制这部分代码到“年段”最后一个</ul>的前面即可
• 代码第 6 行为内容段，复制整段到“月段”最后一个</ul>的前面即可
• “年份”：可任意输入，长度不限
• “日期”：可任意输入，长度不限
• “内容”：可任意输入，长度不限

后台编辑器效果：

然后：打开【style.css】文件，在任意位置（或最后）添加 Begin主题可添加定制风格内。

style.css代码：

.year {
	font-size: 16px;
	margin: 10px -21px 10px -21px;
	padding: 0 20px;
	border-bottom: 1px solid #ebebeb;
	border-left: 5px solid #0088cc;
}
.mon {
	color: #000;
	line-height: 30px; 
	margin: 5px 0 5px 5px;
	cursor: pointer;
}
.post_list li {
	line-height: 30px;
	text-indent: 2em;
}
.post_list {
	color: #999;
	margin: 0 0 10px 0;
}
.mon-num {
	color: #999;
	margin: 0 0 0 10px;
}

接着：新建一个JS文件保存代码自定义文件位置，也方便以后主题更新不用去修改代码。

//博客历程时间轴展开
$(document).ready(function(){
    (function(){
		$('#all_archives span.mon').each(function(){
			var num=$(this).next().children('li').size();
			var text=$(this).text();
			$(this).html(text+' <span class="mon-num">'+num+' 条</span>');
		});
		var $al_post_list=$('#all_archives ul.post_list'),
			$al_post_list_f=$('#all_archives ul.post_list:first');
		$al_post_list.hide(1,function(){
			$al_post_list_f.show();
		});
		$('#all_archives span.mon').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
    })();
 });

• 这部分代码用来实现点击“月份”时，该段内容展开/闭合效果。
• 也可以在编辑时加载代码如下

//博客历程时间轴展开 
<script type="text/javascript">
$(document).ready(function(){
    (function(){
		$('#all_archives span.mon').each(function(){
			var num=$(this).next().children('li').size();
			var text=$(this).text();
			$(this).html(text+' <span class="mon-num">'+num+' 篇</span>');
		});
		var $al_post_list=$('#all_archives ul.post_list'),
			$al_post_list_f=$('#all_archives ul.post_list:first');
		$al_post_list.hide(1,function(){
			$al_post_list_f.show();
		});
		$('#all_archives span.mon').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
    })();
 });
</script>