CSS/less 来自 header 文件仅适用于索引页

Question

欢迎来到我的第一个 post。我在 Whosebug 上搜索了一个小时以找到我需要的 awnser，但没有成功。

我目前正在创建自己的网站以使用 processwire 和 bootstrap 测试 php。总的来说，我对编程还很陌生，但我只有三个星期的 php/processwire 经验。我使用它是因为我在他们使用它的地方实习，我想在业余时间创建自己的项目以加快学习过程。

我正在使用导入到每个模板中的单独 header/footer 文件。我注意到我在 header 文件中导入的 CSS 仅适用于我的 home.php 模板，而不适用于我的其他模板。 header 中的 html/php 工作正常，只是 css 不工作。

我的文件：

站点
资产
- 更少
  - styles.less
模板
- _包括
  - _head.php
  - _foot.php
- home.php
- basic-page.php

我试过了：

改为 css 而不是 less
更改 css 使用 ../ 而不是 site/ 导入
正在将home.php的所有内容复制到basic-page.php中，看看是否问题出在模板中。

header的一部分：

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

感谢您抽出宝贵时间阅读本文。感谢您的帮助。

Answer 1

而不是这个

<?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'; ?>

在你的所有文件中至少对我有用。

CSS/less 来自 header 文件仅适用于索引页

CSS/less from header file only works on the index page

css

php

less

processwire

bootstrap-4

header的一部分：

页脚的一部分

模板home.php

模板basic-page.php

感谢您抽出宝贵时间阅读本文。感谢您的帮助。