PHP + Slim PHP 框架：如何动态添加样式表到文档头部？

Question

我创建了一个简单的超薄应用程序，其中包含登录表单、仪表板、注册页面和帐户页面。每个页面都有自己的路由。所有页面都使用相同的页眉和页脚，分别在每个页面模板的开头和结尾添加 <?php include __DIR__ . '/header.phtml' ?> 和 <?php include __DIR__ . '/footer.phtml' ?>，页面内容位于两者之间。

我想根据查看的页面动态包含不同的样式表，但我不想懒惰地将它们放在我的 .phtml 文件中并让它们呈现在网页中间。

我想开发一些 if/switch 函数放置在 header.phtml 文件中，该文件识别当前路由并将 link 呈现到适当的样式表。类似于下面的代码，放在文件头中：

<?php
if($currRoute === "/dashboard") {
  ?>
  <link rel="stylesheet" type="text/css" href="assets/css/dashboard.css">
  <?php
} else if($currRoute === "/register") {
  ?>
  <link rel="stylesheet" type="text/css" href="assets/css/register.css">
  <?php
} else if ($currRoute === "/account") {
  ?>
  <link rel="stylesheet" type="text/css" href="assets/css/account.css">
  <?php
}
?>

在没有复杂的正则表达式、任何其他语言、class 库等的情况下，是否有任何解决方案可以在上面的示例中获取 $currRoute 的值？

Answer 1

我没有尝试检索当前路由，而是在每个路由回调中创建了一个包含路由名称的字符串变量，然后将该名称作为参数传递给渲染器（在这种情况下，我使用的是 Slim 的 php-查看包）。下面是一个示例，将字符串 "dashboard" 作为参数传递给 dashboard.phtml 模板文件：

$app->get('/dashboard', function (Request $request, Response $response, array $args) {
  $args['pageTitle'] = "dashboard";
  return $this->renderer->render($response, 'register.phtml', $args);
});

根据路由名称，$args['pageTitle'] 键被分配了一个字符串形式的关键字标识符。

然后，在我的 header.phtml 文件中，我创建了一个 switch 语句，它将 $args['pageTitle'] 的值与一组硬编码字符串进行比较，以确定要加载的适当样式表：

<head>
  <title>Slim 4 PHP Template</title>

  <?php
    if(isset($pageTitle)) {
      switch($pageTitle) {
        case "dashboard":
          echo "<link rel='stylesheet' type='text/css' href='assets/css/dashboard.css'>";
          break;
        case "register":
          echo "<link rel='stylesheet' type='text/css' href='assets/css/register.css'>";
          break;
      }
    }
  ?>
</head>

访问位于“http://example.domain.com/dashboard”的路由时，会呈现 link 到适当的样式表，如下所示：

<head>
  <title>Slim 4 PHP Template</title>

  <link rel="stylesheet" type="text/css" href="assets/css/dashboard.css">
</head>

PHP + Slim PHP 框架：如何动态添加样式表到文档头部？

PHP + Slim PHP Framework: How to dynamically add stylesheets to the document head?

php

html

css

dynamic

slim