小归客 - 建站教程

Typecho三栏主题GK#新作品

2025-08-09T00:29:00+08:00

介绍略略略，不想写，看GK主题演示截图更新日志2025.8.8更新如下新增：毛的没用新增：联系方式（快手，QQ跳转没成功）新增：文章阅读量新增：搜索栏新增：白天/夜间模式新增：音乐歌单播放器框架:三栏主题

Typecho插件-游戏、影视、友链、博客订阅

2025-07-31T01:00:00+08:00

播客解说前言这里是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可能是不兼容的。百度网盘(防失效)永久下载地址博客订阅链接:https://pan.baidu.com/s/103xTg4SeR-x6gtqkEk5YLg?pwd=7715 友情链接链接:https://pan.baidu.com/s/11Q7cV9jsl9oLHsmh5aUYpA?pwd=q316 游戏记录链接:https://pan.baidu.com/s/13mXaGDMn06FsWc4dbnR0Ng?pwd=46io 影视记录链接:https://pan.baidu.com/s/1pw0yFegZNAl6EFZbuO9rCA?pwd=4r68

写了一款typecho短代码插件

2025-07-30T19:27:00+08:00

写的一款typecho插件，里面有10个短代码，理论上是上传安装既用。经过测试“typecho默认主题、joe主题”是没有bug，正常使用的，具体看下面:插件下载: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@]

复制粘贴时，去掉@字符。

CSS filter 属性的奇妙之旅

2025-07-30T10:42:00+08:00

CSS 的filter属性就是你的 “魔法棒”，只需几行代码，就能为网页元素赋予各种惊艳的视觉效果，轻松提升页面质感。认识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; } }转自:前端老鹰

typecho内置友链实现方法函数代码

2025-07-29T01:04:00+08:00

非常的简单，只需要两步就可以轻松实现。css样式什么的需要自行进行解决。第一步把下面的函数代码添加到相关文件中，例如:function.php //内置友链，参数为内容，字符串形式。 function xm_yl($content){ if (strpos($content, '{link') !== false) { $content = preg_replace_callback('/{link title="(.+?)"}(.+?){\/link}/', function ($match){ $nr = str_replace(['
', '

', '

'], '', $match[2]); $content = '

'.$match[1].'

'.$nr.'

'; return $content; }, $content); } if (strpos($content, '{linka') !== false) { $content = preg_replace('/{linka url="(.+?)"}(.+?){\/linka img="(.+?)"}/','

\\2

', $content); } return $content; }第二步在相关要实现友链的文件中添加以下代码。content);?> 第三步在内容中添加友链ubb代码即可 {link title="分类标题"} {linka url="url地址"}名称{/linka img="图片"} {/link}转自:寻梦博客

两种方式轻松自制随机图片获取API

2025-07-28T17:56:00+08:00

在互联网中，我们常常需要快速获取各类图片资源。今天，就为大家带来一个超实用的教程，教你轻松搭建属于自己的随机图片获取API，从此告别四处寻觅图片API的繁琐。方法一、外链读取txt1.新建文件api.php $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';方法二、读取本地目录模式图片丢到images文件夹下，访问api.php即可来源:白衣博客

Typecho主题非插件置顶功能

2025-07-28T17:34:00+08:00

添加在 index.php 的 $this->title(); 前面加上 $this->sticky();例如下面这段代码

sticky(); $this->title() ?>

//其实就是这个 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添加 options->stickyCids; if ($stickyCids) { // 用英文逗号分割 $sticky_cids = explode(',', $stickyCids); // 去除每个元素的空格并过滤掉空元素 $sticky_cids = array_filter(array_map('trim', $sticky_cids), 'trim'); $sticky_html = "[置顶] "; $db = Typecho_Db::get(); $pageSize = $this->options->pageSize; $select1 = $this->select()->where('type =?', 'post'); $select2 = $this->select()->where('type =? && status =? && created 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

Typecho主题后台设置选项框架

2025-07-22T23:49:00+08:00

Typecho-OptionsTTDF后台设置框架独立版支持文章字段，如果不需要直接删除fields.php即可下载GitHub: https://github.com/ShuShuicu/Typecho-Options快速上手在主题functions.php引入options.php即可快速调用设置选择框架进行开发functions.php: [ 'title' => '基础设置', 'fields' => [ [ // 'Html' => '自定义HTML标签', 'type' => 'Html', 'content' => '

感谢使用 TTDF 进行开发

' ], [ // '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
详细教程见官方文档 REST API 部分', 'options' => [ 'true' => '开启', 'false' => '关闭' ] ], ] ], 'HTML-Demo' => [ 'title' => 'HTML示例', // 定义HTML TAB栏 'html' => [ [ // 'Content' => '自定义输出HTML内容', 'content' => '

欢迎使用TTDF框架

Typecho Theme Development Framework

一个 Typecho 主题开发框架，设计之初是写给自己用的。
~~还算不上框架只能说让开发变得更简单些~~

' ], ] ], ]; 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;

电脑壁纸-动漫

2025-07-11T00:26:28+08:00

电脑壁纸-美女

2025-07-11T00:23:50+08:00