HTML 中的 CDN 参考答案

【问题标题】：CDN Reference in HTMLHTML 中的 CDN 参考
【发布时间】：2018-06-03 22:38:54
【问题描述】：

我有多个具有相同标题的网页：

<link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b- 
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc- 
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl- 
1.2.5/datatables.min.css"/>

<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"> 
</script>
<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"> 
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip- 
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5- 
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr- 
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>

由于这些引用随时间而变化，我想将此代码嵌入到 1 个 html 页面中，然后在多个网页中引用该页面。这似乎比进入 20 个 html 文件并根据需要手动更新要容易得多。

我四处搜寻，但找不到可能是显而易见的答案。有没有办法通过“包含”语句来做到这一点？

非常感谢任何帮助！！！！

【问题讨论】：

标签： html include cdn

【解决方案1】：

第一个问题，您使用什么框架/语言来开发您的网站？您正在尝试做的实际上是创建网页设计模板。

例如在html和php中，

    <html lang="en">


    <!-- Top Bar  -->
    <?php require 'TopBar.php';?>

    <!-- Main Navigation + LOGO Area -->
    <?php require 'MainNavigation.php';?>
    <!-- Banner -->
    <header class="flat-header"> 
      <!-- Banner Content-->
      <div class="header-content">
        <div class="header-content-inner">
          <h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
            </span></h1>

          <!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
            <!--It’s the thing that runs our business.</span></h1>-->

          <div class="konnect-button-1 animated bounceIn"><a href="about-us.html" style="    border: none;">Read More</a></div>
        </div>
      </div>
    </header>
    <!--Top Call to Action-->
    <?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>

TopBar.php

<?php
/**
 * Created by PhpStorm.
 * User: Marcia
 * Date: 23/5/2017
 * Time: 10:03 PM
 */
include 'var.php';
echo'

<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>

<!-- Title -->
<title>SG  </title>

<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />

<!-- Main CSS -->

<link href="css/default.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<!-- Body -->
<body>

<!-- Pre Loader -->
<div class="loading">
  <div class="loader"></div>
</div>




<div class="konnect-info">
  <div class="container">
    <div class="row">
      <!-- Top bar Left -->
      <div class="col-md-6 col-sm-8 hidden-xs">
        <ul>
          <li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
          <li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
        </ul>
      </div>
      <!-- Top bar Right -->
      <div class="col-md-6 col-sm-4">
           <ul class="konnect-float-right">
                <li class="li-last">
                   <a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                    <a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                   <a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
             </ul>
         </div>
    </div>

  </div> 
</div>

' //end of echo
?>

<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->

【讨论】：

谢谢。是的，我正在使用 html 和 php。
@Steve1754a 你可以看看w3schools.com/php/php_includes.asp
我将尝试设置一个嵌入 cdn 的 php 文件，然后在 html 中使用 php "require" 语句引用它。非常感谢！！
@Steve1754a 我附上了 TopBar.php 文件供您参考。顺便说一句，您需要在您的 apache 主机中设置将 html 文件作为 php 文件，然后在加载 index.html 文件时，将执行 require php 代码。
我也在尝试解决这个问题，但使用的是 PHP 类文件。您可以使用 curl 加载远程托管文件的内容吗？