FatFree Framework中/post/@id路由无法正常加载CSS的问题排查

这是典型的相对路径资源加载错误，我来帮你拆解问题并给出修复方案：

为什么会出现这个问题？ #

当你访问 /post 路由时，浏览器的当前"基准路径"是网站根目录（比如 http://your-site.com/），所以模板里写的 ./css/style.css 会被浏览器解析为 http://your-site.com/css/style.css，能正确找到CSS文件。

但当你访问 /post/123（这里的123就是你的@id参数）时，浏览器会把当前基准路径识别为 http://your-site.com/post/，这时候 ./css/style.css 就会被解析成 http://your-site.com/post/css/style.css——而你的CSS文件根本不在这个路径下，自然加载失败，导致样式混乱。

修复方案（两种常用方法） #

方法1：改用根路径开头的绝对路径 #

直接把所有资源引用的路径改成以 / 开头，让浏览器从网站根目录开始查找资源：

修改 /template/head.htm 里的资源链接，比如：

<!-- 原相对路径 -->
<link href="./css/plugins.css" rel="stylesheet">
<link href="./img/logo/logo-ftn-16x18.jpg" />

<!-- 修改为绝对路径 -->
<link href="/css/plugins.css" rel="stylesheet">
<link href="/img/logo/logo-ftn-16x18.jpg" />

这样不管你在哪个路由下，浏览器都会去根目录的css/、img/文件夹找资源，不会出错。

方法2：使用FatFree框架的@BASE变量（更灵活） #

FatFree内置了@BASE变量，它会自动获取你的网站基础URL（适配根目录或子目录部署场景）。同样修改 /template/head.htm：

<link href="{{ @BASE }}/css/plugins.css" rel="stylesheet">
<link href="{{ @BASE }}/img/logo/logo-ftn-16x18.jpg" />

这种方法的好处是，如果以后你的网站部署在http://your-site.com/blog/这样的子目录下，不需要手动修改所有资源路径，框架会自动处理。

验证修复 #

修改完后，访问 /post/@id 路由，打开浏览器开发者工具（F12），查看"网络"标签，确认CSS、JS等资源的请求路径正确，没有404错误，样式就能正常加载了。

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