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

2019年6月17日19:37:22 评论 2,769

【效果展示】

2019 年

2018 年

【功能介绍】

实现过程

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

实现功能

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

相关说明

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

【操作方法】

  • 首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
此处为隐藏的内容!
发表评论并刷新,方可查看

代码说明:

  • 代码第 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>

发表评论

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