当前位置：首页 > news >正文

typecho中的Widget设计文档

news 来源：原创 2025/8/11 17:27:31

组成系统的最基本元素

什么是Widget

Widget是组成Typecho的最基本元素，除了已经抽象出来的类库外，其它几乎所有的功能都会通过Widget来完成。在实践中我们发现，在博客这种小型但很灵活的系统中实施一些大型框架的思想是不合适的，它会使系统灵活性降低并且维护成本增高。因此为了达到功能和抽象的统一，我们将系统中所有的功能单元都看作一个Widget，它们都继承自一个超类''TypechoWidget''。

如何调用Widget

Widget有两种调用方法，它们分别是
1、显式地初始化一个Widget实例

class Foo extends Typecho_Widget
{public function test(){echo 'hello world';}public function render($a, $b){echo $a  $b;}
}$widget = new Foo();

2、使用工厂函数**factory**初始化Widget，并运行入口函数。

Typecho_API::factory('Foo', 6, 8);
//outputs: 14

在系统中，我们通常使用后者来实例化一个Widget -> Typecho::widget函数将直接返回一个实例化的Widget对象。它的第一个参数是Widget的绝对名称，在Typecho系统中Widget有两个存放的地方，他们分别是**./widget**目录和**./var/plugins**目录。Widget与其文件名保持一致且区分大小写，比如一个Widget的名称为TestMe那么它的文件名就是TestMe.php。

Widget文件可以按目录存放，调用的时候用点分号分割目录。比如存放路径为**./widget/contents/TestPost.php**，调用方法就是

Typecho::widget('contents.TestPost');

在上面的解释中，我们提到widget函数的作用是实例化一个Widget并运行它的入口函数。Widget的入口函数是render，这是一个公开函数，子类在继承超类TypechoWidget时必须实现这一方法。因此widget函数后面的参数将传递给入口函数render，比如上例中的Typecho::widget('Foo',6,8)，后面的两个参数将传递给Foo::render($a, $b)。

何时调用

Widget通常在以下三个地方被调用。

1、默认组件。Typecho系统共有两个入口(前台和后台)，在这两个入口初始化的时候分别会运行一些必要的默认组件，在index.php中有以下代码

Typecho::widget('Options')->to($options);    //初始化配置组件
Typecho::widget('Access')->to($access);      //初始化权限组件

在./admin/header.php中有以下代码

Typecho::widget('Options')->to($options);    //初始化配置组件
Typecho::widget('Access')->to($access);      //初始化权限组件
Typecho::widget('Menu')->to($menu);          //初始化菜单组件

这些Widget在系统初始化时被强制执行。

2、通过路由器默认执行的组件。[[develop:route|路由器]]是系统的重要组成部分，前台的所有页面都会通过路由器来展现，**路由器在默认组件执行之后被执行**。我们可以在路由表中设置默认执行的组件，这样当页面被导向这条路由记录时，默认组件将被执行。下面是一个路由表的示例，你可以在./config.php中找到它的完整定义。

