Python | HTMLの中身をPythonで差し替える方法
テンプレートHTMLの中に組み込んだPython出力用タグを作ってHTML中にPythonの出力を実装するサンプルです。
簡単なWEBアプリを作るのに、PHPのようにHTMLと混合させやすい仕組みをフレームワークを使わずにPythonの機能だけで考えてみました。
実際は、PythonでテンプレートHTMLを読み込んで、Pythonタグの部分を書き換えて出力しているので少し表現が違うかもです。
サンプルページ
こちらが今回作成したサンプルページになります。
サンプルコード
HTML
{% ％｝で括った出力タグを簡単なHTMLの中に置いておきます。
個人開発のWEBなので、Python用の出力タグは「#site_title」とかでもなんら支障なくて良かったと思いますが、やりたいことがPythonで人気フレームワークDjangoのテンプレート言語という機能に近かったので参考に寄せてみました。
template.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>{% page_title %} | {% site_title %}</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
{% header %}
</div>
<div id="contents">
{% contents %}
</div>
<div id="sidebar">
{% sidebar %}
</div>
<div id="footer">
{% footer %}
</div>
</body>
</html>CSS
そのままだと文字だけになってしまうので、視覚的に最低限のCSSを当ててます。
style.css
body {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-rows: 100px 1fr 100px;
grid-gap: 2px;
grid-template-areas:
"head head"
"main side"
"foot foot";
}
#header, #contents, #sidebar, #footer{
font-weight: bold;
color:#666;
background:#d3d3d3;
padding:10px;
}
#header{
grid-area: head;
}
#contents{
grid-area: main;
height: 600px;
}
#sidebar{
grid-area: side;
}
#footer{
grid-area: foot;
display: grid;
justify-content: center;
align-items: center;
}Python
index.py
#!/usr/bin/python3
# coding: utf-8
# import
import cgitb,io,sys
# エラー表示
cgitb.enable()
#日本語用
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
#ヘッダー出力
print ("Content-Type: text/html; charset=UTF-8;\n\n")
# 置換えデータ作成（サンプル用）
page_data = {}
page_data['site_title'] = 'ONE NOTES'
page_data['page_title'] = 'Pythonサンプルページ'
page_data['header'] = '<h1>ONE NOTES</h1>'
page_data['contents'] = '<h2>'+ page_data['page_title'] +'</h2><p>Pythonを使って作成したサンプルページです</p>'
page_data['sidebar'] = '<p>サイドバー</p>'
page_data['footer'] = '<p>フッター</p>'
# template.htmlの読み込み
with open('template.html','r') as file:
html = file.read()
file.closed
# {% %}をpage_dataに置換え
for key, value in page_data.items():
html = html.replace('{% ' + key + ' %}', value)
#HTML出力
print(html)補足と簡単な説明
サンプルページを含めたテスト環境はWindows＆エックスサーバーです。
ファイルは全て同じディレクトリ階層にあります。
htmlファイルはopen()で読み込んでいます。
置換えは辞書型の配列データに入れたキーを置換えタグのキーと合わせていて、値を差し替えています。
items()に関してはこちらもどうぞ。
https://1-notes.com/python-for/キー名「contents」の値を{% contents %}と入れ替える。
index.pyを省略する場合は、こちらもどうぞ。