Question

我有一个50页的网站。我有一个header.html我包含在每一页上。在标题中我链接到我的外部CSS，并且页脚的计数相同，除了这里的链接是外部JS。

但我的一些网站需要使用特定的CSS和JS，我还没有实现。如果我在头文件中包含它，这意味着我的所有页面都加载了一个外部CSS或JS文件，我认为这不是很好吗？

有没有办法我只能在几页上调用脚本，而不在header.html或footer.html中设置它？

了header.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Bootstrap core CSS -->
        <link href="resources/library/bootstrap/bootstrap.min.css" rel="stylesheet">               <!-- ok -->
        <link href="assets/css/core/theme.css" rel="stylesheet">                                   <!-- ok -->
        <link href="resources/library/bootstrap/bootstrap-reset.css" rel="stylesheet">             <!-- ok -->
        <!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->

        <!--external css-->
        <link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" />            <!-- ok -->
        <link rel="stylesheet" href="resources/library/flexslider/css/flexslider.css"/>           <!-- ok -->
        <link href="resources/library/bxslider/jquery.bxslider.css" rel="stylesheet" />            <!-- ok -->
        <link rel="stylesheet" href="assets/css/core/animate.css">                                 <!-- ok -->
        <link rel="stylesheet" href="resources/library/owlcarousel/css/owl.carousel.css">          <!-- ok -->
        <link rel="stylesheet" href="resources/library/owlcarousel/css/owl.theme.css">             <!-- ok -->

        <link href="resources/library/superfish/css/superfish.css" rel="stylesheet" media="screen"> <!-- ok -->
        <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> -->


        <!-- Custom styles for this template -->
        <link rel="stylesheet" type="text/css" href="assets/css/core/component.css">                     <!-- ok -->
        <link href="assets/css/core/style.css" rel="stylesheet">                                        <!-- ok -->
        <link href="assets/css/core/style-responsive.css" rel="stylesheet" />                           <!-- ok -->

        <link rel="stylesheet" type="text/css" href="resources/library/parallax-slider/css/parallax-slider.css" />     <!-- ok -->
        <script type="text/javascript" src="resources/library/parallax-slider/js/modernizr.custom.28468.js"></script>  <!-- ok -->
</head>

index.php
<body>
  <p> A lot of content</p>



<?php include 'resources/includes/footer.html';?>

footer.html

<div>
  <div>
   <p> A lot of content</p>
  </div>
</div>

    **<!-- *********  The Magnific popup script I only use on 2 sites:  *********-->**
    <script src="js/module/jquery.magnific-popup.js"></script>

    <!-- Scripts for all sites -->
    <script src="resources/library/bootstrap/jquery-1.8.3.min.js"></script>                              <!-- ok -->
        <script src="resources/library/bootstrap/bootstrap.min.js"></script>                                 <!-- ok -->
        <script type="text/javascript" src="resources/library/superfish/js/hover-dropdown.js"></script>      <!-- ok -->
        <script defer src="resources/library/flexslider/js/jquery.flexslider.js"></script>                   <!-- ok -->
        <script type="text/javascript" src="resources/library/bxslider/jquery.bxslider.js"></script>         <!-- ok -->

        <script type="text/javascript" src="resources/library/parallax-slider/js/jquery.parallax-1.1.3.js"></script>   <!-- ok -->
    <script type="text/javascript">
    $('.image-caption a').tooltip();

    $(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist-three').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });

            },

        };

        // Run the show!
        filterList.init();


    });

    $( document ).ready(function() {
       $('.magnefig').each(function(){
            $(this).magnificPopup({
                    type:'image',
                    removalDelay: 300,
                    mainClass: 'mfp-fade'
               })
        });
    });
    </script>
 </body>
</html>

示例：

我需要的这两个链接在一边。那些链接应该放在哪里？

<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->

Answer 1

有一个简单的方法在核心php中使用include在你的自定义页面中添加页眉和页脚。要在内容页面中添加额外的CSS添加

index.php没有额外的css

include('header.php');

<div>
content goes here
</div>

include('footer.php');

about.php with extra css

include('header.php');
<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->
<div>
content goes here
</div>

include('footer.php');

在几页上调用脚本

1 个答案: