非插件实现Emlog时间轴归档代码分享

2014-11-21 / 9 评论 / 10019 阅读

文件缓存型时间轴归档,后台更新缓存或者发布新文章的时候会自动更新;本站这个代码是使用缓存系统的,是需要修改内核文件的。慎用!

1、修改include/lib/cache.php文件,添加归档缓存函数

private $logalias_cache;
之后添加
private $loglists_cache;

添加在其他缓存函数位置添加归档缓存

    /*** 文章归档列表缓存 */
    private function mc_loglists() {
        $query = $this->db->query('select gid,title,date from ' . DB_PREFIX . "blog WHERE hide='n' and checked='y' and type='blog' ORDER BY date DESC");
        $loglists_cache = array();
        while ($row = $this->db->fetch_array($query)) {
            $loglists_cache[]= $row;
        }
        $cacheData = serialize($loglists_cache);
        $this->cacheWrite($cacheData, 'loglists');
    }

不懂的朋友只请直接下载本文件覆盖include/lib/cache.php(请做好备份)cache.zip

博客开通时间过长的话,可能后面发布的文章会显示不出来,可自定义时间:AND date > $time - 3365246060(这个代码表示显示最近3年的文章)

2、此方法因不同的模板修改的有所差异,本站讲述以默认模板为例,首先复制模板目录下的page.php并重新命名为guidang.php(ps:这个自己可自行修改),把其中的<?php echo $log_content; ?>更改为如下代码即可

<div class="guidang">
<?php
global $CACHE; 
$loglists_cache = $CACHE->readCache('loglists');
$year_month = 0;
foreach($loglists_cache as $value):
if($year_month != 0&&$year_month != date("Y-m",$value['date'])){
echo '</ul>';}
if($year_month != date("Y-m",$value['date'])){
$year_month = date("Y-m",$value['date']);
echo '<h2 class="guidang-tt">'.$year_month.'</h3><ul>';}
?>
<li><a href="<?php echo Url::log($value['gid']);?>" target="_blank" title="<?php echo $value['title']; ?>"><span><?php echo date("Y-m-d",$value['date']);?></span><div class="atitle"><?php echo $value['title'];?></div></a></li>
<?php endforeach;?></div>

css文件如下

.guidang h2{font-size:150%;}
.guidang li a{padding:8px 0;display:block}
.guidang li a:hover .atitle:after{background:#ff5c43}
.guidang li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px}
.guidang li a .atitle{display: inline-block;padding:0 15px;position:relative;width:550px;white-space:nowrap;text-overflow:ellipsis;}
.guidang li a .atitle:after{position:absolute;left:-2px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.guidang li a .atitle:before{position:absolute;left:-4px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.guidang{margin:10px;position:relative;padding:10px 0}
.guidang:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}
.guidang-tt{position:relative;margin:10px 0;cursor:pointer}    
.guidang-tt:hover:after{background:#ff5c43}
.guidang-tt:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""}
.guidang-tt:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}

然后建立一个页面,在页面模板处填写 guidang 即可,演示地址:http://www.shuyong.net/guidang.html

    1. 头像
      山山而川
      第5楼
      踩踩
      回复
    1. 头像
      小杰
      第4楼
      其实,我建议弄成鼠标触碰打开时间轴,一个个点有点不灵活吧
      回复
    1. 头像
      唐瑞
      地板
      谢谢,我可以了
      回复
    1. 头像
      唐瑞
      板凳
      好像没用啊
      回复
      1. 头像
        舍力
        @唐瑞:演示地址都有了,怎么可能没用呢?仔细检测一下自己弄的。可能那里弄错了吧
        回复
      1. 头像
        唐瑞
        @舍力:好的,我再去试试看看
        回复
    1. 头像
      唯一度博客
      沙发
      如果有收缩功能会更好一点
      回复
      1. 头像
        舍力
        @唯一度博客:这个css应该就可以搞定的,可以捣鼓一下的。。。
        回复
      1. 头像
        唯一度博客
        @舍力:我是菜鸟
        回复