サンプルページ
こちらが今回作成したサンプルページになります。
Pythonサンプルページ | ONE NOTES
サンプルコード
HTML
{% ％｝で括った出力タグを簡単なHTMLの中に置いておきます。
個人開発のWEBなので、Python用の出力タグは「#site_title」とかでもなんら支障なくて良かったと思いますが、やりたいことがPythonで人気フレームワークDjangoのテンプレート言語という機能に近かったので参考に寄せてみました。
template.html
<!DOCTYPE html>
<html lang="ja">
<title>{% page_title %} | {% site_title %}</title>
<link rel="stylesheet" href="style.css" />
</head>
<div id="header">
{% header %}
<div id="contents">
{% contents %}
<div id="sidebar">
{% sidebar %}
<div id="footer">
{% footer %}
</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()に関してはこちらもどうぞ。
キー名「contents」の値を{% contents %}と入れ替える。
index.pyを省略する場合は、こちらもどうぞ。
https://1-notes.com/python-for/