如何在Wiki.js代码模式的HTML页面中加载CSS文件？

问题概述 #

• 使用最新版Wiki.js，在代码模式下编写包含CSS/JS的HTML页面
• 已将CSS文件上传至Wiki.js（示例路径：http://14.29.194.205:3080/1.css），但通过HTML的<link>标签引用时样式无法加载；直接将CSS代码粘贴到页面的<style>标签内则正常生效

可行解决方法 #

1. 核对引用路径准确性 #

确保CSS文件的引用路径无错误：

• 若文件存放在站点根目录，直接使用根相对路径：

  <link rel="stylesheet" href="/1.css">
  

• 若当前页面为子路径下的页面，需调整为对应相对路径（如../1.css），或直接使用完整的域名+文件路径。

2. 确认文件访问权限 #

上传的CSS文件需设置为公开访问：

• 直接在浏览器中访问CSS文件的URL，检查是否能正常打开并查看代码。若无法访问，进入Wiki.js的文件管理界面，修改该文件的权限为公开。

3. 适配Wiki.js的资源引用规则 #

Wiki.js对代码模式下的外部资源加载有安全限制，尝试使用内置资源引用方式：

• 上传CSS文件后，在Wiki.js文件管理中复制该资源的内部嵌入路径（通常格式为/assets/[资源ID]/文件名.css），替换到<link>标签的href属性中。

4. 调整内容安全策略（CSP） #

Wiki.js默认的CSP规则可能阻止外部资源加载：

• 进入Wiki.js管理后台→设置→安全→内容安全策略，在style-src规则中添加'self'，允许加载本站域名下的CSS文件。

5. 临时替代方案 #

若以上方法均无效，可继续使用<style>标签内嵌CSS代码的方式，该方式不受外部资源加载限制，能确保样式正常生效。

内容的提问来源于stack exchange，提问作者WXRLVY