Hugo ノウハウ

Hugoの静的サイトを使ってみたが思ったよりなかなかうまく動いてくれません。色々なノウハウを持っていますので忘れないうちにこちらのブログに残したいと思います。

Add a Formspree Form to Your Static Sites Hugo

Hugoでお問合せフォーム

私はFormspreeの問合せメールフォームができるサービスを使っています。使い方はとても簡単です。無料と有料サービスがあります。私は無料サービスを使っています。

Formspreeのアカウントの作成
新しいFormの作成
↓お問い合わせページの作成↓

エディタでThemeの中に新しいコンテンスを作って、お問い合わせフォームのコードを埋め込む。

しかし厄介な事でformspreeで出来上がった物はそのままmarkdownで使えませんでした。実際私はやってみたが、サイトには何も表示されませんでした。

formspreeは下記のコードがサポートしています。

厄介です、こちはHugoのcontentの中のmdファイルに埋め込めない。実際そのままに埋め込んでみたが動きませんでした。原因はmarkdownのコードではないためです。

解決その１

{::nomarkdown}を先頭と最後に指定します。しかし私の場合はこれでもダメでした。

解決その２

Hugoのconfig.tomsオプションの中にはmarkupを使う。markupでunsafe = trueデフォルトでfalseになっている為にうまくいかなかった。

[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true

config.tomsのmarkup.goldmarkのデフォルト設定

[markup]
[markup.goldmark]
[markup.goldmark.extensions]
definitionList = true
footnote = true
linkify = true
strikethrough = true
table = true
taskList = true
typographer = true
[markup.goldmark.parser]
autoHeadingID = true
autoHeadingIDType = “github”
[markup.goldmark.parser.attribute]
block = false
title = true
[markup.goldmark.renderer]
hardWraps = false
unsafe = false
xhtml = false

unsafe機能

デフォルトでは、Goldmark は生の HTML および潜在的に危険なリンクをレンダリングしません。インライン HTML や JavaScript がたくさんある場合は、これをオンにする必要があるかもしれません。