苦恼好几天了,不知道如何根据模板template.html优雅的生成美观的静态 HTML,无奈最后选择 Jinja2进行后端渲染,只能凑合用吧?效果:
就简单演示一下吧。
1. 编辑前端模板页面
这里为了演示,就简单也一个意思一下, 大家根据根据需要编写自己的逻辑。template.html如下:
<!DOCTYPE html>
<html align='center' lang="en">
<meta http-equiv="Content-Type"content="text/html;charset=gb2312">
<h1> PaperClub Web报告模板 </h1>
<body>
<h2> 文献查重Web报告模板 (<a href="http://infersite.com/#/home"> paperClub </a>)</h2>
<p> 查重平台 : PaperClub 报告时间 : {{create_time}} </p>
<p> 检测结果 : {{state}} 重复比率:{{rate}} </p>
<h2>详细信息(demo)</h2>
<table border="1" width = "40%" cellspacing='0' cellpadding='0' align='center' bgcolor="#6495ed">
<tr>
<th>论文题目</th>
<th>论文作者</th>
<th>论文字数</th>
<th>重复字数</th>
<th>重复比率</th>
</tr>
{% for item in data %}
<tr align='center'>
<td>{{ item.title }}</td>
<td>{{ item.author }}</td>
<td>{{ item.total_num }}</td>
<td>{{ item.dup_num }}</td>
<td>{{ item.rate }}</td>
</tr>
{% endfor%}
</table>
<h2>图片显示</h2>
{% for item in data %}
<p> {{item.title}} 检测结果【 {{item.state}} 】, 查重比率【 {{ item.rate }} 】</p>
<a name="{{ item.image_path }}"> <img src="{{ item.image_path }}" width="640"></a>
<br>
{% endfor%}
</body>
</html>
2. Jinja2后端渲染
app.py:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @ Date : 2023/1/27 14:46
# @ Author : paperClub
# @ Email : paperclub@163.com
# @ Site :
from jinja2 import Environment, FileSystemLoader
def jinja2html(data, state, rate, create_time):
env = Environment(loader=FileSystemLoader('./'))
template = env.get_template('template.html')
with open("result.html", 'w') as fout:
html_content = template.render(state=state,
rate=rate,
create_time=create_time,
data=data)
fout.write(html_content)
if __name__ == "__main__":
data = []
result = {'title': 'xxx的研究', 'author': '张三',
'total_num': "10000", 'dup_num': "28",
'state': "合格", 'rate': "0.28%",
'image_path': "img.png"}
data.append(result)
jinja2html(data, result.get('state'), result.get('rate'), '2023-01-05 15:33 44')
app.py 和template.html放在同一目录下, 运行后输出 result.html文件 。
输出的result.html: