2024年10月31日星期四

小技巧:在 Blogger 中禁止加载 .js 和 .css 元素,防止在中国网络下加载失败

在使用 Blogger 官方主题时,博客页面会加载数个 .js 和 .css 元素。这些元素在中国网络下都无法加载。

.js 元素包括:platform.js, *-widgets.js 等。而 .css 元素包括 *-css_bundle_v2.css, authorization.css。实际会影响功能和显示的主要是 *-widgets.js 和 *-css_bundle_v2.css 这两个元素。

可以使用以下方法禁用。

首先在管理界面选择 Theme - customize(右侧三角)- Edit HTML

禁用 .js 元素

<html> 标签内添加内容 b:js='false'。此时代码看上去是:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection'

之后,在 <head></head> 之间加入如下内容(来源

<b:if cond='data:view.isSingleItem'>
<meta http-equiv="Content-Security-Policy" content="script-src https://cdn.example.net; 'unsafe-inline' 'none'" />
</b:if>


上述代码的含义是,页面只允许加载来自 cdn.example.net 的 .js 元素。

这会导致一些功能失效,例如 gadgets 的 archive 会无法展开,以及评论功能会无法显示。

为解决这一问题,你可以在禁用前利用 F12 的 network 标签页查看并且下载 *-widgets.js 文件。例如我的 *-widgets.js 文件 URL 是 https://www.blogger.com/static/v1/widgets/2591855913-widgets.js

之后,把 .js 文件下载并上传/托管在一个可以在中国访问的域名上,得到其 URL 之后,在 HTML 代码中之间链接 .js 文件内容。在 <head> 和 </head> 之间加入一行 <script src="[link to the js file]" async></script>(其中 [link to the js file] 需要被取代为 .js 文件的 URL)。例如,

<head>
...
<script src="https://files.catbox.moe/079ys6.js" async></script>
...
</head>

同时,需要确保在上述内容安全策略标签内加入 .js 文件托管的域名,负责 .js 文件不会加载。

<meta http-equiv="Content-Security-Policy" content="script-src https://files.catbox.moe; 'unsafe-inline' 'none'" />
</b:if>

禁用 .css 元素

你可以在 <html> 标签内添加内容 b:js='false'。此时代码看上去是:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:js='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection'

这会导致页面显示不正常。一个修复办法是,你可以将 bundle css 的内容复制后加入到 html 代码中。在 <head> 和 </head> 之间另起一行,加入 <style> 和 </style> 标签,随后粘贴 css 文件中的内容。

怎么找到 bundle css 的 URL?在修改 HTML 禁用 css 加载之前,在博客页面加载时按下 F12 点击 network 标签页查看 css 文件的 URL,并在新标签页打开。对于我的主题,bundle css 的 URL 是:https://www.blogger.com/static/v1/widgets/3566091532-css_bundle_v2.css

此时代码看上去是:

<head>
...
<style>
# Paste the CSS content here
    html{height:100%}body{min-height:100%;_height:100%;position:relative}.content{position:relative;word-wrap:break-word}.content-outer,.region-inner{min-height:0;margin:0 auto}.columns{zoom:1}
...
<style>
...
</head>

保存后,页面就能正常显示,而且不依赖托关于 Google 域名的 css 文件了。

台湾央行行长:特朗普政府不太可能对台实施经济惩罚

路透社:台湾中央银行行长杨金龙于11月14日表示,他怀疑即将上任的美国总统唐纳德·特朗普的政府会对台湾实施惩罚措施,理由是台湾在半导体产业中扮演着关键角色。尽管特朗普曾指责台湾抢走了美国的芯片业务,并提议对进口商品征收高额关税,杨金龙强调,台湾制造的半导体和科技产品对美国供应链具...