Sakurairo本地化和动静分离-2.4.5
最近UCode偶尔会寄，因此这个教程有现实需求
环境：Linux+LSWS+MySQL+Redis+lsphp8.0或Linux+Nginx+MySQL+Redis+php8.0
我们打开瞳宝的网站asuhe.jp，F12打开源代码页面
其中可以看到，asuhe.jp下的是从本地加载的，at.alicdn.com是iconfont源，cdn.maho.cc是瞳宝的随机图，是iro默认的Google字体源，gstatic.loli.net是由fonts.loli.net得到的css加载的字体，panbaidu.cn是麦老板的CDN，jscdn.host是UCode的域名
我们需要优化的有
- 索引本身的加载速度
- 除了索引以外所有从asuhe.jp下加载的资源
- Google字体
- 所有UCode资源
- 删除lib.css
优化索引本身的加载速度
使用Litespeed Cache或WP SuperCache等缓存插件
优化除了索引以外所有从asuhe.jp下加载的资源
- 使用Litespeed Cache或WPJAM等具有CDN替换功能的插件，将资源路径全部重写至你的CDN
- 使用iro主题设置中的 图片 CDN 设置，填写你的CDN域名，这个CDN域名需要能直接访问到你的wp-content/uploads
优化Google字体
- 在国内几个Google字体源中挑选合适的
- 自建Google字体源（提示：可以只包含你需要的字体顺便写死css）
更新FontAwesome
- 推荐自建FontAwesome源（推荐和iro前端库放在一起），也可以使用UCode
- 在header.php中添加以下代码
<head>
<!-- load all Font Awesome styles -->
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
<!-- support v4 icon references/syntax -->
<link href="/your-path-to-fontawesome/css/v4-shim.css" rel="stylesheet">
</head>
- 懒人代码
<?php
$vision_resource_basepath = iro_opt('vision_resource_basepath');
if ($vision_resource_basepath == ''){
$vision_resource_basepath = 'https://x.jscdn.host/release/ucode-x/source/Sakurairo_Vision/@2.4/';
}
$fa6_source = $vision_resource_basepath . 'fontawesome/css/all.min.css';
$fa4_source = $vision_resource_basepath . 'fontawesome/css/v4-shims.min.css';
?>
<link rel="stylesheet" href="<?php echo $fa6_source ?>">
<link rel="stylesheet" href="<?php echo $fa4_source ?>">优化所有UCode资源
- 如上图所示勾选 关于主题 页面中的选项
- 在自己的CDN或者自己的服务器上建立iro前端库并正确填写，文件可以从Fuukei/Sakurairo_Vision仓库获得
- 对Sakurairo/opt/options/theme-options.php中的所有x.jscdn.host进行替换，替换你的CDN或服务器对应域名
- 完成上一步后到 主页→封面社交区域设置 重新设置封面社交区域图标并保存
- 更改 iro主题设置 中的其它资源如光标、加载占位符、展示区域图片等
删除lib.css
lib.css作为Sakura遗留的代码，会因为瞳宝的部分代码原因强制从源站加载
原来的app.js末尾是
(0,n.loadCSS)(_iro.jsdelivr_css_src),(0,n.loadCSS)("https://at.alicdn.com/t/font_679578_qyt5qzzavdo39pb9.css")})(),u=l.O(u)})();修复方法是删除其中的
(0,n.loadCSS)(_iro.jsdelivr_css_src),Sakurairo动静分离-2.4
瞳宝终于不咕了！
U-Code的速度已经相当不错，因此不再需要修改文件。现在只需要把三个本地化前端库设置全开启并把wp-content和wp-includes重写上CDN即可，具体方法不再赘述
如需进一步修改，更改theme-options.php并重新设置以写入数据库即可
Sakurairo动静分离-2.3.4
套盾：主题设置里的本地化前端库和本地化js/css选项在我基于2.3.4版本测试时没有观察到效果，本文默认开启这两个选项
如果你使用Litespeed Cache，请分清主题代码里的替换和.htacess带来的CDN替换
Litespeed Cache或WP Supercache的使用网上有大量教程，这里不赘述
我们通过直接修改主题文件里的链接来实现静态替换，所有需要修改的文件都在主题目录下
以下是主要的几个需要修改的文件
- ./tpl/*
- ./layouts/*
- ./css/lib.css
- ./css/fontawasome.css
- ./opt/options/theme-options.php
在以上文件中使用Crtl+H，替换https://cdn.jsdelivr.net/……为你的CDN域名即可，请注意格式
另外请注意替换直接使用"/static"这样的相对路径的href和src属性
根据你具体的设置和引用的css和js，上面几步可能替换不完全
在主题设置中重新设置社交图标样式后，刷新全部缓存并使用F12测试你的网站，观察加载项的来源
找到来自你原本域名的文件，使用“发起程序”功能定位并修改网址，除了index.php，发起程序还会是js或css
瞳宝的主题除了lib.css以外暂时没有发现使用js发起的请求，所以如果有没修改完全的地方，只需要找到对应的php文件或者css文件并修改即可，修改难度很低
每次修改后记得刷新所有缓存
Sakurairo动静分离进阶
iro的低使用设置中有CDN域名的选项，Litespeed Cache中也有一个CDN选项
iro的CDN域名功能会把example.com/wp-content/uploads/ 重写到你指定的目录
Litespeed Cache的CDN域名功能默认会把example.com/wp-content和example.com/wp-includes重写到cdn.example.com/wp-content和cdn.example.com/wp-includes，请注意这两个不要互相冲突。经过观察似乎iro的优先级更高，推测是iro直接返回图片的新地址，不会经过.htaccess重写。推荐CDN源站和WordPress建立在同一台服务器上，使用软链接保证资源随时更新，也可以使用对象存储或API图床。
Edge的F12中源代码选项卡可以看到所有资源的来源，确保你的资源没有来自cdn.jsdelivr.net的就可以了
Sakurairo 自定义Style.css指引
修改标题栏logo的透明度
修改style.css中
.site-title img {
height: 40px;
margin-top: 17px;
opacity: .75;
-webkit-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
-moz-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
}修改为
.site-title img {
height: 40px;
margin-top: 17px;
-webkit-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
-moz-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
}这样就是删除了opacity项，将不透明度设为100%
修改移动端左边栏
修改style.css
修改字体引用
修改header.php
修改文章元数据面板
修改tpl/content-thumb.php
修改页尾标签
修改footer.php
修改移动端左边栏
修改style.css
修复移动端左边栏问题
修改style.css
修改标题栏样式
修改style.css
和谐地移除皮肤切换按钮
修改style.css
修改主页和文章页面main-container样式
修改style.css
修复文章页面跳转菜单气泡问题
修改style.css
修复文章合集页面thumb气泡问题
修改style.css
宝塔面板自建前端库
宝塔面板有一个堡塔静态资源加速插件，以下功能均基于这个插件。简单阅读代码可以知道宝塔对所有静态资源都没有写死链接，所以对宝塔不推荐使用sub_filter。
转到插件的目录/www/server/panel/plugin/static_cdn
删除hosts.json里的所有内容，只留[]
将url_file.pl修改为你的前端文件域名（不带https前缀）
我用的是自己修改的深色模式静态文件，将
x.jscdn.host/release/ucode-x/source/moegato/btstatic填在url_file.pl即可使用，宝塔面板更新时这个前端库不保证当天更新
当前支持7.7.0、7.8.0、7.9.0
点击修复插件即可切换回原来的宝塔前端
若ucode暂时故障，可使用SSH等工具直接删除/www/server/panel/plugin/static_cdn/url_file.pl
使用NGINX反代+sub_filter实现动静分离
对写死了路径且不便修改源代码的应用，反代并使用sub_filter可以强行替换html文件中的路径。请注意，sub_filter不能替换写在css或js中的路径。
以GitLab示例，在反代部分配置文件中添加（以14.7.2版本为例，现在支持14.7.0和14.7.2版本）
proxy_set_header Accept-Encoding "";
sub_filter "<link rel=\"preload\" href=\"/assets/" "<link rel=\"preload\" href=\"https://x.jscdn.host/release/ucode-x/source/moegato/gitlab/14.7.2/public/assets/";
sub_filter "src=\"/assets/" "src=\"https://x.jscdn.host/release/ucode-x/source/moegato/gitlab/14.7.2/public/assets/";
sub_filter "<link rel=\"stylesheet\" media=\"print\" href=\"/assets/" "<link rel=\"stylesheet\" media=\"print\" href=\"https://x.jscdn.host/release/ucode-x/source/moegato/gitlab/14.7.2/public/assets/";
sub_filter_once off;即可基本实现GitLab的动静分离，GitLab的upload库和仓库上CDN比较复杂，这里不赘述，外网上应该有足够的教程。
其它使用nginx反代的软件也类似，不过各有少许不同，例如对http头有特别要求、路径写死在js中和索引中的http头被写死等，这里就不赘述了。
