如何正确链接 CSS 文件与 PHP 页脚和页眉答案

【问题标题】：How to properly link CSS files with PHP footer and header如何正确链接 CSS 文件与 PHP 页脚和页眉
【发布时间】：2016-11-04 10:04:58
【问题描述】：

所以我最近发现了如何使用 php 包含在我的每个文件中包含页脚和页眉，以避免将所有页眉/页脚代码复制粘贴到每个文件中。但是假设我有一个footer.php、header.php、home.php和about.php

在 header.php 或 home.php 和 about.php 中是否有我的标题、打开的 html/body 标记等。

//header.php
<html>
   <head>
      links to header.css
      links to home.css
      links to about.css
   </head>
   <body>

//home.php
<?php include("header.php"); ?>  //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
   </body>
</html>

我应该怎么做才能解决这个问题？我想到的一种方法是删除 header.php 文件的开头部分（html，head，title）并将其移至 home.css 和 about.css，以便它们每个都有自己的 css 链接。

【问题讨论】：

这是 HTML 101 的东西。标头相关代码属于<head></head>。标记标签属于<body></body>。
在页眉开始您的 html 文档和正文（如果需要）在显示内容的正文和在页脚关闭 html、正文标签
你能把我链接到它说与标题相关的代码应该在中的地方吗？通过标题相关，我说的是徽标和导航。我敢肯定这会进入身体。 @Fred-ii-
@MancharyManchaary 我知道该怎么做，但我的问题是关于我使用包含时的问题。在我的头文件中，我启动了我的 html 文档和正文。然后我将这个头文件包含在我的主文件中。但是，这意味着我必须在 header 中链接 home.css，因为头文件启动 html 和 body。通过这样做，每个包含头文件的文件都会固有地应用 home.css 文件
@Justin 在您的header.php 中您可以使用$_SERVER['REQUEST_URI'] 之类的内容来了解header.php 在哪个页面上，这将使您能够使用if/else 来包含不同类型的*.css 文件，正是该页面所需要的。例如，$_SERVER['REQUEST_URI'] == '/' 是主页，$_SERVER['REQUEST_URI'] == '/about' 是 about 页面等。您可以根据header.php 的页面为echo 的css 链接创建一个php 函数：function getStyles() 并使用@987654335 @ 包含不同类型的 css 文件。

标签： php html css

【解决方案1】：

你在正确的轨道上。将样式表和 javascript 分解为其他 php 文件和 include 它们。所以所有页面都具有以下结构。

home.php

<?php $this_page = "home.php"; 
      include "template.php";

对于其他页面，只需替换 $this_page 变量即可。所有页面共有的结构其实就是模板。

template.php

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <!-- CSS-->
        <?php include "stylesheets.php" ?>
    </head>
    <body>
        <!-- common header -->
        <?php include "header.php" ?>

        <section>
            <!-- PAGE CONTENT HERE determined by $this_page value -->
            <!-- 'content_home.php', 'content_about.php'... have the content-->
            <?php include "content_$this_page" ?>
        </section>

        <!-- common footer -->
        <?php include "footer.php" ?>

        <!-- link javascript files -->
        <?php include "scripts.php" ?>
    </body>
</html>

从一页到下一页的唯一变化是$this_page 的值。它决定了在上面的模板中加载了哪些内容，也决定了要包含哪些 CSS 和 JS 文件。

stylesheets.php

<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live

//Link each page to its CSS file
$styles = [
    'home.php' => 'home.css',
    'about.php' => 'about.css',
    'contact.php' => 'contact.css',
];

?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>

您在scripts.php 中链接到的javascript 可以使用相同的方法。既然您的 HTML 已包含在离散模块中，那么您可以轻松地编辑网站的一部分，而不必担心另一部分会损坏。特别是我建议永远不要在一个 php 文件中打开标签并在另一个文件中关闭它，因为随着您的网站变得越来越大，这将是调试、维护和修改的噩梦。

