时间戳

首页 > 解决方案 > 无法从路由加载 css

css - 无法从路由加载 css

问题描述

我正在使用 FatFree 框架。当我使用 F3 创建页面时，它工作正常。该页面加载了 css 和 js，外观漂亮。

/index.php

<?php

 $f3 = require('f3/lib/base.php');

 $f3->route('GET /post',
   function($f3) {
     echo \Template::instance()->render('./view/post.htm');
   }
 );

当我尝试加载具有特定 ID 的帖子时，页面看起来没有正确加载 css（混乱）。

$f3->route('GET /post/@id',
   function($f3,$params) {
     $postid = $params['id'];
     echo \Template::instance()->render('./view/post.htm');
   }
 )

/view/post.htm

<!DOCTYPE html>
<html lang="en">
  <include href="./template/head.htm" />
  <body>
    {{ post: $id }}
  </body>
</html>

/模板/head.htm

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="description" content="">

<!-- Document title -->
<title> Post </title>
<link rel="icon" href="./img/logo/logo-ftn-16x18.jpg" />

<!-- Stylesheets & Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,800,700,600|Montserrat:400,500,600,700|Raleway:100,300,600,700,800" rel="stylesheet" type="text/css" />
<link href="./css/plugins.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/responsive.css" rel="stylesheet">

<!-- Template color -->
<link href="./css/color-variations/orange.css" rel="stylesheet" type="text/css" media="screen">
</head>

谁能告诉我哪里出错了？

标签： cssrouting

解决方案

您引用 CSS 的位置错误。./意味着，您想从当前“文件夹”或您当前所在的路由中加载 css 内容。如果您打开“example.com/post/123”，浏览器会尝试从“example.com/post/123/css/style.css”加载您的 CSS。

将路径更改为/，这意味着 CSS 将从“example.com/css/style.css”加载。

另外：这与您使用的 PHP 框架无关。

推荐阅读