略略略，不想写，看GK主题演示
截图
更新日志
2025.8.8更新如下
新增：毛的没用
新增：联系方式（快手，QQ跳转没成功）
新增：文章阅读量
新增：搜索栏
新增：白天/夜间模式
新增：音乐歌单播放器
框架:三栏主题
略略略，不想写，看GK主题演示
2025.8.8更新如下
新增：毛的没用
新增：联系方式（快手，QQ跳转没成功）
新增：文章阅读量
新增：搜索栏
新增：白天/夜间模式
新增：音乐歌单播放器
框架:三栏主题
这里是4个完全独立Typecho插件，分别是博客订阅插件BlogSubscribe、友情链接插件LinkShow、游戏记录插件GameRecord、影视记录插件MovieRecord，每个插件都拥有不一样的效果，具体看功能区，插件可能与你的其他插件不共存，但你放心，我的这4个是共存，理论上是想放那里放那里。
通过在插件后台输入订阅地址，通过短代码调用
在你需要放的位置使用[小归客blog_subscribe]在文章或者页面内填写logo、名称、地址、介绍使用。
[小归客linkshow]
[小归客link logo="图片地址" name="网站名称" nickname="网站昵称" url="链接地址" intro="网站介绍"]
[小归客link logo="图片地址2" name="网站名称2" nickname="网站昵称2" url="链接地址2" intro="网站介绍2"]
[小归客/linkshow]
其中，nickname="网站昵称2"可以删除使用非必用在文章或者页面填写logo、角色名、时间使用。
[小归客game logo="图标地址" name="游戏名称" nickname="游戏昵称" time="游戏时间"]在文章或者页面填写封面、名称、链接使用。
[小归客movie img="https://img1.baidu.com/it/u=3042287271,1241422176&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=701" name="仙逆" url="https://example.com/movie1"]注：复制粘性使用时去掉“小归客”，其实，完全不用复制，因为插件内写了使用说明了。嘻嘻嘻嘻……
①.Typecho博客订阅插件BlogSubscribe.tar.gz
②.Typecho插件友链LinkShow.tar.gz
③.Typecho游戏记录插件.tar.gz
④.Typecho影视插件MovieRecord.tar.gz
插件运行在php7.4、Typecho1.2.1版本上没有问题。部分主题可能不兼容。
如果你同时使用了Typecho短代码插件MyShortcodes可能是不兼容的。
]]>
下载:Typecho短代码插件MyShortcodes.tar.gz非常不错的插件。
[timeline]
[timeline-item title="2023年" date="1月"]项目启动，完成需求分析[/timeline-item]
[timeline-item title="2023年" date="6月"]开发阶段，完成核心功能[/timeline-item]
[timeline-item title="2023年" date="12月"]项目上线，开始运营[/timeline-item]
[/timeline]
[process]
[process-step title="需求分析" icon="fa fa-search"]收集并分析用户需求[/process-step]
[process-step title="设计阶段" icon="fa fa-pencil"]完成UI和UX设计[/process-step]
[process-step title="开发阶段" icon="fa fa-code"]实现功能开发[/process-step]
[process-step title="测试上线" icon="fa fa-rocket">进行测试并正式上线[/process-step]
[/process]
[tooltip text="这是一个提示" position="top"]悬停我[/tooltip]
[accordion]
[accordion-item title="常见问题1"]这是第一个问题的答案内容[/accordion-item]
[accordion-item title="常见问题2"]这是第二个问题的答案内容[/accordion-item]
[accordion-item title="常见问题3">这是第三个问题的答案内容[/accordion-item]
[/accordion]
[progress percent="75" color="blue">项目完成度[/progress]
[icon name="fa fa-home" size="2x" color="red"]首页图标[/icon]
[spoiler title="点击查看答案"]
这是隐藏的答案内容，需要点击才能查看。
[/spoiler]
[tabs]
[tab title="选项1"]这里是第一个选项卡的内容。[/tab]
[tab title="选项2"]这里是第二个选项卡的内容，可以放任何东西。[/tab]
[tab title="选项3"]这里是第三个选项卡的内容。[/tab]
[tab title="选项4"]这里是第四个选项卡的内容。[/tab]
[/tabs]
[alert type="success"]恭喜你，操作成功！[/alert]
[alert type="warning"]这是一个警告信息，请注意。[/alert]
[button url="https://www.example.com" color="green" size="large" blank="true"]点击访问示例网站[/button]
[column width="1/2"]
这是第一栏的内容。
[/column]
[column width="1/2"]
这是第二栏的内容。
[/column]
好像绝大多数主题都是适配的。。
下载上面的文件>安装后，复制下方短代码到你编辑中保存就可以了。
<!-- 时间线示例 -->
[timeline@]
[timeline-item title="2023年" date="1月"]项目启动，完成需求分析[/timeline-item]
[timeline-item title="2023年" date="6月"]开发阶段，完成核心功能[/timeline-item]
[timeline-item title="2023年" date="12月"]项目上线，开始运营[/timeline-item]
[/timeline@]
<!-- 流程图示例 -->
[process@]
[process-step title="需求分析" icon="fa fa-search"]收集并分析用户需求[/process-step]
[process-step title="设计阶段" icon="fa fa-pencil"]完成UI和UX设计[/process-step]
[process-step title="开发阶段" icon="fa fa-code"]实现功能开发[/process-step]
[process-step title="测试上线" icon="fa fa-rocket">进行测试并正式上线[/process-step]
[/process@]
<!-- 提示框示例 -->
[@tooltip text="这是一个提示" position="top"]悬停我[/tooltip@]
<!-- 手风琴示例 -->
[@accordion]
[accordion-item title="常见问题1"]这是第一个问题的答案内容[/accordion-item]
[accordion-item title="常见问题2"]这是第二个问题的答案内容[/accordion-item]
[accordion-item title="常见问题3">这是第三个问题的答案内容[/accordion-item]
[/accordion@]
<!-- 进度条示例 -->
[@progress percent="75" color="blue">项目完成度[/progress@]
<!-- 图标示例 -->
[@icon name="fa fa-home" size="2x" color="red"]首页图标[/icon@]
<!-- 剧透内容示例 -->
[@spoiler title="点击查看答案"]
这是隐藏的答案内容，需要点击才能查看。
[/spoiler@]
[tabs@]
[tab title="选项卡1"]这里是第一个选项卡的内容。[/tab]
[tab title="选项卡2"]这里是第二个选项卡的内容，可以放任何东西。[/tab]
[tab title="选项卡3"]这里是第三个选项卡的内容。[/tab]
[tab title="选项卡4"]这里是第四个选项卡的内容。[/tab]
[/tabs@]
[@alert type="success"]恭喜你，操作成功！[/alert]
[@alert type="warning"]这是一个警告信息，请注意。[/alert@]
[@button url="https://www.example.com" color="green" size="large" blank="true"]点击访问示例网站[/button@]
[@column width="1/2"]
这是第一栏的内容。
[/column@]
[column width="1/2"]
这是第二栏的内容。
[/column@]
<!-- 注意：分栏后最好加一个 <div class="clearfix"></div> 来清除浮动，以防布局错乱 -->
<div class="clearfix"></div>复制粘贴时，去掉@字符。
]]>filter属性是 CSS 中用于对元素应用图形效果（如模糊、阴影、颜色调整等）的属性。它就像一个 “视觉特效师”，能让普通的图片、文字、按钮瞬间变得与众不同。filter属性的值是一个或多个滤镜函数的组合，每个滤镜函数都对应一种特定的效果。filter属性的基本语法如下：
.element {
filter: filter-function();
}例如，我们要为一个图片添加模糊效果，可以这样写：
img {
filter: blur(3px);
}这里的blur()就是一个滤镜函数，3px表示模糊的程度，数值越大，模糊效果越明显。
2.1 模糊效果：blur()blur()函数用于给元素添加模糊效果，常被用于背景图片的虚化处理，营造出朦胧的美感，或是在鼠标悬停时，为元素添加动态的模糊过渡效果。
img {
filter: blur(3px);
transition: filter .5s ease-in-out;
}
img:hover {
filter: blur(1px);
}这个例子则展示了通过过渡动画，让图片在鼠标悬停时平滑地产生模糊变化，增加交互趣味性。
2.2 阴影效果：drop-shadow()
drop-shadow()函数可以为元素添加阴影，与box-shadow属性类似，但drop-shadow()更专注于模拟投影效果，且能更好地与滤镜链中的其他效果结合使用。
/* 为卡片添加投影 */
.card {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}上述代码中，0表示水平偏移量，4px表示垂直偏移量，8px是模糊半径，rgba(0, 0, 0, 0.8)则定义了阴影的颜色和透明度。通过调整这些参数，就能轻松打造出不同风格的阴影效果。
2.3 亮度调整：brightness()brightness()函数用于调整元素的亮度，可以让图片或元素变得更亮或更暗，数值范围是0%（全黑）到200%（两倍亮度），默认值为100%。
/* 降低图片亮度 */
.dim-image {
filter: brightness(70%);
}
/* 鼠标悬停时，图片变亮 */
.highlight-image {
transition: filter 0.3s ease;
}
.highlight-image:hover {
filter: brightness(120%);
}利用brightness()函数，我们可以实现图片在不同状态下的亮度变化，例如在图片列表中，让鼠标悬停的图片变亮，突出显示重点内容。
2.4 对比度调整：contrast()contrast()函数用于调整元素的对比度，数值范围同样是0%（完全没有对比度）到200%（两倍对比度），默认值为100%。提高对比度可以让元素的颜色更加鲜明，降低对比度则能营造出柔和的视觉效果。
/* 增加文字对比度 */
.strong-contrast-text {
filter: contrast(400%);
}
/* 降低图片对比度 */
.soft-image {
filter: contrast(50%);
}2.5 色彩反转：invert()
invert()函数可以反转元素的颜色，将黑色变为白色，白色变为黑色，其他颜色也会相应地进行反转。它常用于创造有趣的视觉反差，或是制作具有科幻感、未来感的页面效果。
img {
transition: filter 0.3s ease;
}
img:hover {
filter: invert(100%);
}虽然filter属性在现代浏览器中得到了广泛支持，但在一些老旧浏览器（如 IE 系列）中可能存在兼容性问题。为了确保网页在各种浏览器中都能正常显示，可以使用 CSS 特性查询（@supports）来提供回退方案：
.element {
/* 不支持filter时的样式 */
background-color: #ccc;
}
@supports (filter: blur(0)) {
.element {
/* 支持filter时的样式 */
filter: blur(3px);
background-color: transparent;
}
}转自:前端老鹰
]]>
//内置友链，参数为内容，字符串形式。
function xm_yl($content){
if (strpos($content, '{link') !== false) {
$content = preg_replace_callback('/{link title="(.+?)"}(.+?){\/link}/', function ($match){
$nr = str_replace(['<br>', '<p>', '</p>'], '', $match[2]);
$content = '<div class="link_body"><div class="link_title">'.$match[1].'</div>'.$nr.'</div>';
return $content;
}, $content);
}
if (strpos($content, '{linka') !== false) {
$content = preg_replace('/{linka url="(.+?)"}(.+?){\/linka img="(.+?)"}/','<a href="\\1" target="_blank"><div class="link_body_list"><div class="link_body_img"><img class="lazyload" data-src="\\3" src="//520917.xyz/app/app/view/xmuix/public/img/jz.jpg"></div><div class="link_body_name">\\2</div></div></a>', $content);
}
return $content;
}第二步在相关要实现友链的文件中添加以下代码。
<!--?php echo xm_yl($this--->content);?>
第三步在内容中添加友链ubb代码即可
{link title="分类标题"}
{linka url="url地址"}名称{/linka img="图片"}
{/link}转自:寻梦博客
]]>1.新建文件api.php
<?php
// 使用__DIR__常量获取当前脚本所在目录，并拼接文件路径
$filename = __DIR__. '/img.txt';
if (!file_exists($filename)) {
die('文件不存在');
}
// 打开文件并检查是否成功
$fs = fopen($filename, "r");
if (!$fs) {
die('无法打开文件');
}
// 从文本获取链接
$pics = [];
while (!feof($fs)) {
$line = trim(fgets($fs));
if ($line!== '') {
array_push($pics, $line);
}
}
fclose($fs);
// 从数组随机获取链接
$pic = $pics[array_rand($pics)];
// 获取type参数
$type = isset($_GET['type'])? $_GET['type'] : '';
switch ($type) {
// JSON返回
case 'json':
header('Content - type:text/json');
die(json_encode(['pic' => $pic]));
default:
// 验证链接是否合法
if (!filter_var($pic, FILTER_VALIDATE_URL)) {
die('无效的图片链接');
}
die(header("Location: $pic"));
}2.新建文件img.txt
http://example.com/image1.jpg
http://example.com/image2.jpg
http://example.com/image3.jpg访问你的网址/api.php访问就可以实现了，api.php和 img.txt 理想存放目录是在同一目录下。
如果将img.txt放于特定目录。此时，需在api.php中修改$filename变量指定完整路径，如：
$filename = '/var/www/wwwroot/data/img.txt';
<?php
$img_array = glob("images/*.{gif,jpg,png}", GLOB_BRACE);
if (!empty($img_array)) {
$img = array_rand($img_array);
$dz = $img_array[$img];
header("Location: " . $dz);
exit; // 重定向后终止脚本执行
} else {
echo "没有找到符合条件的图片文件。";
}
?>图片丢到images文件夹下，访问api.php即可
来源:白衣博客
]]>在 index.php 的 $this->title(); 前面加上 $this->sticky();例如下面这段代码
<h2 class="title"><a href="<?php $this->permalink() ?>"><?php $this->sticky(); $this->title() ?></a></h2>
//其实就是这个
<?php $this->sticky(); $this->title() ?>在主题的 functions.php 文件中添加代码，创建一个新的后台设置选项来存储置顶文章的 cid
// 在主题的 functions.php 文件中
$stickyCids = new Typecho_Widget_Helper_Form_Element_Text('stickyCids', NULL, NULL, _t('置顶文章CID'), _t('在这里填入置顶文章CID,支持多填，用英文逗号隔开'));
$form->addInput($stickyCids);
$stickyCids->setAttribute('class', 'j-setting-content j-setting-global'); <?php
$stickyCids = $this->options->stickyCids;
if ($stickyCids) {
// 用英文逗号分割
$sticky_cids = explode(',', $stickyCids);
// 去除每个元素的空格并过滤掉空元素
$sticky_cids = array_filter(array_map('trim', $sticky_cids), 'trim');
$sticky_html = "<span style='color:red'>[置顶] </span>";
$db = Typecho_Db::get();
$pageSize = $this->options->pageSize;
$select1 = $this->select()->where('type =?', 'post');
$select2 = $this->select()->where('type =? && status =? && created <?', 'post', 'publish', time());
$this->row = [];
$this->stack = [];
$this->length = 0;
$order = '';
$stickyCidMap = [];
$whereClauses = [];
$whereParams = [];
foreach ($sticky_cids as $i => $cid) {
$whereClauses[] = 'cid =?';
$whereParams[] = $cid;
$order.= " when ". $cid. " then ". $i;
$select2->where('table.contents.cid!=?', $cid);
$stickyCidMap[$cid] = $i;
}
if (!empty($whereClauses)) {
$select1->where(implode(' OR ', $whereClauses),...$whereParams);
}
if (empty(trim($order))) {
$orderBy = 'table.contents.created';
$sort = Typecho_Db::SORT_DESC;
} else {
$orderBy = null;
$sort = "(case cid$order end)";
}
if ($orderBy!== null) {
$select1->order($orderBy, $sort);
}
if ($this->_currentPage == 1) {
$stickyPosts = $db->fetchAll($select1);
// 对获取到的置顶文章按照设置的顺序排序
usort($stickyPosts, function ($a, $b) use ($stickyCidMap) {
return $stickyCidMap[$a['cid']] - $stickyCidMap[$b['cid']];
});
foreach ($stickyPosts as $sticky_post) {
$sticky_post['sticky'] = $sticky_html;
$this->push($sticky_post);
}
}
$uid = $this->user->uid;
if ($uid) {
$select2->orWhere('authorId =? && status =?', $uid, 'private');
}
$sticky_posts = $db->fetchAll($select2->order('table.contents.created', Typecho_Db::SORT_DESC)->page($this->_currentPage, $this->parameter->pageSize));
foreach ($sticky_posts as $sticky_post) {
$this->push($sticky_post);
}
$this->setTotal($this->getTotal() - count($sticky_cids));
}
?>GitHub: https://github.com/ShuShuicu/Typecho-Options
在主题functions.php引入options.php即可快速调用设置选择框架进行开发
functions.php:
<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
// 引入设置框架
require_once 'options.php';主题后台设置项
字段类型 描述
Text 文本框
Textarea 文本域
Radio 单选框
Select 下拉框
Checkbox 多选框
Html 自定义 HTML 标签
$options = [
'基础设置' => [
'title' => '基础设置',
'fields' => [
[
// 'Html' => '自定义HTML标签',
'type' => 'Html',
'content' => '<h3>感谢使用 TTDF 进行开发</h3>'
],
[
// 'Text' => '文本框',
'type' => 'Text',
'name' => 'SubTitle',
'value' => null,
'label' => '副标题',
'description' => '这是一个文本框，用于设置网站副标题，如果为空则不显示。'
],
[
// 'Textarea' => '文本域',
'type' => 'Textarea',
'name' => 'TTDF_Textarea',
'value' => null,
'label' => '文本域',
'description' => '用于输入多行文本'
]
]
],
'select-elements' => [
'title' => '选择设置',
'fields' => [
[
// 'Radio' => '单选框',
'type' => 'Radio',
'name' => 'TTDF_Radio',
'value' => 'option1',
'label' => '单选框',
'description' => '用于选择一个选项',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
],
[
// 'Select' => '下拉框',
'type' => 'Select',
'name' => 'TTDF_Select',
'value' => 'option2',
'label' => '下拉框',
'description' => '用于从列表中选择',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
],
[
// 'Checkbox' => '多选框',
'type' => 'Checkbox',
'name' => 'TTDF_Checkbox',
'value' => ['option1', 'option3'],
'label' => '多选框',
'description' => '用于选择多个选项',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
]
]
],
'TTDF-Options' => [
'title' => '其他设置',
'fields' => [
[
'type' => 'Select',
'name' => 'TTDF_RESTAPI_Switch',
'value' => 'false',
'label' => 'REST API',
'description' => 'TTDF框架内置的 REST API<br/>详细教程见 <a href="https://github.com/Typecho-Framework/Typecho-Theme-Development-Framework#rest-api" target="_blank">官方文档 REST API 部分</a>',
'options' => [
'true' => '开启',
'false' => '关闭'
]
],
]
],
'HTML-Demo' => [
'title' => 'HTML示例',
// 定义HTML TAB栏
'html' => [
[
// 'Content' => '自定义输出HTML内容',
'content' => '<h2>欢迎使用TTDF框架</h2>
<p>Typecho Theme Development Framework</p>
<blockquote style="border-left: 4px solid #ccc; padding-left: 20px; margin: 20px 0;">
<p>一个 Typecho 主题开发框架，设计之初是写给自己用的。<br>
<del>还算不上框架只能说让开发变得更简单些</del></p>
</blockquote>'
],
]
],
];
return $options;字段类型 描述
Text 文本框
Textarea 文本域
Radio 单选框
Select 下拉框
Checkbox 多选框
$fields = [
[
// Text
'type' => 'Text',
'name' => 'TTDF_Fields_Text',
'value' => null, // 默认值为 null
'label' => '文本框',
'description' => '用于输入单行文本',
// 添加字段属性
'attributes' => [
'style' => 'width: 100%;'
]
],
[
// Textarea
'type' => 'Textarea',
'name' => 'TTDF_Fields_Textarea',
'value' => null, // 默认值为 null
'label' => '文本域',
'description' => '用于输入多行文本',
// 添加字段属性
'attributes' => [
'style' => 'width: 100%;height: 100px;'
]
],
[
// Radio
'type' => 'Radio',
'name' => 'TTDF_Fields_Radio',
'value' => null, // 默认值为 null
'label' => '单选框',
'description' => '用于选择一个选项',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
],
[
// Select
'type' => 'Select',
'name' => 'TTDF_Fields_Select',
'value' => null, // 默认值为 null
'label' => '下拉框',
'description' => '用于从列表中选择',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
],
[
// Checkbox
'type' => 'Checkbox',
'name' => 'TTDF_Fields_Checkbox',
'value' => [], // 默认值为空数组
'label' => '多选框',
'description' => '用于选择多个选项',
'options' => [
'option1' => '选项一',
'option2' => '选项二',
'option3' => '选项三'
]
]
];
return $fields;
]]>
]]>