略略略，不想写，看GK主题演示

截图

更新日志

2025.8.8更新如下
新增：毛的没用
新增：联系方式（快手，QQ跳转没成功）
新增：文章阅读量
新增：搜索栏
新增：白天/夜间模式
新增：音乐歌单播放器
框架:三栏主题

前言

这里是4个完全独立Typecho插件，分别是博客订阅插件BlogSubscribe、友情链接插件LinkShow、游戏记录插件GameRecord、影视记录插件MovieRecord，每个插件都拥有不一样的效果，具体看功能区，插件可能与你的其他插件不共存，但你放心，我的这4个是共存，理论上是想放那里放那里。

1.博客订阅插件BlogSubscribe

通过在插件后台输入订阅地址，通过短代码调用

在你需要放的位置使用[小归客blog_subscribe]

2.友情链接插件LinkShow

在文章或者页面内填写logo、名称、地址、介绍使用。

[小归客linkshow]
[小归客link logo="图片地址" name="网站名称" nickname="网站昵称" url="链接地址" intro="网站介绍"]
[小归客link logo="图片地址2" name="网站名称2" nickname="网站昵称2" url="链接地址2" intro="网站介绍2"]
[小归客/linkshow]
其中，nickname="网站昵称2"可以删除使用非必用

3.游戏记录插件GameRecord

在文章或者页面填写logo、角色名、时间使用。

[小归客game logo="图标地址" name="游戏名称" nickname="游戏昵称" time="游戏时间"]

4.影视记录插件MovieRecord

在文章或者页面填写封面、名称、链接使用。

[小归客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属性

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}

转自:寻梦博客

方法一、外链读取txt

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');

前台index.php添加

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

来源:https://deepsea.xin/archives/77.html

下载

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 标签

setup.php

$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;