好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

jquery实现emlog时间轴归档页面代码

emlog时间轴归档页面可以查看本站的Demo

如何设置呢?


首先保证网站支持jquery,如果不支持,在 header.php文件</head>前添加:

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

然后下载模板的page.php文件,改名为archive.php。


打开 archive.php 文件,注意不能用记事本打开,找到输出内容的一行:

<?php echo $log_content; ?>

在这一行之前添加下面代码:

<script type="text/javascript">
jQuery(function(){
$('.archives').find('ul').hide();
$('.archives').find('ul:first').show();
$('.archives h4').click(function(){
  $(this).next('ul').slideToggle("fast");
});
})
</script>
<?php
function displayRecord(){
	global $CACHE; 
	$record_cache = $CACHE->readCache('record');
	$output = '';
	foreach($record_cache as $value){
		$output .= '<h4>'.$value['record'].'('.$value['lognum'].')</h4>'.displayRecordItem($value['date']).'';
	}
	$output = '<div class="archives">'.$output.'</div>';
	return $output;
}
function displayRecordItem($record){
	if (preg_match("/^([\d]{4})([\d]{2})$/", $record, $match)) {
		$days = getMonthDayNum($match[2], $match[1]);
		$record_stime = emStrtotime($record . '01');
		$record_etime = $record_stime + 3600 * 24 * $days;
	} else {
		$record_stime = emStrtotime($record);
		$record_etime = $record_stime + 3600 * 24;
	}
	$sql = "and date>=$record_stime and date<$record_etime order by top desc ,date desc";
	$result = archiver_db($sql);
	return $result;
}
function archiver_db($condition = ''){
	$DB = MySql::getInstance();
	$sql = "SELECT gid, title, date, views FROM " . DB_PREFIX . "blog WHERE type='blog' and hide='n' $condition";
	$result = $DB->query($sql);
	$output = '';
	while ($row = $DB->fetch_array($result)) {
		$log_url = Url::log($row['gid']);
		$output .= '<li><a href="'.$log_url.'"><span>'.date('Y年m月d日',$row['date']).'</span><div class="atitle">'.$row['title'].'</div></a></li>';
	}
	$output = empty($output) ? '<li>暂无文章</li>' : $output;
	$output = '<ul>'.$output.'</ul>';
	return $output;
}
?>
<?php
if($res['hide'] == 'y' || !function_exists('displayRecord')) emMsg('不存在的页面!');
$show_type == 'sort' ? $log_content .= displaySort() : $log_content .= displayRecord();
?>

保存后,上传archive.php到模板文件夹下。


添加css样式到默认的css文件,例如默认模板的main.css文件里:

.archives ul{overflow:hidden;padding:0px !important;}
.archives-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}
.archives li a{color:#222222;padding:8px 0;display:block;}
.archives li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;list-style:none !important}
.archives li a:hover .atitle:after{background:#cc0000}
.archives li a span{display:inline-block;width:130px;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:"";box-shadow:inset 0px 0px 2px #00cc00;}
.archives{position:relative;padding:10px 0}
.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:126px;content:"";top:0;}
.archives h4{position:relative;margin:10px 0;cursor:pointer;font-size:14px !important;font-weight:bold !important;width:120px}
.archives h4:hover:after{background:#cc0000}
.archives h4:before{position:absolute;left:119px;background:#fff;height:18px;width:18px;border-radius:9px;top:3px;content:"";box-shadow:inset 0px 0px 4px #00cc00;}
.archives h4:after{position:absolute;left:122px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}


完成后,打开网站后台,打开 页面 -> 新建页面, 标题为 归档, 链接别名为 archive , 页面模板改为 archive。

新建页面完成后,在后台打开导航将页面添加到导航合适的位置即可。Demo看本站~

点赞3
 标签: emlog时间轴归档
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