如何解决头文件中的 CSS/less 仅适用于索引页
欢迎来到我的第一篇文章。我在 stackoverflow 上搜索了一个小时来找到我需要的 awnser，但没有成功。
我目前正在创建自己的网站，以使用 processwire 和 bootstrap 测试 PHP。一般来说，我对编程很陌生，但我只有三周的 PHP/processwire 经验。我使用它是因为我得到了他们使用它的实习机会，我想在空闲时间创建自己的项目以加快学习过程。
我在每个模板中使用了一个单独的页眉/页脚文件。我注意到我在头文件中导入的 CSS 仅适用于我的 home.PHP 模板，而不适用于我的其他模板。 header 中的 html/PHP 工作正常，只是 css 不起作用。
我的文件：
我试过了：
部分标题：
<?PHP namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<Meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?PHP echo $page->title; ?></title>
<Meta name="description" content="<?PHP echo $page->summary; ?>" />
<!-- MDB icon -->
<!-- <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
<!-- Material Design Bootstrap -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
<!-- Your custom styles (optional) -->
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
</head>
<body>
页脚的一部分
</footer>
<!--/.Footer-->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="site/assets/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJfdroafW" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="site/assets/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="site/assets/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="site/assets/js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript" src="site/assets/js/main.js" ></script>
<!-- Import less file -->
<script type="text/javascript" src="/site/assets/js/less.js" ></script>
</body>
</html>
模板 home.PHP
<?PHP include('./_includes/_head.PHP'); // include header markup ?>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--Test columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Test columnn-->
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.4s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.6s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?PHP include('./_includes/_foot.PHP'); // include footer markup ?>
模板 basic-page.PHP
<?PHP include('./_includes/_head.PHP'); // include header markup ?>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--Test columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Test columnn-->
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.4s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.6s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?PHP include('./_includes/_foot.PHP'); // include footer markup ?>
感谢您花时间阅读本文。任何帮助表示赞赏。
解决方法
代替这个
<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?php echo $page->title; ?></title>
<meta name="description" content="<?php echo $page->summary; ?>" />
<!-- MDB icon -->
<!-- <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
<!-- Material Design Bootstrap -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
<!-- Your custom styles (optional) -->
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
</head>
<body>
改变
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
到
<?php include 'site/assets/less/styles.less'; ?>
这应该可行，并确保您有
<?php include '/path/to/header.php'; ?>
在你所有的文件中，至少对我有用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
