问题

Question

我有静态HTML文件，每个文件如下所示。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
    p {
        width: 100px;
    }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>
</head>
<body>
    <div id="accordion">
        <h1>Chapter 1</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
        <h1>Chapter 2</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
    </div>
</body>
</html>

因为

    <meta charset="utf-8" />
    <style type="text/css">
    p {
        width: 100px;
    }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>

是常用代码，我想将其解压缩并放入名为common.html的新文件中。

问题

我尝试使用common.html标记加载link，但会产生奇怪的输出。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="import" href="common.html"/>
</head>
<body>
    <div id="accordion">
        <h1>Chapter 1</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
        <h1>Chapter 2</h1>
        <p>dul tank ksk sk skek kejk jk sk sksjk sdsfkdsfs ai nvnei kdsfue v sjksfspas ksdsjkfs fsakd;afksajf;akd fa</p>
    </div>
</body>
</html>

加载的正确方法是什么？

Answer 1

您只能通过这种方式链接来包含HTML代码。

如果你想拥有一个管理你网站的模板引擎，可以选择像Jekyll这样的平面网站生成器，使用Ruby on Rails或Symfony这样的框架，或者自己推出（使用php），例如）。

Answer 2

查看杰基尔。它是一个静态网页生成器。 https://jekyllrb.com/

如何从HTML中加载外部文件？

问题

2 个答案: