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

【问题标题】：PHP + Slim PHP Framework: How to dynamically add stylesheets to the document head?PHP + Slim PHP 框架：如何将样式表动态添加到文档头部？
【发布时间】：2020-01-18 05:28:00
【问题描述】：

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

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

我想开发一些 if/switch 函数来放置在header.phtml 文件中，它可以识别当前路由并呈现指向适当样式表的链接。类似于下面的代码，放在文档头部：

<?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
}
?>

有没有什么办法可以在上面的例子中获取$currRoute的值，而不需要一些复杂的正则表达式、任何额外的语言、类库等？

【问题讨论】：

标签： php html css dynamic slim

【解决方案1】：

我没有尝试检索当前路由，而是在每个路由回调中创建了一个包含路由名称的字符串变量，然后将该名称作为参数传递给渲染器（在本例中，我使用的是 Slim 的 php-view 包）。下面是一个示例，将字符串"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”访问路线时，会呈现相应样式表的链接，如下所示：

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

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

【讨论】：