Directory/Timeline Typecho Custom Template - Now | Now Blog

<trans data-src="## 使用说明">##Instructions</trans> <trans data-src="如果你使用的是 Typecho 默认主题，那么你可以在你博客目录下 `/www/wwwroot/nowtime.cc/usr/themes/default` 新建一个文件名为 `time-line.php`">If you use the default theme of Typecho, you can create a new file named 'time-line.php' in your blog directory '/www/wwwroot/nowtime.cc/usr/themes/default'`</trans> <trans data-src="然后将下述**模板源码**粘贴进去保存">Then paste the following * * template source code * * to save</trans> <trans data-src="> 其它主题可以参照着你主题目录下的 `page.php` 源码来修改我下面写的**模板源码**">>For other themes, please refer to the 'page. php' source code in your theme directory to modify the * * template source code I write below**</trans> <trans data-src="然后去博客后台 -> 管理 -> 独立页面 -> 新增，选择模板">Then go to the blog background ->Management ->Independent page ->Add, and select a template</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2021/07/04/623357964.png">https://cdn.nowtime.cc/2021/07/04/623357964.png</trans> <trans data-src=")">)</trans> <trans data-src="然后“发布页面即可”">Then "just publish the page"</trans> <trans data-src="### 效果预览">###Effect Preview</trans> <trans data-src="https://nowtime.cc/time-line.html">https://nowtime.cc/time-line.html</trans> <trans data-src="!">!</trans> <trans data-src="[">[</trans> <trans data-src="https://nowtime.cc/time-line.html">https://nowtime.cc/time-line.html</trans> <trans data-src="](">](</trans> <trans data-src="https://cdn.nowtime.cc/2021/07/04/3640778185.png">https://cdn.nowtime.cc/2021/07/04/3640778185.png</trans> <trans data-src=")">)</trans> <trans data-src="## 模板源码">##Template source code</trans> <trans data-src="```php">```php</trans> <trans data-src="<?"><?</trans> <trans data-src="php">php</trans> <trans data-src="/**">/**</trans> <trans data-src="* 目录/时间线">*Catalog/Timeline</trans> <trans data-src="*">*</trans> <trans data-src="* @package custom">* @package custom</trans> <trans data-src="*/">*/</trans> <trans data-src="?>">?></trans> <trans data-src="<?"><?</trans> <trans data-src="php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>">php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?></trans> <trans data-src="<?"><?</trans> <trans data-src="php $this->need('header.php'); ?>">php $this->need('header.php'); ?></trans> <trans data-src="<style>"><style></trans> <trans data-src=".time-line li{list-style-type:none}">.time-line li{list-style-type:none}</trans> <trans data-src=".time-line .tl-header{margin:8px;cursor:pointer}">.time-line .tl-header{margin:8px;cursor:pointer}</trans> <trans data-src=".time-line .tl-header:hover{-webkit-filter:brightness(.9)}">.time-line .tl-header:hover{-webkit-filter:brightness(.9)}</trans> <trans data-src=".time-line .tl-header{margin:8px;background-color:#23b7e5;color:#fff;text-align:center;display:inline-block;padding:0 10px;border-radius:8px}">.time-line .tl-header{margin:8px;background-color:#23b7e5;color:#fff;text-align:center;display:inline-block;padding:0 10px;border-radius:8px}</trans> <trans data-src=".time-line .tl-header h2{font-size:14px;line-height:8px}">.time-line .tl-header h2{font-size:14px;line-height:8px}</trans> <trans data-src=".time-line .tl-body{border-left:4px solid #23b7e5;margin-left:52px;min-height:88px;margin-top:-10px;padding-top:1px;margin-bottom:-8px;position:relative;padding-bottom:1px}">.time-line .tl-body{border-left:4px solid #23b7e5;margin-left:52px;min-height:88px;margin-top:-10px;padding-top:1px;margin-bottom:-8px;position:relative;padding-bottom:1px}</trans> <trans data-src=".time-line .tl-body span{position:absolute;left:-60px;top:16px;font-weight:400;font-size:14px;opacity:.7}">.time-line .tl-body span{position:absolute;left:-60px;top:16px;font-weight:400;font-size:14px;opacity:.7}</trans> <trans data-src=".time-line .tl-body li{display:block;position:relative;left:-24px;margin:8px 0}">.time-line .tl-body li{display:block;position:relative;left:-24px;margin:8px 0}</trans> <trans data-src=".time-line .tl-body li:before{position:absolute;content:"";top:22px;left:-22px;width:4px;height:4px;background:#fff;border:2px solid #23b7e5;border-radius:50%;box-shadow:0 0 0 3px #fff}">.time-line .tl-body li:before{position:absolute;content:"";top:22px;left:-22px;width:4px;height:4px;background:#fff;border:2px solid #23b7e5;border-radius:50%;box-shadow:0 0 0 3px #fff}</trans> <trans data-src=".time-line .tl-body li h3{font-size:15px;background-color:#23b7e5;display:inline-block;margin:8px 0;padding:8px 16px;border-radius:4px;font-weight:400;max-width:360px}">.time-line .tl-body li h3{font-size:15px;background-color:#23b7e5;display:inline-block;margin:8px 0;padding:8px 16px;border-radius:4px;font-weight:400;max-width:360px}</trans> <trans data-src=".time-line .tl-body li h3:before{content:"";position:absolute;z-index:-1;left:-8px;border:10px solid transparent;border-right-color:#23b7e5;border-left:0}">.time-line .tl-body li h3:before{content:"";position:absolute;z-index:-1;left:-8px;border:10px solid transparent;border-right-color:#23b7e5;border-left:0}</trans> <trans data-src=".time-line .tl-body li a{text-decoration:none;color:#fff;border-bottom:none;}">.time-line .tl-body li a{text-decoration:none;color:#fff;border-bottom:none;}</trans> <trans data-src=".time-line .tl-body li a:hover{border-bottom: 1px solid #EEE;}">.time-line .tl-body li a:hover{border-bottom: 1px solid #EEE;}</trans> <trans data-src=".tl-header.start{position:relative;left:18px;background:#fff!important;border-color:#dee5e7;border-bottom-color:#d8e1e3;-webkit-box-shadow:0 1px 1px rgba(90,90,90,.1);box-shadow:0 1px 1px rgba(90,90,90,.1);color:#000;padding:0 16px}">.tl-header.start{position:relative;left:18px;background:#fff!important;border-color:#dee5e7;border-bottom-color:#d8e1e3;-webkit-box-shadow:0 1px 1px rgba(90,90,90,.1);box-shadow:0 1px 1px rgba(90,90,90,.1);color:#000;padding:0 16px}</trans> <trans data-src=".tl-header.start>h2{font-weight:500}">.tl-header.start>h2{font-weight:500}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+2),.time-line .tl-header:nth-child(7n+2)+.tl-body h3{background:#fad733}">.time-line .tl-header:nth-child(7n+2),.time-line .tl-header:nth-child(7n+2)+.tl-body h3{background:#fad733}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+2)+.tl-body{border-left:4px solid #fad733}">.time-line .tl-header:nth-child(7n+2)+.tl-body{border-left:4px solid #fad733}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+2)+.tl-body li:before{border-color:#fad733}">.time-line .tl-header:nth-child(7n+2)+.tl-body li:before{border-color:#fad733}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+2)+.tl-body h3:before{border-right-color:#fad733}">.time-line .tl-header:nth-child(7n+2)+.tl-body h3:before{border-right-color:#fad733}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+3),.time-line .tl-header:nth-child(7n+3)+.tl-body h3{background:#27c24c}">.time-line .tl-header:nth-child(7n+3),.time-line .tl-header:nth-child(7n+3)+.tl-body h3{background:#27c24c}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+3)+.tl-body{border-left:4px solid #27c24c}">.time-line .tl-header:nth-child(7n+3)+.tl-body{border-left:4px solid #27c24c}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+3)+.tl-body li:before{border-color:#27c24c}">.time-line .tl-header:nth-child(7n+3)+.tl-body li:before{border-color:#27c24c}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+3)+.tl-body h3:before{border-right-color:#27c24c}">.time-line .tl-header:nth-child(7n+3)+.tl-body h3:before{border-right-color:#27c24c}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+4),.time-line .tl-header:nth-child(7n+4)+.tl-body h3{background:#3a3f51}">.time-line .tl-header:nth-child(7n+4),.time-line .tl-header:nth-child(7n+4)+.tl-body h3{background:#3a3f51}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+4)+.tl-body{border-left:4px solid #3a3f51}">.time-line .tl-header:nth-child(7n+4)+.tl-body{border-left:4px solid #3a3f51}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+4)+.tl-body li:before{border-color:#3a3f51}">.time-line .tl-header:nth-child(7n+4)+.tl-body li:before{border-color:#3a3f51}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+4)+.tl-body h3:before{border-right-color:#3a3f51}">.time-line .tl-header:nth-child(7n+4)+.tl-body h3:before{border-right-color:#3a3f51}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+5),.time-line .tl-header:nth-child(7n+5)+.tl-body h3{background:#1c2b36}">.time-line .tl-header:nth-child(7n+5),.time-line .tl-header:nth-child(7n+5)+.tl-body h3{background:#1c2b36}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+5)+.tl-body{border-left:4px solid #1c2b36}">.time-line .tl-header:nth-child(7n+5)+.tl-body{border-left:4px solid #1c2b36}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+5)+.tl-body li:before{border-color:#1c2b36}">.time-line .tl-header:nth-child(7n+5)+.tl-body li:before{border-color:#1c2b36}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+5)+.tl-body h3:before{border-right-color:#1c2b36}">.time-line .tl-header:nth-child(7n+5)+.tl-body h3:before{border-right-color:#1c2b36}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+6),.time-line .tl-header:nth-child(7n+6)+.tl-body h3{background:#7266ba}">.time-line .tl-header:nth-child(7n+6),.time-line .tl-header:nth-child(7n+6)+.tl-body h3{background:#7266ba}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+6)+.tl-body{border-left:4px solid #7266ba}">.time-line .tl-header:nth-child(7n+6)+.tl-body{border-left:4px solid #7266ba}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+6)+.tl-body li:before{border-color:#7266ba}">.time-line .tl-header:nth-child(7n+6)+.tl-body li:before{border-color:#7266ba}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+6)+.tl-body h3:before{border-right-color:#7266ba}">.time-line .tl-header:nth-child(7n+6)+.tl-body h3:before{border-right-color:#7266ba}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+7),.time-line .tl-header:nth-child(7n+7)+.tl-body h3{background:#f05050}">.time-line .tl-header:nth-child(7n+7),.time-line .tl-header:nth-child(7n+7)+.tl-body h3{background:#f05050}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+7)+.tl-body{border-left:4px solid #f05050}">.time-line .tl-header:nth-child(7n+7)+.tl-body{border-left:4px solid #f05050}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+7)+.tl-body li:before{border-color:#f05050}">.time-line .tl-header:nth-child(7n+7)+.tl-body li:before{border-color:#f05050}</trans> <trans data-src=".time-line .tl-header:nth-child(7n+7)+.tl-body h3:before{border-right-color:#f05050}">.time-line .tl-header:nth-child(7n+7)+.tl-body h3:before{border-right-color:#f05050}</trans> <trans data-src="/*自定义的 CSS 样式*/">/*Custom CSS style*/</trans> <trans data-src=".editormd-html-preview, .editormd-preview-container{min-height: 0!important;padding: 8px;}">.editormd-html-preview, .editormd-preview-container{min-height: 0!important;padding: 8px;}</trans> <trans data-src="</style>"></style></trans> <trans data-src="<div class="col-mb-12 col-8" id="main" role="main">"><div class="col-mb-12 col-8" id="main" role="main"></trans> <trans data-src="<article class="post" itemscope itemtype=""><article class="post" itemscope itemtype="</trans> <trans data-src="http://schema.org/BlogPosting">http://schema.org/BlogPosting</trans> <trans data-src="">">"></trans> <trans data-src="<h1 class="post-title" itemprop="name headline"><a itemprop="url" href="<?php $this->permalink() ?>"><?"><h1 class="post-title" itemprop="name headline"><a itemprop="url" href="<?php $this->permalink() ?>"><?</trans> <trans data-src="php $this->title() ?></">php $this->title() ?></</trans> <trans data-src="a></h1>">a></h1></trans> <trans data-src="<div class="post-content" itemprop="articleBody">"><div class="post-content" itemprop="articleBody"></trans> <trans data-src="<?"><?</trans> <trans data-src="php $this->content(); ?>">php $this->content(); ?></trans> <trans data-src="">Storage Timeline Container --></trans> <trans data-src="<div class="time-line"></div>"><div class="time-line"></div></trans> <trans data-src="</div>"></div></trans> <trans data-src="</article>"></article></trans> <trans data-src="<?"><?</trans> <trans data-src="php $this->need('comments.php'); ?>">php $this->need('comments.php'); ?></trans> <trans data-src="</div>">end #main--></trans> <trans data-src="<?"><?</trans> <trans data-src="php">php</trans> <trans data-src="$this->widget("Widget_Contents_Post_Recent", "pageSize=100000000000000")->to($post);">$this->widget("Widget_Contents_Post_Recent", "pageSize=100000000000000")->to($post);</trans> <trans data-src="$recentPost = array();">$recentPost = array();</trans> <trans data-src="while ($post->next()) {">while ($post->next()) {</trans> <trans data-src="$recentPost[] = array(">$recentPost[] = array(</trans> <trans data-src=""title" => $post->title,">"title" => $post->title,</trans> <trans data-src=""link" => $post->permalink,">"link" => $post->permalink,</trans> <trans data-src=""time" => $post->created,">"time" => $post->created,</trans> <trans data-src=");">);</trans> <trans data-src="}">}</trans> <trans data-src="?>">?></trans> <trans data-src="<script>"><script></trans> <trans data-src="const data = <?">const data = <?</trans> <trans data-src="php echo json_encode($recentPost); ?>">php echo json_encode($recentPost); ?></trans> <trans data-src="//调用函数，渲染“时间线”">//Call function to render the Timeline</trans> <trans data-src="xuanran_time_line(data);">xuanran_time_line(data);</trans> <trans data-src="/**">/**</trans> <trans data-src="* 渲染时间线">*Render Timeline</trans> <trans data-src="* @param data {[]}            需要进行时间线分割的数据">*@ param data {[]} Data to be divided by timeline</trans> <trans data-src="* @param selector string      css 选择器">*@ param selector string css selector</trans> <trans data-src="*/">*/</trans> <trans data-src="function xuanran_time_line(data = [], selector = ".time-line") {">function xuanran_time_line(data = [], selector = ".time-line") {</trans> <trans data-src="let time_line = document.querySelector(selector);">let time_line = document.querySelector(selector);</trans> <trans data-src="let _group_month = group_month(data), html;">let _group_month = group_month(data), html;</trans> <trans data-src="time_line.innerHTML = '';//">time_line.innerHTML = '';//</trans> <trans data-src="清空时间线">Clear Timeline</trans> <trans data-src="for (let item in _group_month) {">for (let item in _group_month) {</trans> <trans data-src="html = '<li class="tl-header">\n' +">html = '<li class="tl-header">\n' +</trans> <trans data-src="'    <h2>' + item + '</h2>\n' +">'    <h2>' + item + '</h2>\n' +</trans> <trans data-src="'</li>' +">'</li>' +</trans> <trans data-src="'<ul class="tl-body">';">'<ul class="tl-body">';</trans> <trans data-src="for (let items in _group_month[item]) {">for (let items in _group_month[item]) {</trans> <trans data-src="ttt = _group_month[item][items];">ttt = _group_month[item][items];</trans> <trans data-src="html += '<li>\n' +">html += '<li>\n' +</trans> <trans data-src="'    <span>' + time_d(ttt["time"]) + '</span>\n' +">'    <span>' + time_d(ttt["time"]) + '</span>\n' +</trans> <trans data-src="'    <h3>\n' +">'    <h3>\n' +</trans> <trans data-src="'        <a href="' + ttt["link"] + '" target="_blank">' + ttt["title"] + '</a>\n' +">'        <a href="' + ttt["link"] + '" target="_blank">' + ttt["title"] + '</a>\n' +</trans> <trans data-src="'    </h3>\n' +">'    </h3>\n' +</trans> <trans data-src="'</li>\n'">'</li>\n'</trans> <trans data-src="}">}</trans> <trans data-src="html += '</ul>';">html += '</ul>';</trans> <trans data-src="time_line.innerHTML += html;">time_line.innerHTML += html;</trans> <trans data-src="}">}</trans> <trans data-src="time_line.innerHTML += '<li class="tl-header start">\n' +">time_line.innerHTML += '<li class="tl-header start">\n' +</trans> <trans data-src="'    <h2>开始</h2>\n' +">'<h2>Start</h2> n'+</trans> <trans data-src="'</li>';">'</li>';</trans> <trans data-src="}">}</trans> <trans data-src="/**">/**</trans> <trans data-src="* 按月份分组">*Group by month</trans> <trans data-src="* @param data {[]}">* @param data {[]}</trans> <trans data-src="* @returns {[]}">* @returns {[]}</trans> <trans data-src="*/">*/</trans> <trans data-src="function group_month(data) {">function group_month(data) {</trans> <trans data-src="let result = [];">let result = [];</trans> <trans data-src="for (let item in data) {">for (let item in data) {</trans> <trans data-src="date = time_ym(data[item]['time']);">date = time_ym(data[item]['time']);</trans> <trans data-src="if (!result[date]) {">if (!result[date]) {</trans> <trans data-src="result[date] = [data[item]];">result[date] = [data[item]];</trans> <trans data-src="} else {">} else {</trans> <trans data-src="result[date].push(data[item]);">result[date].push(data[item]);</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="return result;">return result;</trans> <trans data-src="}">}</trans> <trans data-src="/**">/**</trans> <trans data-src="* 时间戳{秒级} 转 年月">*Time stamp {second level} to month</trans> <trans data-src="* @param dates">* @param dates</trans> <trans data-src="* @returns {string}">* @returns {string}</trans> <trans data-src="*/">*/</trans> <trans data-src="function time_ym(dates) {">function time_ym(dates) {</trans> <trans data-src="let date = new Date(dates * 1000);">let date = new Date(dates * 1000);</trans> <trans data-src="let Y = date.getFullYear() + '年';">Let Y=date. getFullYear()+'year';</trans> <trans data-src="let M = (date.getMonth() + 1 < 10 ? '">let M = (date.getMonth() + 1 < 10 ? '</trans> <trans data-src="0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';">0 '+(date. getMonth()+1): date. getMonth()+1)+' month ';</trans> <trans data-src="return Y + M;">return Y + M;</trans> <trans data-src="}">}</trans> <trans data-src="/**">/**</trans> <trans data-src="* 时间戳{秒级} 转 日">*Time stamp {second level} turns to day</trans> <trans data-src="* @param dates">* @param dates</trans> <trans data-src="* @returns {string}">* @returns {string}</trans> <trans data-src="*/">*/</trans> <trans data-src="function time_d(dates) {">function time_d(dates) {</trans> <trans data-src="let date = new Date(dates * 1000);">let date = new Date(dates * 1000);</trans> <trans data-src="return (date.getDate() < 10 ? '">return (date.getDate() < 10 ? '</trans> <trans data-src="0' + (date.getDate()) : date.getDate()) + '日';">0 '+(date. getDate()): date. getDate())+' day ';</trans> <trans data-src="}">}</trans> <trans data-src="</script>"></script></trans> <trans data-src="<?"><?</trans> <trans data-src="php $this->need('sidebar.php'); ?>">php $this->need('sidebar.php'); ?></trans> <trans data-src="<?"><?</trans> <trans data-src="php $this->need('footer.php'); ?>">php $this->need('footer.php'); ?></trans> <trans data-src="```">```</trans>

Catalog/Timeline Typecho Custom Template

Only one comment

Add a new comment

Latest articles

Recent replies

classification

file

other