标签时间线下的文章

## 使用说明

如果你使用的是 Typecho 默认主题，那么你可以在你博客目录下 `/www/wwwroot/nowtime.cc/usr/themes/default` 新建一个文件名为 `time-line.php`

然后将下述**模板源码**粘贴进去保存

> 其它主题可以参照着你主题目录下的 `page.php` 源码来修改我下面写的**模板源码**

然后去博客后台 -> 管理 -> 独立页面 -> 新增，选择模板

![](https://cdn.nowtime.cc/2021/07/04/623357964.png)

然后“发布页面即可”

### 效果预览

https://nowtime.cc/time-line.html

![https://nowtime.cc/time-line.html](https://cdn.nowtime.cc/2021/07/04/3640778185.png)

## 模板源码

```php
<?php
/**
 * 目录/时间线
 *
 * @package custom
 */
?>

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>

/*自定义的 CSS 样式*/
    .editormd-html-preview, .editormd-preview-container{min-height: 0!important;padding: 8px;}
</style>

<div class="col-mb-12 col-8" id="main" role="main">
    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
        <h1 class="post-title" itemprop="name headline"><a itemprop="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
        <div class="post-content" itemprop="articleBody">
            <?php $this->content(); ?>
            
            <div class="time-line"></div>
        </div>
    </article>
    <?php $this->need('comments.php'); ?>
</div>

<?php
$this->widget("Widget_Contents_Post_Recent", "pageSize=100000000000000")->to($post);
$recentPost = array();
while ($post->next()) {
    $recentPost[] = array(
        "title" => $post->title,
        "link" => $post->permalink,
        "time" => $post->created,
    );
}
?>

//调用函数，渲染“时间线”
    xuanran_time_line(data);

/**
     * 渲染时间线
     * @param data {[]}            需要进行时间线分割的数据
     * @param selector string      css 选择器
     */
    function xuanran_time_line(data = [], selector = ".time-line") {
        let time_line = document.querySelector(selector);
        let _group_month = group_month(data), html;

time_line.innerHTML = '';//清空时间线
        for (let item in _group_month) {
            html = '<li class="tl-header">\n' +
                '    <h2>' + item + '</h2>\n' +
                '</li>' +
                '<ul class="tl-body">';

for (let items in _group_month[item]) {
                ttt = _group_month[item][items];
                html += '<li>\n' +
                    '    <span>' + time_d(ttt["time"]) + '</span>\n' +
                    '    <h3>\n' +
                    '        <a href="' + ttt["link"] + '" target="_blank">' + ttt["title"] + '</a>\n' +
                    '    </h3>\n' +
                    '</li>\n'
            }
            html += '</ul>';

time_line.innerHTML += html;
        }
        time_line.innerHTML += '<li class="tl-header start">\n' +
            '    <h2>开始</h2>\n' +
            '</li>';
    }

/**
     * 按月份分组
     * @param data {[]}
     * @returns {[]}
     */
    function group_month(data) {
        let result = [];

for (let item in data) {
            date = time_ym(data[item]['time']);

if (!result[date]) {
                result[date] = [data[item]];
            } else {
                result[date].push(data[item]);
            }
        }

return result;
    }

/**
     * 时间戳{秒级} 转 年月
     * @param dates
     * @returns {string}
     */
    function time_ym(dates) {
        let date = new Date(dates * 1000);

let Y = date.getFullYear() + '年';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';

return Y + M;
    }

/**
     * 时间戳{秒级} 转 日
     * @param dates
     * @returns {string}
     */
    function time_d(dates) {
        let date = new Date(dates * 1000);
        return (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '日';
    }
</script>

<?php $this->need('sidebar.php'); ?>
<?php $this->need('footer.php'); ?>

```

目录/时间线 Typecho 自定义模板

纯 CSS 实现的时间线，也支持使用 JavaScript 动态生成

最新文章

最近回复

分类

归档

其它