わたかぜコウのはてなブログ

わたかぜコウのブログです！

HugoからDenoに変えてみて

開発 旧ブログ 個人サイトのブログのアーカイブ

旧ブログからのインポートです！ #Hugo

このページは2023-6-9のお知らせで実装したものの詳細です。 サイトジェネレータをHugoからDenoのlumeに変えてから、 個人的に超読みやすいものに変わったと思います！

詳しい解説

オーディオボタンをサンプルに挙げると、

{{- with .Page -}} {{- $title := "" -}} {{- $src := "" -}} {{- with (.Site.GetPage "/sound/music").Resources.GetMatch .Site.Params.setupSound -}} {{- $title = .Title -}} {{- $src = .RelPermalink -}} {{- end -}}
{{ partial "svg/audio/play" . }} {{ partial "svg/audio/pause" . }}
{{ partial "svg/audio/stop" . }}
{{ partial "svg/audio/loop" . }}
{{- end -}}

↓これが

#audio_box.playing(data-title=`${setupSoundData.title}`)
  audio#audio_player(src=`/music/${setupSoundData.src}` loop='')
  +linkStatic('/common/js/audio.js')
  div
    .audio.button.play(onclick='audio_play()')
      +linkSvg("/audio/play.svg")
      +linkSvg("/audio/pause.svg")
    .audio.button.stop(onclick='audio_stop()')
      +linkSvg("/audio/stop.svg")
    .audio.button.loop(onclick='audio_loop()')
      +linkSvg("/audio/loop.svg")
#audio_background

こんな感じになりました！！

たぶんすっごい伝わりづらいけど、どこがどうループしているのか、 if文などのブロックが定義されているかどうかが Hugoだとわかりづらかったのです。

それと恐ろしいことに、Hugoはhtmlファイルなのです。 内容はhtmlじゃない状態なのにhtmlファイルなのです。

それはもうコードの補助機能なんてものもないし、 ただ高速だったから使っていたようなものなのです…

それがなんということでしょう、Pugという書き方でめちゃくちゃ見やすくなったのです。 PugはJavascript(Deno)も動かすことができるので変数の内容も定義しやすく、 ネストによって階層を決定するPythonのような作りなので見た目的にもグッド！

Expressで知ったPugという記法がここで活かされてきたのです🐶

プログラムを根本から書き換えてるので他の変更点を挙げるときりがないのですが、 Hugoと比べて飛躍的に良くなったのは拡張性なのです！

というのも、DenoはサーバーサイドのJavascriptプログラムの一種で、 Node.jsをより使いやすくしたようなもので…（伝わりづらい）

たくさんの拡張機能があったり自作できたりとすごいのです！

もちろんこれらは上級者向けのプログラムだからできることというか… テンプレートから作るのであればたぶんどこも大差ないと思います。

もちろんぼくはカスタム関数などをいっぱい作ってます！

ここまで上級者向けの仕様にするならおすすめできる…みたいなやつなのでした！

気になる子にとって少しでも参考になれれば…！💻🐏

（（ 6 - ヮ-)∂ すやすや