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

孤狼
171
文章
94
评论
2019年6月17日19:37:22 9 11,448 2687字阅读8分57秒

【效果展示】

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>
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 本文由 发表于 2019年6月17日19:37:22
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

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

评论:9   其中:访客  9   博主  0
    • 相会先生 相会先生

      白日依山尽,黄河入海流。欲穷千里目,更上一层楼。—-【登鹳鹊楼(唐王之涣)】

      • 454255388 454255388

        会当凌绝顶,一览众山小—-【唐·杜甫·望岳】

        • REGAN REGAN

          白发三千丈,缘愁似个长。不知明镜里,何处得秋霜。—-【秋浦歌(唐李白)】

          • 子熙 子熙

            小楼一夜听风雨,深巷明朝卖杏花—-【宋·陆游·临安春雨初霁】

            • 冰-Mango 冰-Mango

              目前推荐网吧使用的路由器有:锐捷、维盟、免费版爱快。

              • 544 544

                如果你的附近的竞争对手没有包时这种计费模式,建议你不要轻易开启这种计费模式。

                • 小冷漠‰ 小冷漠‰

                  勇者愤怒,抽刃向更强者;怯者愤怒,却抽刃向更弱者。— 鲁迅

                  • 南旭 南旭

                    事情总是突然的,而理由总是事后加上去的。— 岸本齐史《火影忍者》

                    • 瓶子 瓶子

                      成事不说,遂事不谏,既往不咎。— 孔子