EMLOG非插件实现时间轴归档的方法

摘要

很多博客程序的模板开发者都设计过时间轴归档的功能，不过EMLOG官方模板里并没有这样的功能，而一些EMLOG模板同样也没有这样的功能，因此博客志今天就来分享一下EMLOG非插件实现时间轴归档的方法。

一、操作步骤

1、复制模板文件page.php，将其重新命名为guidang.php

2、在guidang.php里找到<?php echo $log_content; ?>这串代码，然后在前面添加如下代码

<?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();
?>

3、复制下面的jquery库代码，放置在guidang.php文件最底部

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('.archives').find('ul').hide();
    $('.archives').find('ul:first').show();
    $('.archives h4').click(function(){
        $(this).next('ul').slideToggle("fast");
    })
})
</script>

4、将下面的css样式复制粘贴到公用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:""}

5、打开网站管理界面，依次点击后台 - 页面 - 新建页面 - 填写页面名称为时间轴归档 - 修改页面模板为guidang.php - 发布

6、在浏览器上新建隐身窗口，打开刚刚发布的用户注册页面查看效果

二、原理解析

利用自建模板页面，新增时间轴归档页面

三、注意事项

1、本教程使用在部分模板上可能会出现错位，请根据实际情况调整css样式

标签：emlog教程