Question

所以我有一个header.php文件。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#header{background: url(images/bg-img.jpg); height:550px}
<style>
</head>
<body>

<div class="container">
<div class="row" id="header">

然后我的页面（index.php about.php contact.php）全部以header.php文件中的div结束开始。

<?php include('header.php');?>     


</div> <!-- end of "header" div -->
</div> <!-- end of "container" div -->

页面的其余部分以底部的页脚结尾。

我的问题是如何基于页面im动态加载标题的唯一背景颜色/图像？

使用另一种语言（例如react.js或其他语言）会更加基本吗？

Answer 1

你可以做这样的事情：

<强>的index.php

<?php
$page_bg_color = "#ff4500";
include(header.php);

etc.
?>

<强>的header.php

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="background-color:<?php echo $page_bg_color; ?>">

<div class="container">
<div class="row" id="header">

Answer 2

有很多方法可以做到这一点。您可以动态获取页面名称（例如，使用$_SERVER['REQUEST_URI']），也可以在您使用的每个脚本中定义变量。

所以你的标题会是..

<?php
$background = 'bg-img.jpg'; // Default background image 
                            // use this if $background is not set or does not have 
                            // a case in the switch below
if (isset($page)) {
    switch ($page) {
        case "contact":
            $background = 'bg-img-contact.jpg'; // Contact-page background
            break;
        case "about":
            $background = 'bg-img-about.jpg'; // About-page background
            break;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#header{background: url(images/<?php echo $background; ?>); height:550px}
<!-- rest of header --->

然后，在包含标题之前，您将在每个页面中分配$page。（include不是函数，不需要括号括起来。）

<?php 
$page = "contact";
include 'header.php';
?>     


</div> <!-- end of "header" div -->
</div> <!-- end of "container" div -->

Answer 3

使用另一种语言（例如react.js或者）会更加基本什么？

如果您打算暂时维护此应用程序，可以考虑引入一个框架。但我不会考虑为仅引入一个框架。如果您引入一个框架，您应该计划花一些时间来使用它，并依靠它的功能。根据我的经验，大多数框架将以与您在此处概述的完全不同的方式处理模板渲染。

我的问题是如何动态加载独特的背景基于页面的标题的颜色/图像？

我纯粹用CSS接近它。

您所使用的任何页面都可以加载自己的CSS并指定更具体的选择器，因此优先于您在header.php中指定的选择器：

<style>
    div.row#header {
        background: /* whatever */ ;
    }
</style>

您还可以添加!important以确保此规则具有优先级：

<style>
    #header {
        background: /* whatever */ !important;
    }
</style>

这些CSS样式将直接进入您的页面特定代码，或者加载到每个页面独有的单独CSS文件中。

有些人可能会抱怨有多个<style>标记，但在我看来，添加多个<style>标记比从自制的PHP解决方案中添加精神开销更好地放置CSS是正确的的地方。

根据页面（索引，关于，联系等）更改div的背景

3 个答案: