如何获取HTML文档以引用其他HTML文档中的“页眉”和“页脚”元素？

Question

Whilst I'm coding I'd like to be able to see the HTML I've created, for example, I have a index.html which refers to a header navigation file. 在编码的同时，我希望能够看到自己创建的HTML，例如，我有一个index.html ，它引用标题导航文件。

Using jQuery , I can get this to work on the server side but I want it to work locally as well but I heard current versions of browsers have security which prevents it from working with local files. 使用jQuery ，我可以使它在服务器端工作，但我希望它也可以在本地工作，但是我听说当前版本的浏览器具有安全性，从而无法使用本地文件。

Does anyone know of a browser or a setting or an alternative that will allow the reuse of HTML linkages to work locally as well as on the server side? 有谁知道浏览器或设置或替代方法可以使HTML链接的重用在本地以及服务器端正常工作？

The code below (obtained from this answer ) only works on the server side. 以下代码（从此答案获得）仅在服务器端有效。

<html>
<head>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("#header").load("header.html"); 
      $("#footer").load("footer.html"); 
    });
  </script>
</head>
<body>
  <div id="header"></div>
  <!-- remaining section -->
  <div id="footer"></div>
</body>
</html>

Surely there's a better way that'll allow me to see my <header /> and <footer /> elements without having to deploy to the server after every update. 当然，有一种更好的方法可以让我看到我的<header />和<footer />元素，而不必在每次更新后都部署到服务器。

Sometimes I just want to test changes in navigation without deploying. 有时我只想测试导航中的更改而不进行部署。

Answer 1

TL;DR: It really depends on the language you want to use. TL; DR：这实际上取决于您要使用的语言。

JavaScript: JavaScript：

The simplest way to create a static HTTP server is by using Express.js : 创建静态HTTP服务器的最简单方法是使用Express.js ：

var express = require("express");
var app = express();
app.use("/", express.static("dist"));
app.listen(3000, function () {
  return console.log("Express: Listening on port 3000.");
});

Save that code in a *.js file, run it using node filename.js and visit localhost:3000 in your web browser. 将该代码保存在*.js文件中，使用node filename.js运行它，然后在Web浏览器中访问localhost：3000 。

If you don't have express installed, run the following command in your terminal: 如果尚未安装Express，请在终端中运行以下命令：

npm install -g express

NOTE: If you don't have node or npm installed you can install them by following the download instructions on the project's official website . 注意：如果您没有安装node或npm ，则可以按照项目官方网站上的下载说明进行安装。

Python(3): Python（3）：

The Python standard library comes a module called http.server which you can use to create a virtual host for your project. Python标准库带有一个名为http.server的模块，您可以使用该模块为您的项目创建虚拟主机。

First you'll have to cd into your project directory, like this: 首先你必须cd到你的项目目录，如下所示：

cd ~/path/to/your/project

Then run the following command: 然后运行以下命令：

python3 -m http.server

When you're done, open your web browser and visit localhost:8000 . 完成后，打开Web浏览器并访问localhost：8000 。

If you'd like to change the port you can use the following command: 如果要更改端口，可以使用以下命令：

python3 -m http.server 7000

Warning: http.server is not recommended for production because it only implements basic security checks. 警告：不建议将http.server用于生产，因为它仅实现基本的安全检查。

Python(3) Flask: Python（3）烧瓶：

If you'd like to go all out and use back-end a web framework, you could create a Flask app by saving the following code in a *.py file: 如果您想全力以赴并使用后端Web框架，则可以通过将以下代码保存在*.py文件中来创建Flask应用：

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello_world():
    return render_template("./path/to/your/template.html")

app.run(debug = True, port = 8000)

Then run the script using python3 filename.py and visit localhost:8000 in your web browser. 然后使用python3 filename.py运行脚本，并在Web浏览器中访问localhost：8000 。

If you don't have Flask installed you can install it via Pip using: 如果您没有安装Flask，可以使用以下方法通过Pip安装它：

pip3 install flask

Or you can install it via the apt package manager (if you're on Ubuntu or Debian), like this: 或者，您可以通过apt软件包管理器进行安装（如果您使用的是Ubuntu或Debian），如下所示：

sudo apt install python3 python3-pip

PHP: PHP：

If you're using PHP, you'll have to install a lamp server and the simplest way to install this is to use tasksel , like this: 如果您使用的是PHP，则必须安装一个灯泡服务器，最简单的安装方法是使用tasksel ，如下所示：

sudo apt update && sudo apt upgrade
sudo apt install tasksel
sudo tasksel install lamp-server

I don't know what language or OS you're using (and to be honest I can't keep guessing) so instead of writing a detailed answer as to how to install a LAMP server , I'll add a link instead, I'll also link a tutorial on how to install a virtual host . 我不知道您使用的是哪种语言或操作系统（老实说，我无法一直猜测），所以我不会写一个有关如何安装LAMP服务器的详细答案，而是添加一个链接，还将链接有关如何安装虚拟主机的教程。

INFO: How do I ask a good question? INFO： 我怎么问一个好问题？ . 。

Good luck. 祝好运。

如何获取HTML文档以引用其他HTML文档中的“页眉”和“页脚”元素？

问题描述

1 个解决方案

解决方案1
0 2019-05-10 17:27:56

JavaScript: JavaScript：

Python(3): Python（3）：

Python(3) Flask: Python（3）烧瓶：

PHP: PHP：

如何获取HTML文档以引用其他HTML文档中的“页眉”和“页脚”元素？

问题描述

1 个解决方案

解决方案1 0 2019-05-10 17:27:56

JavaScript: JavaScript：

Python(3): Python（3）：

Python(3) Flask: Python（3）烧瓶：

PHP: PHP：

解决方案1
0 2019-05-10 17:27:56