Typecho 自定义文章编辑界面

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

Tags:none
上一篇
打赏
下一篇

添加新评论

已有 14 条评论

 ohmyga 昨天 17:14 • |

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

 熊猫小A 昨天 21:25 • |
@ohmyga

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

 Rinvay 2 天前 • |

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

 熊猫小A 2 天前 • |
@Rinvay

大佬见笑了

 枂下 1 星期前 • |

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

 熊猫小A 6 天前 • |
@枂下

这也太夸张了

 WeebFlex 1 星期前 • |

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

 熊猫小A 1 星期前 • |
@WeebFlex

谢谢~

 夏和帆 1 星期前 • |

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

 熊猫小A 1 星期前 • |
@夏和帆

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