/** 定义路由结构 **/
global $route;$route = array('index' => array('/', 'index.php', NULL, NULL, array('contents.Posts')),   //最后的一个参数表示默认组件'index_page' => array('/page/([0-9])[/]?', 'index.php', array('page'), '/page/%d', array('contents.Posts')),'post' => array('/archives/([0-9])[/]?', 'post.php', array('cid'), '/archives/%d', array('contents.Post')),'rss' => array('/feed[/]?', '../../xml/rss.php', NULL, '/rss', NULL),'do' => array('/([_0-9a-zA-Z-])\.do?', array('DoWidget'), array('do'), '/%s.do'),'job' => array('/([_0-9a-zA-Z-])\.job?', array('JobWidget'), array('job'), '/%s.job'),'login' => array('/login[/]?', 'admin/login.php'),'admin' => array('/admin[/]?', 'admin/index.php'),'page' => array('/([_0-9a-zA-Z-])[/]?', 'page.php', array('slug'), '/%s', array('contents.Post')),);

3、在最终页面中被执行的组件。最终页面也就是开发者最常接触到的模板之类的页面，我们通过widget函数来调用我们需要的组件。

<html>
<head>
<title><?php $options->title(); ?></title>
</head>
<body><div>
<!-- 第一种调用方法,调用公开方法生成列表 -->
<?php Typecho::widget('contents.Posts')->output('li', '_blank', 'list', true, 10, '[...]'); ?><!-- 第二种调用方法,调用集成方法生成列表 -->
<?php Typecho::widget('contents.Posts')->parse('<li><a href="{permalink}">{title}</a></li>'); ?><!-- 第三种调用方法,每行输出 -->
<?php Typecho::widget('contents.Posts')->to($posts); ?><?php while($posts->get()): ?><h2><a href="<?php $posts->permalink(); ?>"><?php $posts->title(); ?></a></h2><cite><?php $post->date('Y-m-d'); ?> | <?php $post->category(','); ?></cite><div><?php $post->content('...'); ?></div><?php endwhile; ?>
</div>
</body>
</html>

由于widget函数将直接返回实例化的组件(Widget)对象，因此我们可以通过返回值直接使用Widget的公开方法。其中一些比较特殊的方法将在后面被陆续介绍到。

一次执行规则

什么是一次执行规则

当一个组件被实例化以后，它将被保存在对象堆栈中，当我们第二次使用这一组件时，它将被直接从堆栈中取出然后返回。这一规则可以在保证组件唯一性的同时节约服务器资源。

如何调用已经被实例化的组件

一般来说我们通过函数widget调用一个组件时，它会返回一个实例化组件，你不必担心它是否是第一次被实例化。

Widget内部方法与接口

to方法

to方法是一个非常有用的伪方法，它的作用在于把一个实例化的Widget赋到一个变量中。我们可以通过以下代码来展示。

Typecho::widget('Foo')->to($foo);
$foo->test();

在上面的代码中我们通过to方法把实例化的Foo组件赋值给$foo。这样我们在后面的代码中可以用$foo变量来代表实例化的Foo对象，它等效于

$foo = Typecho::widget('Foo');

之所以不直接使用赋值语法，是因为赋值在模板中会经常用到，这一简写语法比较好理解，可以简化模板语法。**to方法在超类TypechoWidget中被实现，通过继承TypechoWidget可以自动具备这一方法**。

push以及相关方法

每个Widget都有一个内部队列，用于存储多行数据，这个堆栈的数据存取方法在超类TypechoWidget中被实现，我们通过继承超类获得对队列的操作能力。每次执行push方法，都将把一行数据压入队列，并移动队列的指针。数据压入完毕后，我们可以通过get方法移动指针，并且通过直接访问组建的内部属性获得某行的具体数据，我们通过如下代码来展示这一过程。

class Foo extends TypechoWidget
{public function render(){//定义三行数据$row1 = array('name' => 'Mike', 'age' => 17, 'sex' => 'man');$row2 = array('name' => 'Lucy', 'age' => 27, 'sex' => 'woman');$row3 = array('name' => 'Clark', 'age' => 23, 'sex' => 'man');//按顺序压入队列$this->push($row1);$this->push($row2);$this->push($row3);//从队列中取出相应值while($this->get()){echo "My name is " . $this->name . ", I'm " . $this->age . " years old, I am a " . $this->sex . ".\r\n";}}
}/***
输出:
My name is Mike, I'm 17 years old, I am a man.
My name is Lucy, I'm 27 years old, I am a woman.
My name is Clark, I'm 23 years old, I am a man.
***/

parse方法

parse方法实际上是对队列内数据输出的改善，以方便用户在html视图模板页面中显示列表，你不需要使用while之类的循环语法，直接指定一个列表模板即可，此函数会按照模板直接输出列表。因此我们可以对上面的例子做一点改进，用更少的代码达到同样的效果。

class Foo extends TypechoWidget
{public function render(){//定义三行数据$row1 = array('name' => 'Mike', 'age' => 17, 'sex' => 'man');$row2 = array('name' => 'Lucy', 'age' => 27, 'sex' => 'woman');$row3 = array('name' => 'Clark', 'age' => 23, 'sex' => 'man');//按顺序压入队列$this->push($row1);$this->push($row2);$this->push($row3);//使用parse输出$this->parse("My name is {name}, I'm {age} years old, I am a {sex}.");}}/***
输出:
My name is Mike, I'm 17 years old, I am a man.
My name is Lucy, I'm 27 years old, I am a woman.
My name is Clark, I'm 23 years old, I am a man.
***/

alt方法

在视图中输出widget列表内容时，可能产生如下隔行输出不同风格的需求。

<ul>
<li class="style-one">hello world</li>
<li class="style-two">hello china</li>
<li class="style-one">hello earth</li>
<li class="style-two">hello moon</li>
</ul>

注意以上代码中class的内容，也就是以2为界的循环输出。我们可以通过调用alt方法达到目的。

<?php Typecho::widget('Hello')->to($hello); ?><?php while($hello->get()): ?>
<li class="<?php $hello->alt('style-one', 'style-two'); ?>"><?php $hello->word(); ?></li>
<?php endwhile; ?>

我们在上述代码中使用了alt方法，alt方法接受不定数目的参数，也就是说你可以给它传递任意个数的参数，它将按照你传递参数的个数循环输出这些参数。

typecho中的Widget设计文档

组成系统的最基本元素什么是Widget Widget是组成Typecho的最基本元素，除了已经抽象出来的类库外，其它几乎所有的功能都会通过Widget来完成。在实践中我们发现，在博客这种小型但很灵活的系统中实施一些大型框架的思想是不合适的&#xff0c…...

编程日记 2025/8/11 17:27:31

使用ESPHome烧录固件到ESP32-C3并接入HomeAssistant

文章目录一、安装ESPHome二、配置ESP32-C3控制灯1.主配置文件esp32c3-luat.yaml2.基础通用配置base.yaml3.密码文件secret.yaml4.围栏灯four_light.yaml5.彩灯rgb_light.yaml6.左右柱灯left_right_light.yaml 三、安装固件四、HomeAssistant配置ESPHome1.直接访问2.配置ESPHom…...

编程日记 2025/8/12 16:08:41

基于STM32、HAL库的CH340N USB转UART收发器驱动程序设计

一、简介： CH340N是南京沁恒电子生产的一款USB转串口芯片，具有以下特点：支持USB 2.0全速（12Mbps）内置时钟，无需外部晶振支持5V和3.3V电源电压提供常用的MODEM联络信号内置上电复位电路支持Windows/Linux/Mac OSX等多平台驱动体积小，SOP-8封装二、硬件接口： CH…...

编程日记 2025/8/12 16:04:44

Spring Boot Controller 如何处理HTTP请求体

Spring Boot (通过Spring MVC) 提供了强大的机制来处理不同 Content-Type 的HTTP请求体。这主要依赖于 HttpMessageConverter 接口的各种实现，它们能够自动将请求体内容转换成Java方法参数。一、核心机制：HttpMessageConverter Spring MVC会根据…...

编程日记 2025/8/11 22:20:50

【deepseek教学应用】001：deepseek如何撰写教案并自动实现word排版

本文讲述利用deepseek如何撰写教案并自动实现word高效完美排版。文章目录一、访问deepseek官网二、输入教案关键词三、格式转换四、word进一步排版一、访问deepseek官网官网：https://www.deepseek.com/ 进入主页后，点击【开始对话】，如…...

编程日记 2025/8/12 16:01:53

【Spring Boot 多模块项目】@MapperScan失效、MapperScannerConfigurer 报错终极解决方案

在使用 Spring Boot 构建多模块项目，集成 MyBatis-Plus 时，很多开发者会遇到类似如下启动报错： Error creating bean with name mapperScannerConfigurer ... Caused by: java.lang.IllegalArgumentException: Property basePackage is requ…...

编程日记 2025/8/12 16:00:36

vue 中如何使用region？

vue 中如何使用region？ 在 Vue 文件中，你可以使用 //#region 和 //#endregion 注释来创建可折叠的代码区块（类似于 C# 的 region）。这可以显著提高大型 Vue 组件的可读性。 1. 基本用法在 <script> 部分使用 <script&…...

编程日记 2025/8/11 6:44:06

Spring Boot 启动原理的核心机制

一、核心启动流程概览 Spring Boot 的启动流程可概括为 7 个关键阶段： 1. 加载启动类 (Main Class) 2. 初始化 SpringApplication 实例 3. 加载配置 & 准备环境 (Environment) 4. 创建 ApplicationContext（容器） 5. 刷新容器&#…...

编程日记 2025/8/11 3:54:16

【每天学习一点点】使用Python的pathlib模块分割文件路径

使用Python的pathlib模块分割文件路径 pathlib模块（Python 3.4）提供了面向对象的文件系统路径操作方式，比传统的os.path更加直观和易用。以下是使用pathlib分割文件路径的几种方法： 基本路径分割 from pathlib import Path# 创…...

编程日记 2025/8/9 13:17:13

Qt/C++面试【速通笔记八】—Qt的事件处理机制

在Qt中，事件处理机制是应用程序与用户或系统交互的核心。通过事件处理，Qt能够响应用户的输入、窗口的变化、定时器的触发等各种情况。 1. 事件循环（Event Loop） 在Qt应用程序中，事件循环是事件处理机制的基础。事件循…...

编程日记 2025/8/7 22:07:43

uniapp自定义步骤条(可二开进行调试)

前言有一个业务需求是需要一个步骤条，但是发现开源的都不太合适，所以就自己写了一个。开始 test.vue <template><view class"authenticateRecordDetails_container"><view class"authenticateSte…...

编程日记 2025/8/12 2:11:43

uniapp｜实现多终端聊天对话组件、表情选择、消息发送

基于UniApp框架，实现跨平台多终端适配的聊天对话组件开发、表情选择交互设计及消息发送，支持文本与表情混合渲染。目录聊天界面静态组件实现消息列表布局消息气泡双向布局辅助元素定位与样式静态数据模拟与扩展性设计表情选择器静态模块浮层实现符号网格排列多端样式适配方…...

编程日记 2025/8/7 22:07:39

1.3.1 Linux音频框架alsa详细介绍

ALSA作为对旧OSS系统的替代方案，始于1998年。当时OSS还闭源商业化，因此社区开始开发开源的ALSA。经过多年的发展，ALSA成为Linux内核中音频架构的标准。结构和架构 ALSA由以下几个主要部分组成： 内核模块： 这是ALSA的…...

编程日记 2025/8/12 10:58:52

R 语言机器学习：为遥感数据处理开启新视角

技术点目录基础理论、机器学习与数据准备建模与空间预测实践案例与项目了解更多 ——————————————————————————————————————————— 前言综述在当今科技快速发展的时代，遥感技术为生态学研究提供了海量的数据资源&#xf…...

编程日记 2025/8/11 18:17:31

深度 |提“智”向新，奔向未来——当前机器人产业观察

机器人踏着“猫步”在T台走秀、进入工厂协助造车，教育、医疗、城市管理等领域都有了机器人的帮助……今天，机器人已得到广泛应用，走进你我的生活。伴随着技术日新月异，机器人产业加快提“智”向新。特别是今年以来&#xf…...

编程日记 2025/8/12 6:40:11

Web开发-JavaEE应用SpringBoot栈ActuatorSwaggerHeapDump提取自动化

知识点： 1、安全开发-JavaEE-常见依赖-Actuator&Swagger 2、安全开发-JavaEE-安全问题-配置安全&接口测试一、演示案例-WEB开发-JavaEE-监控依赖-SpringBoot&Actuator&配置安全 SpringBoot Actuator模块提供了生产级别的功能，比如健康…...

编程日记 2025/8/11 3:57:39

AI Agent开发之门：微软官方课程全面解析

AI Agent开发之门：微软官方课程全面解析引言项目概览10 节核心课程内容详解1. AI 代理简介及应用场景2. 探索 AI Agentic 框架3. 理解 AI Agentic 设计模式4. 工具使用设计模式5. Agentic RAG（检索增强生成）6. 构建可信赖的 AI Agents7. 规划…...

编程日记 2025/8/11 3:04:16

Unity-Shader详解-其五

关于Unity的Shader部分的基础知识其实已经讲解得差不多了，今天我们来一些实例分享： 溶解效果如下： 代码如下： Shader "Chapter8/chapter8_1" {Properties{// 定义属性[NoScaleOffset]_Albedo("Albedo", 2…...

编程日记 2025/8/7 22:07:27

从零打造个人博客静态页面与TodoList应用：前端开发实战指南

前言在当今数字时代，拥有个人博客和高效的任务管理工具已成为开发者展示自我和提升生产力的标配。本文将带你从零开始，通过纯前端技术实现一个兼具个人博客静态页面和TodoList任务管理功能的综合应用。无论你是前端新手还是希望巩固基础的中级开发者&a…...

编程日记 2025/8/7 20:10:22

开发者如何优雅应对HTTPS抓包难题

开发者如何优雅应对HTTPS抓包难题：工具实战深度解析调试HTTPS接口这件事，真是程序员永远的痛。特别是在移动端、或者遇到客户端集成了第三方安全SDK的项目时，网络调试的门槛几乎成倍提升。你可能也遇到过：Charles不识别证书、…...

编程日记 2025/8/7 22:07:23

Ubuntu 安装远程桌面连接RDP方式

1. 安装 XFCE4 桌面环境如果你的 Ubuntu 系统默认使用 GNOME 或其它桌面环境，可以安装轻量级的 XFCE4： sudo apt update sudo apt install xfce4 xfce4-goodies 说明：xfce4-goodies 包含额外的插件和工具（如面板插件、终端等&a…...

编程日记 2025/8/7 22:07:21

Ubuntu 22.04 出现 ‘Temporary failure resolving‘ 解决方案

a、使用apt 安装 resolvconf sudo apt-get install resolvconf b、使用 cd /etc/resolvconf/resolv.conf.d/ 进入文件夹，使用 ls 查看目录，会显示 base head tail c、使用 sudo vim base 编辑base文件， 进入时为空，添加 name…...

编程日记 2025/8/12 9:36:10

ubuntu 22.04 换源

参考：清华大学开源软件镜像站 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror...

编程日记 2025/8/7 22:07:17

Java并发编程几个问题的解答

目录 1、以前你编写的Java程序同时能做几件事情？有几个执行流程？main方法执行完，整个程序一定会退出吗？2、早期的电脑一般是单核CPU，但那时我们就可以在编写程序的同时听歌，你觉得其CPU可以同时执行两个程序…...

编程日记 2025/8/7 22:07:14

JavaScript中数组和对象不同遍历方法的顺序规则

在JavaScript中，不同遍历方法的顺序规则和适用场景存在显著差异。以下是主要方法的遍历顺序总结： 一、数组遍历方法 for循环 • 严格按数组索引顺序遍历（0 → length-1） • 支持break和continue中断循环 • 性能最优，…...

编程日记 2025/8/7 22:07:13

C++ STL入门：set 集合容器

C STL入门：set 集合容器一、核心特性与适用场景 set 是 C STL 提供的关联式容器，基于红黑树实现，具有两大核心特性： 特性表现形式底层原理元素唯一性重复值自动去重插入时进行二叉树键比对自动排序元素默认升序排列红黑树中序遍…...

编程日记 2025/8/7 22:07:11

[论文笔记] 超详细解读DeepSeek v3全论文技术报告

DeepSeek-V3是一个强大的专家混合（Mixture-of-Experts，MoE）语言模型，总共671B参数，每个token激活37B参数（可以理解为有多个专家，但每个token只会选择一部分专家进行推理，所以一个token的预测，只会用到37B参数），DeepSeek-V3 使用了多头潜在注意力（...

编程日记 2025/8/7 22:07:09

JS 问号（？）运算符避免中间报错

一、场景在前端开发过程中，有一些情况比如某些属性可能由于渲染数据的时机不同，一开始是null 或者undifine, 这样访问下面的属性的时候就会报错，我们可以给每个层级后面加个? 就可以避免这个错误。 let data {user: {profile: {name: &q…...

编程日记 2025/8/11 8:42:46

4：点云处理—去噪、剪切、调平

1.点云去噪 dev_clear_window ()dev_open_window(0, 0, 560, 560, black, WindowHandle)GenParamNames : [lut,intensity,light_position,disp_pose,alpha]GenParamValues : [color1,coord_z,0.0 0.0 -0.3 1.0,true,1]DispPose : [0,-0.0005,717.04,280,0,20,0]Instructions[0]…...

编程日记 2025/8/7 17:16:01