[英]How do I get a HTML document to refer to the “header” and “footer” elements in other HTML documents?
在编码的同时,我希望能够看到自己创建的HTML,例如,我有一个index.html
,它引用标题导航文件。
使用jQuery
,我可以使它在服务器端工作,但我希望它也可以在本地工作,但是我听说当前版本的浏览器具有安全性,从而无法使用本地文件。
有谁知道浏览器或设置或替代方法可以使HTML链接的重用在本地以及服务器端正常工作?
以下代码(从此答案获得)仅在服务器端有效。
<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>
当然,有一种更好的方法可以让我看到我的<header />
和<footer />
元素,而不必在每次更新后都部署到服务器。
有时我只想测试导航中的更改而不进行部署。
TL; DR:这实际上取决于您要使用的语言。
创建静态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.");
});
将该代码保存在*.js
文件中,使用node filename.js
运行它,然后在Web浏览器中访问localhost:3000 。
如果尚未安装Express,请在终端中运行以下命令:
npm install -g express
注意:如果您没有安装node
或npm
,则可以按照项目官方网站上的下载说明进行安装。
Python标准库带有一个名为http.server的模块,您可以使用该模块为您的项目创建虚拟主机。
首先你必须cd
到你的项目目录,如下所示:
cd ~/path/to/your/project
然后运行以下命令:
python3 -m http.server
完成后,打开Web浏览器并访问localhost:8000 。
如果要更改端口,可以使用以下命令:
python3 -m http.server 7000
警告:不建议将http.server
用于生产,因为它仅实现基本的安全检查。
如果您想全力以赴并使用后端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)
然后使用python3 filename.py
运行脚本,并在Web浏览器中访问localhost:8000 。
如果您没有安装Flask,可以使用以下方法通过Pip安装它:
pip3 install flask
或者,您可以通过apt软件包管理器进行安装(如果您使用的是Ubuntu或Debian),如下所示:
sudo apt install python3 python3-pip
如果您使用的是PHP,则必须安装一个灯泡服务器,最简单的安装方法是使用tasksel
,如下所示:
sudo apt update && sudo apt upgrade
sudo apt install tasksel
sudo tasksel install lamp-server
我不知道您使用的是哪种语言或操作系统(老实说,我无法一直猜测),所以我不会写一个有关如何安装LAMP服务器的详细答案,而是添加一个链接,还将链接有关如何安装虚拟主机的教程。
INFO: 我怎么问一个好问题? 。
祝好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.