在日常的前端开发中，我们有时需要向 HTML 文件的 <head> 标签中动态添加代码，例如添加一些全局样式、脚本或元信息。如果你希望通过一个小工具来高效实现这个功能，可以借助 Flask 快速构建一个实用的解决方案。
下面，我将为大家分享一个基于 Flask 的 Python 小工具，通过简单的用户交互，向指定目录中的 index.html 或 index.htm 文件的 <head> 标签中添加代码。
这个小工具的功能主要包括：
<head> 标签中的代码片段。index.html 或 index.htm 文件。<head> 标签中插入代码。以下是完整的 Python 代码实现：
from flask import Flask, request, render_template_string
import os
app = Flask(__name__)
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>(127)添加代码到head</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #4CAF50;
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-size: 16px;
margin-bottom: 8px;
display: block;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin: 8px 0 16px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.message {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>(127)添加代码到HTML <head></h1>
<form method="POST">
<label for="file_path">文件路径(不含 index.html 或 index.htm):</label><br>
<input type="text" id="file_path" name="file_path" required><br><br>
<label for="code">请输入代码:</label><br>
<textarea id="code" name="code" rows="5" cols="40" required></textarea><br><br>
<button type="submit">添加代码</button>
</form>
{% if message %}
<div class="message">{{ message }}</div>
{% endif %}
</body>
</html>
"""
@app.route("/", methods=["GET", "POST"])
def add_code():
message = ""
if request.method == "POST":
dir_path = request.form.get("file_path")
code = request.form.get("code")
if not os.path.exists(dir_path):
message = "错误: 目录未找到."
else:
index_html = os.path.join(dir_path, "index.html")
index_htm = os.path.join(dir_path, "index.htm")
if os.path.exists(index_html):
file_path = index_html
elif os.path.exists(index_htm):
file_path = index_htm
else:
message = "错误: 目录中未找到 index.html 或 index.htm 文件."
return render_template_string(HTML_TEMPLATE, message=message)
try:
with open(file_path, "r", encoding="utf-8") as f:
content = f.read()
if "<head>" not in content:
message = "错误: 未找到 <head> 标签."
else:
new_content = content.replace("<head>", f"<head>\n{code}")
with open(file_path, "w", encoding="utf-8") as f:
f.write(new_content)
message = "代码已成功添加到 <head> 标签."
except Exception as e:
message = f"错误: {e}"
return render_template_string(HTML_TEMPLATE, message=message)
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)pip install flask。将代码保存为 app.py 文件，运行以下命令启动服务：
python app.py打开浏览器，访问 http://127.0.0.1:5000，即可看到如下界面：
index.html 或 index.htm）。<head> 标签中的代码片段。index.html，还可扩展到其他类型的文件。通过这篇教程，你可以快速实现一个小型工具，满足开发中的需求。如果你有更好的创意或需求，可以继续完善这个工具，让它更加强大！
