优化Typecho 速度插件篇

Zi_Gao

August 10, 2020

1094 views

No comments

2317 words

网站维护

前言

大多数web程序都会有插件但是都有一个缺点就是插件越多越卡
今天我来将几种尽量避免插件卡顿的方式

正文

0x00 不用就关用时再开

某些插件只会在特殊的条件触发
并且一般回事修改某个文件
比如 sitemap生成插件
这种插件我们一般关闭它

需要使用时打开在触发它即可

0x01 在特定的前台页面添加固定的HTML内容

这种插件一般会在页面上添加内容
这时我们只需找到添加的内容
这里拿CodePrettify举例
我们打开插件目录下的Plugin.php文件

    public static function config(Typecho_Widget_Helper_Form $form){
        //设置代码风格样式
        $styles = array_map('basename', glob(dirname(__FILE__) . '/static/styles/*.css'));
        $styles = array_combine($styles, $styles);
        $name = new Typecho_Widget_Helper_Form_Element_Select('code_style', $styles, 'GrayMac.css', _t('选择高亮主题风格'));
        $form->addInput($name->addRule('enum', _t('必须选择主题'), $styles));
        $showLineNumber = new Typecho_Widget_Helper_Form_Element_Checkbox('showLineNumber', array('showLineNumber' => _t('显示行号')), array('showLineNumber'), _t('是否在代码左侧显示行号'));
        $form->addInput($showLineNumber);
    }

这一段是我们在选择代码样式

    /**
     *为header添加css文件
     *@return void
     */
    public static function header() {
        $style = Helper::options()->plugin('CodePrettify')->code_style;
        $cssUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/styles/' . $style;
        echo '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" />';
    }

    /**
     *为footer添加js文件
     *@return void
     */
    public static function footer() {
        $jsUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/prism.js';
        $jsUrl_clipboard = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/clipboard.min.js';
        $showLineNumber = Helper::options()->plugin('CodePrettify')->showLineNumber;
        if ($showLineNumber) {
            echo <<<HTML
<script type="text/javascript">
    (function(){
        var pres = document.querySelectorAll('pre');
        var lineNumberClassName = 'line-numbers';
        pres.forEach(function (item, index) {
            item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
        });
    })();
</script>

HTML;

这一段我们着重看

        $cssUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/styles/' . $style;
        echo '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" />';

这并没有直接指出文件
但是用来前一段代码我们选择的代码风格的css
所以我们到/usr/plugins/CodePrettify/static/styles/
这个目录的下面找到我们喜欢的css文件
移动到喜欢的位置当然不移也行

这里是在引入css和js文件

        $jsUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/prism.js';
        $jsUrl_clipboard = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/clipboard.min.js';

这里是在引入js我们找到/usr/plugins/CodePrettify/static/prism.js&/usr/plugins/CodePrettify/static/clipboard.min.js这个文件
我们把他移动到喜欢的位置当然不移也行

继续我们要把这些文件在特定的页面引入

经过前台HTML观察这些文件只会在文章页面引入
所以我们找到主题的目录下的post.php文件在这引入
当然如果文件不大使用主题的自定义head和自定义body也可以

若独立页面也需要引入那么在page.php文件引入也一样

引入HTML代码实例

<!--CodePrettify-->
<link rel="stylesheet" type="text/css" href="https://www.zigao.info/assets/CodePrettify/BlackMac.css">

<!--CodePrettify-->
<script src="https://www.zigao.info/assets/CodePrettify/clipboard.min.js"></script>
<script src="https://www.zigao.info/assets/CodePrettify/prism.js"></script>

其他插件自行修改