主题举步维艰地更新到了 0.4 版,相对之前版本有了巨多改善(其实是因为之前太渣了 ) 。

特别感到自豪的有两个,一个是修改了表情插入的方式,而且文章编辑界面也可以插入表情。另一个是方便的插入图集的方法(不用再写 HTML 了),也是通过后台的按钮实现的。说起来,自定义后台编辑界面是相当重要的技巧,因为某些稍高级的功能是通过短代码或者插入 HTML 实现的,而普通用户并不愿意这么做(废话,那还要 Markdown 干什么?)。这里记录一下其中的一种实现方式。

首先在模板根目录下的 functions.php 中添加

Typecho_Plugin::factory('admin/write-post.php')->bottom = array('Utils', 'addButton');
Typecho_Plugin::factory('admin/write-page.php')->bottom = array('Utils', 'addButton');

这两行注册了两个方法,也就是在渲染 write-post.php 和 write-page.php 两个文件时要执行的方法。我们需要给出 addButton 方法的实现,同样在 functions.php 中:

class Utils {
    public static function addButton(){
         echo '<script type="text/javascript" src="/usr/themes/RAW/assets/editor.js"></script>';
    }
}

调用该方法后会在底部引入 editor.js 文件,在这个文件中,你就可以为所欲为了!这里提一个示例:添加一个 OwO 表情面板。

OwO 表情面板需要引入额外的 CSS 和 JS,因此在 addButton 方法中应该至少包括:

class Utils {
    public static function addButton(){
        echo '<script src="/usr/themes/RAW/assets/owo/owo.min.js"></script>';
        echo '<script type="text/javascript" src="/usr/themes/RAW/assets/editor.js"></script>';
        echo '<link rel="stylesheet" href="/usr/themes/RAW/assets/owo/owo.min.css" />';
    }
}

然后编辑 editor.js

if($('#wmd-button-row').length>0){
    $('#wmd-button-row').append('<li class="wmd-spacer wmd-spacer1"></li><li class="wmd-button" id="wmd-owo-button" style="" title="插入表情"><span class="OwO"></span></li>');
    var owo = new OwO({
        logo: 'OωO',
        container: document.getElementsByClassName('OwO')[0],
        target: document.getElementById('text'),
        api: '/usr/themes/RAW/assets/owo/OwO.json',
        position: 'down',
        width: '400px',
        maxHeight: '250px'
        });
    }

这段 JS 在工具栏添加了一个 <span> 容器,并 new 了一个 OwO 对象,此时这个表情面板应该已经可以使用了!

要注意的是后台的样式可能与 Owo 有冲突,因此你可能需要校正一下样式。校正的方式是在 addButton 方法输出内容,使用 <style> 标签输出 CSS。