经验杂谈

Typecho自制插件初体验

前言

我的博客使用的框架是 Typecho (现在又换成 Halo 了)，博客框架我一共就使用过两个，一个是 WordPress 另一个就是他。我选择 Typecho 的主要原因是他相对于 WordPress 更轻便，在常用功能不缺失的同时，并不需要消耗服务器过多的资源，主题插件方面也算全面(相比 WordPress 来说还是好少😔)。

这个博客是一年前搭建的，进入大学已经两年多了，但是没有一点经验积累，自己手中做过的一些小项目也没有记录，都随着时间一点一点消淡了，所以我觉得我还是应该拿出一些时间去记录自己的经历与成长。

那就从这个博客开始！

一个想法

这个主题当时是让我眼前一亮的，但是那个代码块的样式真的是十年前的审美水平，代码高亮也更无从谈起！所以我去网上找到了这个代码高亮插件(传送门)，但是发现和我的主题似乎不是很搭配，于是我找到了这个插件的目录，开始了对它的研究，简单了解了一下，似乎所有代码最终都指向了一个文件➡ ***.css ，简单的修改一下就完成了属于我的专属代码块样式！

console.log("笑我死啦!!!");

我发现，Typecho插件的逻辑似乎并不是很难理解(即使这样我还是花了两个小时才搞明白)？正好，这时我需要列一个清单来规划我这些日子的工作，然而，在每行目标前面插一个 disable 的 input 标签似乎很蠢(而且自定义样式也不是很容易)，所以我决定自己动手写一个ToDo插件。

准备

Typecho是用 PHP 开发的，又是一门从未接触过的新语言，但是看了看菜鸟教程上的PHP教程，似乎也并没有很难上手(计算机语言这种东西，明白了其中的思路，接受新语言的速度还是蛮快的)，花了一些时间去看了看简单的语法、特性之类的，就开始准备下一步了(写多了Python和JS，真的很容易忘记后面的 ; )。

开始之前一定是要去看文档的，所以，我打开了Typecho官方插件开发文档，正巧Typecho前两天更新了1.2版本，然而文档似乎还是n年前的老版本...还好每个版本都给了一个 HelloWorld 插件示例，文档的思路也面前能够看得明白，我再结合了刚刚改过的代码高亮插件，终于理出了一个较为清晰的思路。

思路

那个代码高亮插件的思路就是，在文章页面的 <header> 和 <footer> 标签中加入引用JS和CSS的标签，然后把写好的JS和CSS文件放到插件文件夹里直接引用。我顺着这个思路简单理了一下，我可以在 MarkDown 里面写一个标签 <todo> ，然后把清单列表写成 json 格式，键为目标的信息，值就是完成状况( true 或者 false )，然后在文章页面引用js文件，这个js文件用来获取 <todo> 标签和它里面的清单，分析后将它转成 HTML 标签添加到 <todo> 标签里面，最后写一个css文件用来完善它的样式，这样就大功告成！😁

开始

  1. 首先是写 Plugin.php 文件，这个文件作为插件的入口，是最重要的一环🗝️。

// 激活插件方法,如果激活失败,直接抛出异常
public static function activate(){
    \Typecho\Plugin::factory('Widget_Archive')->header = __CLASS__ . '::header';
    \Typecho\Plugin::factory('Widget_Archive')->footer = __CLASS__ . '::footer';
}

// 获取插件配置面板
public static function config(Form $form){
    $styles = array_map('basename', glob(dirname(__FILE__) . '/static/styles/*.css'));
    $styles = array_combine($styles, $styles);
    $name = new Select('todo_style', $styles, 'Type1.css', _t('选择ToDo主题风格'));
    $form->addInput($name->addRule('enum', _t('必须选择主题'), $styles));
}

// 插入CSS文件到<header>
public static function header(){
    $style = htmlspecialchars(Options::alloc()->plugin('TypechoToDo')->todo_style);
    $cssUrl = htmlspecialchars(Options::alloc()->rootUrl . '/usr/plugins/TypechoToDo/static/styles/' . $style);
    echo '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" />';
}
    
// 插入JS文件到<footer>
public static function footer(){
    $jsUrl = htmlspecialchars(Options::alloc()->rootUrl . '/usr/plugins/TypechoToDo/static/typechoTodo.js');
    echo <<<HTML
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="{$jsUrl}"></script>
HTML;
    }
}

  1. 写 typechoTodo.js 文件，这个文件用来解析标签，生成标签🔔。

// 根据获取到的信息生成标签
function createTag(text, tof){
    if(tof==true){
        return '<div><div class="WanCheng"></div>'+text+'</div>';
    } else if(tof==false) {
        return '<div><div class="WeiWanCheng"></div>'+text+'</div>';
    } else return "<div style='color: red;font-weight: bold;'>Todo: 请检查'true'或'false'的拼写</div>";
}

// 主函数，获取所有<todo>标签，遍历并将生成的标签添加至相应的<todo>标签内
function typechoTodo(){
    var todos = document.getElementsByTagName("todo");
    $.each(todos, function(){
        try {
            var data = eval('('+this.getAttribute("list")+")");
            var formatData = "";
            for(let key in data){
                formatData = formatData + createTag(key, data[key]);
            };
            this.innerHTML = formatData;
        } catch(err) {
            this.innerHTML = "<div style='color: red;font-weight: bold;'>ToDo: 请检查标签格式。</div>";
        }
    })
}

// 当document准备就绪时运行主函数
$(document).ready(function() { typechoTodo(); })

  1. 在博客里添加 <todo> 标签🧨。

<todo list="{'已完成的目标':true,'还没有完成的目标':false,'<s>不想完成的目标</s>':false}">

  1. 看一下效果吧🎇(效果图无了)。

总结

事情很少有根本做不成的。其所以做不成，与其说是条件不够，不如说是由于决心不够。

—罗切福·考尔德 (法)

Comment