若图片加载失败,请开启代理或配置 Github Host,还可帮助今后更好的使用 Github 哦

开启本地自定义

在 sakura 主题设置里 cdn 内把两个自定义打开。

一般情况我们不会自定义 lib.js ,因为这个文件内自带两行不雅的 console ,对有控制台强迫症的人来说是接受不了的,如果可以接受,这里只打开最后一个自定义选项即可。

位置1(sakura-app.js/style.css)

主题根目录下 functions.php 内,红框是先加载 style.css ,再加载 sakura-app.js ,如果自己没有扩展函数一般 sakura-app.js 是不会改的,主要是自己的 style.css ,第一行填写方法:

wp_enqueue_style('saukra_css', 'cdn地址', array(), akina_option('cookie_version', ''));

第二行的 sakura-app.js 如果没有自己改动,可使用下面作者的 cdn ,复制过来即可:

wp_enqueue_script('app', 'https://cdn.jsdelivr.net/gh/mashirozx/[email protected]' . SAKURA_VERSION . '/js/sakura-app.min.js', array(), SAKURA_VERSION, true);

假如有自定义,写成:

wp_enqueue_script('app', 'cdn地址', array(), akina_option('cookie_version', ''), true);

位置2(lib.js)

同文章上文所说,如果要调整,改成:

wp_enqueue_script('js_lib', 'https://cdn.jsdelivr.net/gh/fz6m/[email protected]/js/main/lib.js', array(), akina_option('cookie_version', ''), true);

可以使用我的(已经去除不雅的输出)

位置3(lib.css/sakura.css)

主题根目录 inc/swicher.php 内,第一个红框是 sakura.css 第二个同理。

如果文章页使用 Github 布局, 需要改中间那个 github.css ,如果不是 Github 布局文章页,无需修改。

改成如下形式即可:

mashiro_option.entry_content_theme_src = "cdn地址?<?php echo akina_option('cookie_version', ''); ?>";

注意

cookie

以上修改最好是带上了 akina_option('cookie_version', '') ,这样可以保证你修换 cdn 文件的时候把 cookie 切换对用户的缓存可控。

缓存插件冲突

使用了 AutoptimizeWP Rocket 等优化代码插件的,一定要把对 css 的优化关掉,否则会导致你自定义的 css 部分被覆盖。

颜色

建议在整套需要做 cdn 的文件内,将所有的 orange 文本替换为你的主题颜色,以防出现颜色问题(目前我没有出现,谨慎考虑)

其他

效果

在我的网站上,可以提速 2 s 之多,几百 KB 用 cdn 加速还是很可观的。

压缩文件

使用 vscode 的 JS & CSS Minifier (Minify) 插件可以很好的压缩文件,使用压缩后的速度更快。

谨慎

一般情况都会一做一整套的文件(lib.js/sakura-app.js/lib.js/sakura.js/style.css)加速,建议不要有用有不用的,不方便管理,还可能出现错误。

另外一般都是网站成型之后,不再大改风格和布局的情况进行全部资源的 cdn 加速。如果有临时小修订布局可以自行再引入网站本地的 .css


哪有喜欢孤独的人,只是他们不喜欢绝望而已。