typecho页面进度条加载插件

之前就已经留意过PaceJs页面进度条效果，淘宝、gitlab、简书等各大网站都陆续使用该效果，咱也在typecho上玩玩吧(DEMO)。

【转自】: typecho页面进度条加载插件

1. 下载官网sdk包，然后在typecho里面新建插件目录

/
/usr/plugins/PaceJs/
/usr/plugins/PaceJs/themes
/usr/plugins/PaceJs/themes/pace.min.js
/usr/plugins/PaceJs/themes/Plugin.php

1. themes和pace.min.js是sdk包里面的代码，包里面的其他文件就不需要啦
2. Plugin.php：

<?php
/**
 * 页面加载进度条插件 for Typecho
 *
 * @package 页面加载进度条插件
 * @author 没那么简单
 * @version 1.0.0
 * @link http://nsimple.top
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

class PaceJs_Plugin implements Typecho_Plugin_Interface
{
    /**
     * 激活插件方法,如果激活失败,直接抛出异常
     *
     * @access public
     * @return void
     * @throws Typecho_Plugin_Exception
     */
    public static function activate()
    {
        Typecho_Plugin::factory('PaceJs')->render = array('PaceJs_Plugin', 'render');
    }

    /**
     * 禁用插件方法,如果禁用失败,直接抛出异常
     *
     * @static
     * @access public
     * @return void
     * @throws Typecho_Plugin_Exception
     */
    public static function deactivate(){}

    /**
     * 获取插件配置面板
     *
     * @access public
     * @param Typecho_Widget_Helper_Form $form 配置面板
     * @return void
     */
    public static function config(Typecho_Widget_Helper_Form $form)
    {
        /** 进度条主题配置 */
        $colors = array(
            'black'  => '黑色',
            'blue'   => '蓝色',
            'green'  => '绿色',
            'orange' => '橙色',
            'pink'   => '粉红色',
            'purple' => '紫色',
            'red'    => '红色',
            'silver' => '银色',
            'white'  => '白色',
            'yellow' => '黄色'
        );

        $types = array(
            'barber-shop'      => '理发店型',
            'big-counter'      => '大字号数字型',
            'bounce'           => '萌萌哒跳跃型',
            'center-atom'      => '旋转桃花型',
            'center-circle'    => '翻转圆圈型',
            'center-radar'     => '雷达扫描型',
            'center-simple'    => '居中常规型',
            'corner-indicator' => '角指示器型',
            'fill-left'        => '左侧填充型',
            'flash'            => 'flash控件型',
            'flat-top'         => '平直呆板型',
            'loading-bar'      => '缓存加载型',
            'minimal'          => '简洁小巧型',
            'mac-osx'          => 'Mac系统型',
            'material'         => '材料物质型'
        );
        $paceJsColor = new Typecho_Widget_Helper_Form_Element_Select('paceJsColor', $colors, 'blue', _t('进度条颜色'));
        $paceJsTheme = new Typecho_Widget_Helper_Form_Element_Select('paceJsTheme', $types, 'flash', _t('进度条主题'));
        $form->addInput($paceJsColor);
        $form->addInput($paceJsTheme);
    }

    /**
     * 个人用户的配置面板
     *
     * @access public
     * @param Typecho_Widget_Helper_Form $form
     * @return void
     */
    public static function personalConfig(Typecho_Widget_Helper_Form $form){}

    /**
     * 插件实现方法
     *
     * @access public
     * @return void
     */
    public static function render()
    {
        $config = Typecho_Widget::widget('Widget_Options')->plugin('PaceJs');
        $pluginUrl = Helper::options()->pluginUrl . '/PaceJs';
        $themeUrl = $pluginUrl . '/themes/' . $config->paceJsColor . '/pace-theme-' . $config->paceJsTheme . '.css';
        echo '<link href="' . $themeUrl . '" rel="stylesheet" />';
        echo <<<EOT
            <script> paceOptions = { elements: {selectors: ['#footer']}};</script>
            <script src="{$pluginUrl}/pace.min.js"></script>            
EOT;
    }
}

1. 在/usr/themes/default/header.php里面，添加插件代码:

<!--加载进度条插件-->
<?php Typecho_Plugin::factory('PaceJs')->render(); ?>

1. 后台就能看到插件啦(PaceJs), 然后开启使用吧~
2. 把所有可支持的插件颜色和主题都通过插件配置来实现啦~ Ps 默认是蓝色、flash控件式
   [