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を書けば、その記事では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を使えば簡単に計算フォームを作れてしまうのでいいかなと思います。

記事の共有

コメント

comments powered by Disqus