Typecho 自定义文章编辑界面

请注意,本文编写于 259 天前,最后修改于 259 天前,其中某些信息可能已经过时。

主题举步维艰地更新到了 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。

添加新评论

已有 18 条评论

见证一个大佬主题的成名过程

熊猫小A 熊猫小A 回复 @APP喵

噗 还成名咧 一直都只是小透明而已~

大佬你的主题实在是 太好看了
(对比我自己写的...根本比不了233)

熊猫小A 熊猫小A 回复 @ohmyga

大佬真的谦虚啦,你的主题也很好看!

不断完善合超越的新主题诞生了,做的真心不错,学习了

熊猫小A 熊猫小A 回复 @Rinvay

大佬见笑了

一个伟大的主题,就这样诞生了

熊猫小A 熊猫小A 回复 @枂下

这也太夸张了

用户体验做的不错,是我喜欢的扁平风~

熊猫小A 熊猫小A 回复 @WeebFlex

谢谢~

很厉害,主题越来越完善了。还是这个主题看起来最顺眼~~

熊猫小A 熊猫小A 回复 @夏和帆

嘿嘿 可能是因为也借鉴了一些好看的博客主题~

哇,又更新了,改天我也更新(现在懒得折腾),真棒,支持熊猫小A

熊猫小A 熊猫小A 回复 @森纯博客

嘿嘿 直接 git pull 就万事大吉了~

森纯博客 森纯博客 回复 @熊猫小A

git pull是什么,原谅我是个新手(汗)

熊猫小A 熊猫小A 回复 @森纯博客

如果你是使用 git clone 的方式直接把项目克隆到本地的,那么就只需要再执行 git pull 就可以拉取最新的代码