在尝试全站 CDN 加速失败后,打算降低要求,只对博客静态资源加速。原本以为很简单的一件事情,最终还是因为自己的愚钝,又踩了不少坑!

打算使用腾讯云的对象存储 COS、腾讯云 CDN 加 typecho 插件的方式,只对博客中的静态图片进行加速,期间尝试了好几个插件,好几个都不能用,总是报各种各样的错误,最后,还是找到了一个可以用的,经测试没问题后,就花了 20 元购买了 100G 的流量包。等购买后才想起来得试一试能不能正常上传附件,结果,就是这么倒霉,附件就是上传不成功。经多方检索问题所在无果后只好放弃!

啊!20 元钱都花了,搞不定心有不甘啊!于是打算降低要求,麻烦就麻烦点吧,我自己手动更换图片的加速链接得了,毕竟不会很多。于是在宝塔面板上安装腾讯云 COSFS 插件,将 typecho 的 uploads 文件夹挂载到腾讯云的 COS 上,让上传的图片可以直接存到 COS 存储桶内,更换博客文章内以前的图片地址为 CDN 加速地址后测试成功。

完事后,又打算把主题内用到的 CSS 和 js 等静态文件也放到腾讯云的对象存储内,部分内容记录如下:

functions.php 文件中写入如下代码:

function themeConfig($form) {
    $cjcdnAddress = new Typecho_Widget_Helper_Form_Element_Text('cjcdnAddress', NULL, NULL, _t('主题静态文件链接地址替换'));
    $form->addInput($cjcdnAddress);
}
function cjUrl($path) {
    $options = Helper::options();
    if ($options->cjcdnAddress) {
        echo rtrim($options->cjcdnAddress, '/').'/'.$path;
    } else {
        $options->themeUrl($path);
    }
}
function skinUrl($path,$ext,$skinid = NULL) {
    $options = Helper::options();
    if (!empty($options->skinoptions) && in_array('free', $options->skinoptions) && isset($_COOKIE["stylemode"]) && $_COOKIE["stylemode"] == "dark") {
        if ($skinid=='id') {
            echo 'style-dark';
        } elseif ($options->cjcdnAddress) {
            echo rtrim($options->cjcdnAddress, '/').'/'.$path.'style-dark'.$ext;
        } else {
            $options->themeUrl($path.'style-dark'.$ext);
        }
    } elseif (!empty($options->skinoptions) && in_array('free', $options->skinoptions) && isset($_COOKIE["stylemode"]) && $_COOKIE["stylemode"] == "white") {
        if ($skinid=='id') {
            echo 'style-white';
        } elseif ($options->cjcdnAddress) {
            echo rtrim($options->cjcdnAddress, '/').'/'.$path.'style-white'.$ext;
        } else {
            $options->themeUrl($path.'style-white'.$ext);
        }
    } elseif ($options->siteskin == 'auto' && (date('G') < 6 || date('G') >= 22)) {
        if ($skinid=='id') {
            echo 'style-dark';
        } elseif ($options->cjcdnAddress) {
            echo rtrim($options->cjcdnAddress, '/').'/'.$path.'style-dark'.$ext;
        } else {
            $options->themeUrl($path.'style-dark'.$ext);
        }
    } elseif ($options->siteskin == 'dark') {
        if ($skinid=='id') {
            echo 'style-dark';
        } elseif ($options->cjcdnAddress) {
            echo rtrim($options->cjcdnAddress, '/').'/'.$path.'style-dark'.$ext;
        } else {
            $options->themeUrl($path.'style-dark'.$ext);
        }
    } else {
        if ($skinid=='id') {
            echo 'style-white';
        } elseif ($options->cjcdnAddress) {
            echo rtrim($options->cjcdnAddress, '/').'/'.$path.'style-white'.$ext;
        } else {
            $options->themeUrl($path.'style-white'.$ext);
        }
    }
}

更改主题中引用的 css 和 js 文件引用方式:

\\header.php
<link rel="stylesheet" href="<?php skinUrl('jscss/','.css'); ?>" id="<?php skinUrl('','','id'); ?>" />
\\footer.php
<script src="<?php cjUrl('jscss/jquery.min.js') ?>"></script>
<script src="<?php cjUrl('jscss/main.min.js') ?>"></script>
<script>
function switchMode() {
   if (document.getElementById("style-dark")) {
      var link = document.getElementById("style-dark");
      link.href = "<?php cjUrl('jscss/style-white.css') ?>";
      link.id = "style-white";
      document.cookie = "stylemode=white;" + "path=/;" + "max-age=21600"
   } else if (document.getElementById("style-white")) {
      var link = document.getElementById("style-white");
      link.href = "<?php cjUrl('jscss/style-dark.css') ?>";
      link.id = "style-dark";
      document.cookie = "stylemode=dark;" + "path=/;" + "max-age=21600"
   }
};
</script>

经测试,js 文件是没有问题的,css 却出现问题,明明调用的 css 文件地址正确无误,从浏览器输入 css 文件地址也能正常下载,但是网站页面的 css 样式就是不起作用,全部失效!无奈只能再次去腾讯云的 cdn 设置里面一顿乱试,也不断进行检索,寄希望于找到解决办法。最终还是通过 google 检索查到了一个阿里云 OSS 问题的描述,好像于此问题相关。说是在用 cdn 加速后,如果使用的资源文件除了图片还有其他的样式文件 .css 是需要添加 HTTP 头的......尼玛,HTTP 头是个什么鬼,只得依葫芦画瓢,按照文中对 阿里云 OSS 解决办法的描述去对应着尝试寻找腾讯云中的相关设置。心想腾讯云的 CDN 设置中应该也会有相关设置,顶多就是叫法不太一样吧...在一番尝试后,总算解决!同时在看了下 HTTP 响应头配置的说明后,顺便解决了后续出现的 css 文件内引用字体的问题!

啊!以后再检索问题,必用 google 再也不见:垃圾的百度和必应!相关设置截图记录如下:

cos.png