Citrusea

修复 july 主题在 edge 等浏览器上加载失败

日前采用 july 主题进行网站构建,偶然发现在 edge 和 chrome 等浏览器上存在无法加载 CSS 文件导致样式错误的情况,而在 Firefox 上加载正常。而两者在 hexo s 预览中样式均无法加载,于是尝试进行修复工作。

原因

按 F12 或者右键点击 检查 ,然后在弹出的界面里点击 控制器 可以看到一串显示错误:

The page at ‘https://citrusea.cc/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://citrusea.cc/css/markdown.css’. This request has been blocked; the content must be served over HTTPS.

大概就是他的 http 链接无法加载,必须转换成 https 才行。Firefox 之所以在编译后能正常显示,应该是我把他的 https - only 打开了,所以自动的转换成了 https 的链接。

方法一

通过在 layout 的文件里添加代码,实现打开时自动把链接都转换成 https 。
具体为:
在 <head> 中添加以下代码即可:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

方法二

直接手动把所有带有 http 的链接改为 https 。(较麻烦,不推荐)

2023-2024 Citrusea