Typecho 仿简书主题 时间轴归档页实现
时间:2022-07-24
本文章向大家介绍Typecho 仿简书主题 时间轴归档页实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天博友找到一个好的时间轴实现文档,我拿过来改了改,变成了自己的。
根据文档提供的示例代码如下:
<meta charset="utf-8">
<title>说说</title>
<link rel="stylesheet" href="https://img.aihoom.com/shuoshuo.css" type="text/css">
<!--<style type="text/css">
</style>-->
<ul class="cbp_tmtimeline">
<li> <time class="cbp_tmtime"> <span>2018-09-11</span></time>
<div class="cbp_tmlabel">
<p>截止 2018-09-11 号。总更新文章 229 篇,获得 511 条评论</p>
</div> </li>
<li> <time class="cbp_tmtime"> <span>2018-08-30</span></time>
<div class="cbp_tmlabel">
<p>博客 1年183天了</p>
</div> </li>
<li> <time class="cbp_tmtime"> <span>2018-05-06</span></time>
<div class="cbp_tmlabel">
<p>数据丢失了100多篇,有点心疼</p>
</div> </li>
</ul>
而我的归档页面数据封装在Textends
插件里,没法直接改主题代码实现。所以我找到了插件对应的代码,进行了修改。
修改如下:
- 首先,找到
Textends
插件的Plugin.php
文件,找到下面代码:
public static function archives($options=null){
$options = new Typecho_Config($options);
$options->setDefault(array(
'desc'=>true ,'wrapClass'=>'archives', 'monthClass'=>'archive-month', 'monthTitle'=>'Y年m月', 'monthTitleTag'=>'h2', 'listTag'=>'ul', 'listClass'=>'archive-list',
'dateFormat'=>'Y-m-d H:i:s', 'listFormat'=>'<li>{day}日<a href="{permalink}">{title}</a></li>', 'output'=>true
));
- 将上面代码改成下面这样:
public static function archives($options=null){
$options = new Typecho_Config($options);
$options->setDefault(array(
'desc'=>true ,'wrapClass'=>'archives', 'monthClass'=>'archive-month', 'monthTitle'=>'Y年m月', 'monthTitleTag'=>'h2', 'listTag'=>'ul', 'listClass'=>'archive-list',
'dateFormat'=>'Y-m-d H:i:s', 'listFormat'=>'<li><time class="cbp_tmtime"> <span>{day}日</span></time> <div class="cbp_tmlabel"> <a href="{permalink}">{title}</a></div></li>', 'output'=>true
));
实际修改部分为:'<li><time class="cbp_tmtime"> <span>{day}日</span></time> <div class="cbp_tmlabel"> <a href="{permalink}">{title}</a></div></li>'
主要是给日期和标题外面包装了两个class,以便适用文档里提供的class。
根据它的class,我做了一些修改
主要修改点:
- 全局替换
.cbp_tmtimeline
为.archive-list
- 添加样式:
.archive-list > li .cbp_tmlabel a {color: #fff;}
- 在样式:
.archive-list > li .cbp_tmlabel
{里添加display: inline-block;
最后记得在header.php
里面把archives.css
链接进来。
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/archives.css'); ?>">
好啦,完成了。
祝你成功!!!
参考文档:时间轴实现文档
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 理解DOM Diff算法
- 腾讯云ES集群通过COS实现跨地域备份与恢复
- Thymeleaf一篇就够了
- python scipy.stats实现各种常见的统计分布
- 操作系统基础 - 文件系统
- Linux升级OpenSSH修复高危漏洞
- Pytest之收集用例及命令行参数
- CVE-2020-14645:Weblogic远程代码执行复现
- 从0到1开发测试平台(七)后端服务添加swagger第三方类库
- leetcode - 分割数组的最大值
- leetcode - 除数博弈
- leetcode - 最小路径和
- Javascript中的数据类型
- JAVA 应用日志最佳实践
- 用pageadmin cms系统进行网站制作的经验总结