说明

我自已提供了几个右侧工具栏插件供大家使用，当然有很多朋友想自定义自已的右侧工具栏，这里就介绍一下如何自定义右侧工具栏插件

右侧式具栏挂载点

在里还是使用typecho的挂载点方式进行挂载，所以我们的插件可以像typecho插件那样去安装

<?php Typecho_Plugin::factory('freewind')->rightToolBar($this); ?>

插件开发

创建一个文件夹名为插件名称，如创建一个名为FreewindMusic的文件夹

在文件夹下创建一个php文件，名为Plugin.php，然后在该文件中定义类名称为插件名称_Plugin并实现Typecho_Plugin_Interface接口

在方法说明中找到自己需要的方法并实现

方法说明

activate

激活插件方法,如果激活失败,直接抛出异常

public static function activate()

一般来说内容如下

// 插件具体实现的内容(必须)
Typecho_Plugin::factory('freewind')->rightToolBar = array('FreewindMusic_Plugin', 'render');
//如果插件需要css，则加上这行
Typecho_Plugin::factory('freewind')->css = array('FreewindMusic_Plugin', 'css');
//如果插件需要js，则加上这行
Typecho_Plugin::factory('freewind')->js = array('FreewindMusic_Plugin', 'js');

config

获取插件配置面板

public static function config(Typecho_Widget_Helper_Form $form)

就是在点插件设置时的那个表单，后面可以通过如下代码获取设置的属性值

Typecho_Widget::widget('Widget_Options')->plugin('插件名')->属性名 

我们可以通过表单助手的方式创建配置表单

/**
 *表单助手构造方法
 */
public function __construct($name = NULL, array $options = NULL, $value = NULL, $label = NULL, $description = NULL)

常用表单助手有：

表单助手类参数说明：

• $name：配置项命名
• $options：选项，在为Radio、Select、Checkbox时生效
• $value：默认值
• $label：表单的 label 标题
• $description： 描述

我们就可以用如下代码创建表单

$name = new Typecho_Widget_Helper_Form_Element_Text('属性名', NULL, '默认值', _t('属性说明'), _t('属性描述'));
$form->addInput($name);

例如音乐插件中需要如下信息:

• 歌曲名称
• 音频文件地址
• 歌手
• 歌手图片
• LRC歌词

我们就可以定义表单如下

$name = new Typecho_Widget_Helper_Form_Element_Text('name', NULL, '', _t('歌曲名称'));
$form->addInput($name);
$music = new Typecho_Widget_Helper_Form_Element_Text('music', NULL, '', _t('音频文件地址'));
$form->addInput($music);
$songer = new Typecho_Widget_Helper_Form_Element_Text('songer', NULL, '', _t('歌手'));
$form->addInput($songer);
$avatar = new Typecho_Widget_Helper_Form_Element_Text('avatar', NULL, '', _t('歌手图片'));
$form->addInput($avatar);
$word = new Typecho_Widget_Helper_Form_Element_Textarea('word', NULL, '', _t('LRC歌词'), "一定要用有效歌词，不然播放器识别不了会报错");
$form->addInput($word);

render

插件具体实现的内容(必须)

public static function render()

如果你想让你的插件在右侧栏点标图标出现，再次点击时隐藏，可以用如下模板

<div id="你的组件id" class="right-tool-item" style="width: 插件宽度(必须);">
    <a class="right-btn" data-target="你的组件id" href="javascript:void(0)">
        <!-- 在里是插件的图标 -->
    </a>
    <div class="right-title">标题</div>
    <div class="right-content" style="border-radius: 0 0 10px 10px">
        <!-- 在里写你插件的外观样式 -->
    </div>
</div>

比如音乐插件中的内容

<div id="right-music" class="right-tool-item" style="width: 300px;">
    <a class="right-btn" data-target="right-music" href="javascript:void(0)">
        <!--音符图标，这个图标太小时，适当调整下字体大小-->
        <i style="font-size: 20px" class="iconfont icon-yinlegedanyinfu"></i></a>
    <div class="right-title">MUSIC</div>
    <div class="right-content" style="border-radius: 0 0 10px 10px">
        <!-- 用如下代码调用aplayer -->
        <div id="music-player" class="aplayer">
        <pre class="aplayer-lrc-content">
            <!-- 取出我们自己设置的歌词 -->
            <?php echo Typecho_Widget::widget('Widget_Options')->plugin('FreewindMusic')->word ?>
        </pre>
        </div>
    </div>
</div>

css

如果插件需要css，则加上这行

 public static function css()

比如音乐插件中我们需要引入aplayer的css样式，所以可以在该方法中写入如下代码

echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kevinlu98/freecdn@1.14/plugin/aplayer/APlayer.min.css">';

js

如果插件需要js，则加上这行

public static function js()

比如音乐插件中我们需要引入aplayer的js脚本，同时还需要自已写脚本创建APlayer播放器对象并完成播放器对象的初始化，我们可以使用如下偌

<?php
echo '<script src="https://cdn.jsdelivr.net/gh/kevinlu98/freecdn@1.14/plugin/aplayer/APlayer.min.js"></script>';
?>
<script>
  var ap3 = new APlayer({
    element: document.getElementById('music-player'),
    narrow: false,
    autoplay: false,
    showlrc: true,
    music: {
      title: '<?php echo Typecho_Widget::widget('Widget_Options')->plugin('FreewindMusic')->name ?>',
      author: '<?php echo Typecho_Widget::widget('Widget_Options')->plugin('FreewindMusic')->songer ?>',
      url: '<?php echo Typecho_Widget::widget('Widget_Options')->plugin('FreewindMusic')->music ?>',
      pic: '<?php echo Typecho_Widget::widget('Widget_Options')->plugin('FreewindMusic')->avatar ?>'
    }
  });
  ap3.init();
</script>

结束

这样，我们的freewind右侧栏自定义插件就开发完成啦