头文件中的 CSS/less 仅适用于索引页面

Posted

技术标签:

【中文标题】头文件中的 CSS/less 仅适用于索引页面【英文标题】：CSS/less from header file only works on the index page 【发布时间】：2021-05-10 21:50:34 【问题描述】：

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

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

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

我的文件：

网站 资产 少 styles.less 模板 _包括 _head.php _foot.php home.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>

模板主页.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" >
                            <!--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" >
                        <!--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" >
                        <!--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" >
      
                        <!--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

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

感谢您抽出宝贵时间阅读本文。任何帮助表示赞赏。

【问题讨论】：

【参考方案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'; ?>

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

【讨论】：

这行得通，我很震惊atm。主要是因为链接方法似乎确实适用于另一个项目。也许有一个插件在玩什么的。谢谢你的帮助，我真的很感激。

以上是关于头文件中的 CSS/less 仅适用于索引页面的主要内容，如果未能解决你的问题，请参考以下文章

iOS：didSelectRowAt 索引路径仅适用于第二次点击

角度表中的过滤仅适用于当前页面

复选框（Icheck）限制不适用于数据表中的其他页面，仅适用于第一页

复选框仅适用于 jQuery 数据表中的当前分页页面

我的 foreach 仅适用于第一个实例 [重复]

MongoDB 索引文本搜索仅适用于完全匹配