如何在页面中间使用 PHP 附加到 <head>？答案

【问题标题】：How to append to <head> with PHP in the middle of the page?如何在页面中间使用 PHP 附加到 <head>？
【发布时间】：2019-10-29 17:20:29
【问题描述】：

我有一个 HTML“块”代码，其中包含 HTML 和 JS，因此我可以轻松地将它包含在 PHP 中。我也希望它具有 CSS 样式，但根据标准，您不能“允许”这样做 - 虽然它可以工作，但它会使页面无效。 CSS 只允许在<head> 中使用，而不是在页面中间（至少在 HTML5.2 之前）。所以我考虑在头部附加名称相似但单独的 .css 文件，但使用 PHP 和 not JS（为了性能）

<head>
<!-- PHP needs to include button.css here AFTER $App->INC("button"); has been called -->
</head>

<body>
<?php
$App->INC("button");
//This basically does 'require_once("button")';
//What do I need to add to the INC method to include css file in the head?
//Similar to $("head").append() but with PHP
?>
</body>

应将同名的 css 文件添加到 <head> 部分。

附言：这似乎是一个设计缺陷，也可能是，但这是其背后的想法。

我有一段代码，当包含在 body 生成一个“加载屏幕”（或其他 UI 元素除了<body> 之外，不能/不应该嵌套在其他任何地方网站。
它的样式在一个单独的文件中
我发给其他用户
它们包含一个“App”类的方法，该方法只执行两个 things：包括文件本身和附近的css文件
然后他们只使用 1 行代码将其放在他们想要的位置，然后不在其他 2-3 个地方，因此代码更易于管理

例子：

【问题讨论】：

为什么不能在它应该在的地方添加css？您可以使用 php 制作动态 css 文件。
PHP needs to include button.css here AFTER $App->INC("button"); has been called - 为什么？为什么不直接使用 <link> 标签包含 CSS 文件？
@waterloomatt 这可能是一个设计缺陷，但我一直认为这样做会更好：调用 $App->INC("btn");在正文中一次并在方法中添加头部包含而不是调用 $App->INC("btn");然后还通过链接包含 css 它带有“模块化”的想法，因此我可以将这两个文件发送给需要它们的其他用户（例如加载屏幕），然后他们只需将其包含一次，而无需去其他地方也包括样式。当你需要去 2 个不同的地方启用一个“模块”/chunk 时，它就变成了某种版本的“地狱”
我不确定我是否正确理解您要归档的内容。对我来说，这听起来是这样的：您希望有一段代码将模块（或其他）添加到您的应用程序中，并且此模块将代码添加到 body 和 head。也许您的应用程序应该为您的模块提供将内容注入head / body 的功能。看看 WordPress 钩子系统的思路：wpsuperstars.net/wordpress-hooks
一种可能的方法是包含一个具有默认样式的default.css。然后用户可以在它下面添加一个custom.css 文件（在<head> 中），它将覆盖样式。例如，default.css 将具有 .button { color: blue; }，用户可以通过添加带有 .button { color: red; } 的 custom.css 文件来覆盖它。这样，用户可以简单地包含一个新的 CSS 文件，而不必自己自定义/覆盖 PHP 组件。只是一个想法。

标签： php html css head

【解决方案1】：

你可以试试这个：

<?php
ob_start();
$App->INC("button");
$button = ob_get_clean();
?>
<head>
<!-- Do your inclue here -->
</head>

<body>
<?= $button ?>
</body>

您可以将 ob_start() / ob_get_clean() 内容放入 button.php 并通过您的 INC() 方法返回内容。然后你可以将内容直接保存到$button，如下所示：$button = $App->INC("button");。

但是您的示例看起来像一个设计问题。不过我希望这能解决问题。

这可能是重新设计：

<?php

$App->loadModule('button'); // Loads the module, the module registers stylesheets and content.

$App->loadModule('another_module'); // Load more modules ...

<head>
<?php $App->renderModuleStylesheets(); ?>
</head>

<body>
<?php $App->renderModuleContent(); ?>
</body>

【讨论】：

这与我正在寻找的内容很接近，但这仍然需要我在两个不同的地方（<body> 标记和缓冲区）编写包含代码。理想情况下，我想摆脱缓冲区代码或将其包装在 $App 类中，但缓冲区命令也是位置敏感的。

【解决方案2】：

如果您将 CSS 直接包含在组件本身中，或者希望组件动态加载相关的 CSS，那么维护或自定义可能会非常困难。我并不是说你不应该走这条路，但要小心让你的组件做太多事情。

cmets 中指出的钩子系统是处理此问题的一种方法。

另一种简单的方法是提供用户可以覆盖的默认样式。这可能是允许为每个组件设置不同样式的最简单方法。

<head>
<!-- Provide some defaults. Users should not customize this one. -->
<link rel="stylesheet" type="text/css" href="default.css">

<!-- User's can customize this file to override the default styling.-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>

<body>
<?php $App->INC("button"); ?>
</body>

button.php - 只负责渲染一个按钮。单独的 CSS 文件实际上会设置它的样式。

<?php
echo <input type"submit" class="button" value="Submit">

default.css - 应用默认样式

.button {
    color: blue;
}

custom.css - 覆盖默认样式

.button {
    color: red;
}

最后注意，您可能还想研究使用子视图继承的主模板文件。这有助于减少链接到 CSS 文件的完整 HTML 文件的数量。这个想法是让视图将自己注入到 1 个（或几个）模板文件中。这是一些伪代码。

frontend.php

<html>
<head>
<!-- Links to CSS files here. -->
</head>

<body>
<?php $placeholder('body'); ?>
</body>

Login.php

<?php inherits('frontend.php')->body; ?>
<form id="login">
...

Register.php

<?php inherits('frontend.php')->body; ?>
<form id="register">
...

关于我们.php

<?php inherits('frontend.php')->body; ?>
<p>About Us</p>
...

【讨论】：

这是另一个不错的选择，某种模板引擎。但是，干燥并使用twig.symfony.com 或任何其他好的模板引擎。