1

欢迎来到我的第一篇文章。我已经搜索了一个小时的 stackoverflow 来找到我需要的 awnser，但没有成功。

我目前正在创建自己的网站来使用 processwire 和 bootstrap 测试 php。一般来说，我对编程很陌生，但我只有三周的 php/processwire 经验。我使用它是因为我得到了他们使用它的实习机会，我想在业余时间创建自己的项目以加快学习过程。

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

我的文件：

  • 地点
  • 资产
    • 较少的
      • 样式.less
  • 模板
    • _包括
      • _head.php
      • _foot.php
    • 主页.php
    • 基本页面.php

我试过了：

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

标题的一部分：

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

感谢您抽出时间来阅读。任何帮助表示赞赏。

4

1 回答 1

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

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

于 2021-02-07T01:35:49.803 回答