关于路径： 请记住，当浏览器看到页面时，代替include "stylesheets.php" 和include "scripts.php"，它将完全按照原样看到该文件的回显内容。因此，在这些文件中，您希望路径为：

来自域根的绝对路径（最简单）
顶级php文件位置的相对路径（例如home.php）
只是文件名，如果它位于PHP's include PATH（默认情况下PHP在抛出错误之前查找内容的地方）

【讨论】：

对不起，我是 PHP 新手，我一直在重读你的解释，但我无法理解的部分是：“请注意，因为这个文件是在 template.php 中设置 $this_page 之后包含的，您可以根据 $this_page 的值更改包含的样式表。”我不确定我们为什么要包含我们所在的当前页面（）以及我们将如何更改样式表。
非常感谢您的编辑。除了一部分之外，我能够完全理解所有内容。您的 home.php 包含 template.php，其中包含 home.php 导致无限循环，那么您将在哪里获得每个网站的特定代码？
@Justin 你说得对，我在多个编辑周期中引入了一个错误。实际内容托管在content_home.php 中，这就是template.php 的正文标签之间包含的内容。更新了我的答案，它应该是固定的。
还要确保，在您的 stylesheets.php 下，您是否应该为 header.css 和 footer.css 添加另外 2 个链接？我看不出我们如何包含页眉和页脚的 .css
我会将我想要的 CSS 规则放在 common.css 的所有页面上。您可以在更多的 CSS 文件中分解这些规则，但我看不出有什么好处，因为您希望这些规则无处不在。

【解决方案2】：

底线是您的代码可访问且易于维护，我将有一个 head.php、header.php 和 footer.php 文件。在 head.php 中，如果您要连接到数据库，您可能希望包含您的 config.php 并且还包含所有 <html><head><title><link><script> 标签，您将在每个页面中包含您的 index.php 或 home.php

include('head.php');
include('header.php');

等等等等

【讨论】：

所以如果我有另一个页面，例如 about.php 并且它需要 about.css，我会在 head.php 中链接 about.css 吗？我认为这会导致某些元素意外地从不同的 .css 文件中设置样式的问题。或者我应该密切关注我的课程名称来解决这个问题吗？
我会密切关注类和 id，拥有一个或尽可能少的 css 文件，如果速度或 SEO 很重要，我会再次回到易于维护和尽量减少 http 请求。跨度>
您需要记住是否在 head.php 中打开 html 标签以在 footer.php 中关闭它们
嗯，我会小心在一个文件中打开标签并在另一个文件中关闭它。这使得调试代码非常困难，并且修改会很复杂。我宁愿在标签之间嵌套include 调用。这就是我构建自己页面的方式（有关详细信息，请参阅我的解决方案）。
解决方案总是有不止一种方法，我的逻辑是头总是在前，页脚总是在每一页的最后。

【解决方案3】：

对于header 和nav，您必须创建一个单独的文件，例如nav.php，其中仅包含nav 和您的site header 而不是<head></head>，并在后面包含它你的header.php。喜欢

//Home.php
<?php 
 include("header.php"); this will contain your head part mostly your .css and .js files
 include("nav.php"); This will only contain header and nav
 // home.php code goes here
?>

在下面使用code 将自动获取到您的根目录的路径。

<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>

然后像这样添加您的文件

 <link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">

【讨论】：

对不起，但我不确定您示例中的 header.php 的用途。如果我的 home.php 想要包含 home.css，header.php 是怎么做的呢？谢谢
如果你在header.php 中包含你的home.css，在你使用include('header.php') 之后，它会自动添加到你的home.phphome.php 顶部。
但是其他所有的 php 文件、xyz.php、abc.php 也可以访问 header.php 并且可能会被意外设置样式
所以不要在你不想要这个东西的其他 .php 文件的顶部包含include('header.php')。
您必须访问此站点以了解结构。 apaddedcell.com/…