Jinja2 Python脚本输出无法在浏览器显示，如何解决并嵌入主页面？

看起来你是把Python文件直接丢给浏览器了——这就是问题所在！浏览器没法直接执行Python代码，只能解析HTML、CSS和JS，所以才会要么问你怎么打开.py文件，要么直接显示源码。咱们一步步解决：

第一步：用Web服务器运行你的Python/Jinja2代码 #

你需要一个轻量级的Web框架来处理Python代码的执行和HTML模板的渲染，Flask是和Jinja2天生适配的选择，操作很简单：

1. 先安装Flask：

   pip install flask
   

2. 调整你的Python代码结构，比如创建一个app.py文件：

   from flask import Flask, render_template
   
   app = Flask(__name__)
   
   # 定义路由，访问根路径时渲染你的模板
   @app.route('/')
   def render_my_template():
       # 如果你的模板需要变量，在这里定义并传给render_template，比如：
       # user_data = {"name": "Nonoeelle", "course": "Homework"}
       # return render_template('your_template.html', data=user_data)
       return render_template('your_template.html')  # 替换成你的Jinja2模板文件名
   
   if __name__ == '__main__':
       app.run(debug=True)  # debug模式下修改代码会自动重启服务器
   

3. 把你的Jinja2模板文件放到一个名为templates的文件夹里（Flask会默认找这个目录），项目结构大概是这样：

   your_project/
   ├── app.py
   └── templates/
       └── your_template.html
   

现在运行python app.py，终端会输出类似Running on http://127.0.0.1:5000/的地址，把这个地址复制到浏览器里打开，就能看到渲染好的HTML页面了！

第二步：将渲染后的内容嵌入主HTML网页 #

这里分两种场景，推荐用第一种更优雅的方式：

场景1：主页面也是Flask模板（推荐） #

用Jinja2的模板继承或者模板包含功能：

• 如果你有一个主HTML（比如base.html），可以在里面预留内容块：

  <!-- base.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>主页面</title>
  </head>
  <body>
      <header>我的主页面头部</header>
      <!-- 预留的内容块，让子模板填充 -->
      {% block content %}{% endblock %}
      <footer>我的主页面底部</footer>
  </body>
  </html>
  

• 然后修改你的模板（your_template.html），继承主模板并填充内容块：

  {% extends 'base.html' %}
  
  {% block content %}
      <!-- 这里放你原来的模板内容 -->
      <h1>Hello, {{ data.name }}!</h1>
      <p>这是我的作业内容</p>
  {% endblock %}
  

这样访问服务器地址时，就会自动渲染出包含主页面结构的完整HTML了。

• 如果只是想把模板片段嵌入主页面的某个位置，也可以用{% include 'your_template.html' %}直接插入到主模板的对应位置。

场景2：主页面是静态HTML #

如果主页面是纯静态的（没有用Flask），可以先通过Flask渲染好HTML片段，保存成单独的HTML文件，然后在主页面里用iframe或者AJAX加载这个片段：

• 比如在Flask里添加一个路由，返回渲染后的HTML字符串，然后用AJAX请求这个路由，把结果插入到主页面的指定元素中；或者直接运行代码后把终端输出的HTML复制保存成文件，再用iframe嵌入。

总结一下核心问题 #

浏览器是客户端工具，只能解析前端代码，Python是服务器端语言，必须在服务器上运行生成HTML后，再把HTML发送给浏览器，浏览器才能显示内容——这就是你之前直接打开.py文件不行的原因。

内容的提问来源于stack exchange，提问作者Nonoeelle