HugoをBrythonに対応させてみる
2020/12/25 categories:Hugo| tags:Hugo, Brython|
Hugoで作成したホームページでBrythonを使えるようにしてみました。
Brythonで作成した計算フォーム
計算をクリックするとAとBに入力した値を足した値がA+Bに入力されます。
| 項目 | 値 |
|---|---|
| ボタン | |
| A | |
| B | |
| A + B |
記事のフロントマターに適用するpythonファイルのパスを書く
各記事ごとに使用するPythonファイルを指定するために記事を書いたマークダウンファイルのフロントマター部分にbrython_scriptsという変数を用意してbrython用のPythonファイルのパスを書くようにしました。本記事のフロントマターは下記のような感じです。
---
date: 2020-12-25T19:25:14+09:00
title: ""
categories: []
tags: []
brython_scripts: ["python/hugo_brython.py"]
---bodyタグにonload=“brython()“を追加する
bodyタグにonload=“brython()“を追加しました。現在使用中のテーマではbodyタグは下記のテンプレートファイルに記述しています。
HUGOフォルダ\themes\テーマ名\layouts\_default\baseof.htmlフロントマターにbrython_scriptsがある場合だけbodyタグにonload=“brython()“を含めるために下記のようにifで場合分けしました。
{{- if .Params.brython_scripts }}
<body onload="brython()">
{{ else }}
<body >
{{ end -}}bodyタグの最後にbrython.jsとPythonファイルのパスを追加する
htmlではscriptを書く部分はbodyタグ内の最後が良いらしいので、それにならって記述しました。bodyタグは前述のbaseof.htmlファイルに記載していて、bodyタグの最後の部分は下記のように書いて、bodyタグ終了の直前にfooter.htmlというファイルを読み込むようにしています。
</div>
{{ partial "footer.html" . }}
</body>
</html>このfooter.htmlの最後に下記の記述を追加します。
{{- if .Params.brython_scripts -}}
<script type="text/javascript" src="/js/Brython-3.9.0/brython.js"></script>
{{- end }}
{{ if .Params.brython_scripts -}}
{{- range .Params.brython_scripts -}}
<script type="text/python" src="{{ . | absURL }}">></script>
{{- end -}}
{{- end -}}上記の記述では以下の二つのことをしています。
- フロントマターにbrython_scriptsがあれば/js/Brython-3.9.0/brython.jsを読み込む
- フロントマターにbrython_scriptsがあればbrython_scriptsのスクリプトをすべて読み込む
これでフロントマターにbrython_scriptsを書けば、その記事ではbrythonが使えるようになりました。
inputとbuttonを使ったbrython用のpythonコード
最初のほうに書いた計算フォームのコードは下記のとおりで、static/pythonにhugo_brython.pyというファイル名で保存しました。brythonの使い方についてはリファレンスを見てください。
import browser
def test_function(e):
a = browser.document["test_input1"].value
b = browser.document["test_input2"].value
c = browser.document["test_input3"]
c.value = float(a) + float(b)
button = browser.document["test_button"]
button.bind("click", test_function)所感
javascriptを書きなれていなくてpythonは書きなれているという場合にbrythonは役立つかもしれません。最近計算フォームを作成して公開していますが、javascriptを書きなれていないせいで、基本的な書き方の部分で戸惑ってしまいます。そんなときにbrythonを使えば簡単に計算フォームを作れてしまうのでいいかなと思います。