时间轴归档制作

发表于 分类于 Disqus：

当初在筹划建站的时候，无意间发现有人用时间轴的样式做了一个文章归档的页面，顿时觉得十分高大上。于是联系到那位亲几封邮件下来终于也把时间轴归档弄到我的博客来了。

Anyway，先来看看代码吧（以下代码是针对我所使用的Clearision主题修改而来的）

  • footer.php添加引入jquery语句（要在script.js引入前引入）
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  • 修改js\script.js 添加
1
2
3
4
5
6
$('.archives ul.archives-monthlisting').hide();
$('.archives ul.archives-monthlisting:first').show();
$('.archives .m-title').click(function() {
    $(this).next().slideToggle('fast');
    return false;
});
  • 在clearision下参考留言板模版page-comments.php创建page-archives.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php /* Template Name: 文章归档 */
get_header(); ?>
<div id="ctn">
<div id="content">

<?php while ( have_posts() ) : the_post(); ?>

<div class="post_ctn">

	<div class="archives">
		<?php
		$previous_year = $year = 0;
		$previous_month = $month = 0;
		$ul_open = false;
		$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
		foreach($myposts as $post) :
		setup_postdata($post);
		$year = mysql2date('Y', $post->post_date);
		$month = mysql2date('n', $post->post_date);
		$day = mysql2date('j', $post->post_date);
		if($year != $previous_year || $month != $previous_month) :
		if($ul_open == true) :
			echo '</ul>';
		endif;
		echo '<h3 class="m-title">'; echo the_time('Y-m'); echo '</h3>';
		echo '<ul class="archives-monthlisting">';
		$ul_open = true;
		endif;
		$previous_year = $year; $previous_month = $month;
		?>
		<li>
		<a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span>
		<div class="atitle"><?php the_title(); ?></div></a>
		</li>
		<?php endforeach; ?>
		</ul>
	</div>

	<div class="post_t">
	<!--<?php the_content(); ?>-->
	</div>

	</div>

	<?php endwhile; ?>

	</div>
	</div>

	<?php get_sidebar(); ?>
	<?php get_footer(); ?>
  • 修改style.css添加相关效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*归档时间轴*/  
.archives ul{overflow:hidden;padding-left:0px}
.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}
.archives li a{padding:8px 0;display:block;border-bottom:0;}
.archives li a:hover .atitle:after{background:#FF6600}
.archives li a span{display:inline-block;width:100px;font-size:12px;text-indent:20px}
.archives li a .atitle{display:inline-block;padding:0 15px;position:relative;white-space:nowrap;width:calc(100% - 180px)}
.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.archives{position:relative;padding:10px 0}
.archives:before{width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}
.m-title{position:relative;margin:10px 0;cursor:pointer}
.m-title:hover:after{background:#FF0000}
.m-title:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""}
.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}
  • 创建文章归档页面

因为JS的问题，这样的时间轴样式只能在chrome/Firefox内核的浏览器下有折叠的效果，如下图：

chrome

而在IE9及以下的版本，是折叠不了的。

IE9