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

【Typecho】Tbeautify插件开发与使用

article 2025/1/11 7:50:50

最近了解typecho关于插件这块，萌生了自己开发一个插件的想法。因为lz的博客本身就引用了近十来个插件，深知插件给博客起到的作用有多大。在感激哪些开源插件的作者为爱发电的同时，又何尝不想为此贡献一份力量。无奈才疏学浅，对于php的了解不深。但是，种一颗树的最好时间就是十年前，其次就是现在。不试试怎么知道？万一成功了呢？

1.插件设想来源

起初之前写过一个相册管理版的“伪插件”，让lz对typecho插件有了一个大概了解。但是相册管理实际上也是一个偏独立的php页面，严格意义上应该算不上插件。lz更想做一个比较纯粹的插件。

然后就是接触到了很多js以及css的特效代码，就想着能不能汇总一下这些代码。整合成一个typecho插件方法引入到博客中。有了这个想法后就开始逐步收集并整理一些js和css相关的特效代码。

最后经过整理汇总，以及统计了一些博客常用的特效，最终记录出10个网站特效，我称其为十大特效，简称：Tbeautify。这就是插件名的由来啦。

特效分别有：网站置灰效果，春节灯笼，4个鼠标点击效果，樱花飘落特效，悬浮播放器，看板娘，语言国际化

特效汇总集合测试页效果：

2.插件开发

typecho官网的开发文档有点让人一言难尽，给lz这种对php一知半解的人无从下手的感觉。粗略看了下源代码插件开发的相关类，typecho的插件就是一个Plugin.php文件，会进行插件的定义，包括名称，作者，插件的激活禁用，渲染等，比如下面官方提供的Hello World插件示例：

<?php

namespace TypechoPlugin\HelloWorld;

use Typecho\Plugin\PluginInterface;
use Typecho\Widget\Helper\Form;
use Typecho\Widget\Helper\Form\Element\Text;
use Widget\Options;

if (!defined('__TYPECHO_ROOT_DIR__')) {
    exit;
}

/**
 * Hello World
 *
 * @package HelloWorld
 * @author qining
 * @version 1.0.0
 * @link http://typecho.org
 */
class Plugin implements PluginInterface
{
    /**
     * 激活插件方法,如果激活失败,直接抛出异常
     */
    public static function activate()
    {
        \Typecho\Plugin::factory('admin/menu.php')->navBar = __CLASS__ . '::render';
    }

    /**
     * 禁用插件方法,如果禁用失败,直接抛出异常
     */
    public static function deactivate()
    {
    }

    /**
     * 获取插件配置面板
     *
     * @param Form $form 配置面板
     */
    public static function config(Form $form)
    {
        /** 分类名称 */
        $name = new Text('word', null, 'Hello World', _t('说点什么'));
        $form->addInput($name);
    }

    /**
     * 个人用户的配置面板
     *
     * @param Form $form
     */
    public static function personalConfig(Form $form)
    {
    }

    /**
     * 插件实现方法
     *
     * @access public
     * @return void
     */
    public static function render()
    {
        echo '<span class="message success">'
            . htmlspecialchars(Options::alloc()->plugin('HelloWorld')->word)
            . '</span>';
    }
}

因为lz的这个插件需要做到的是通过配置面板来动态选择引入特效的js和css即可。所以，实际上要解决的就是三步。