org-modeでhugoする

Page content

hugoを使ってorg-modeをhtmlとかにするってことだが、いまいち良くわからない。画像とかリンクとかをなんとかしたいだけなのにいちいち悩む。調べて、やってみたことを記す。参考は こちら(ショートコード | Hugo)とか。

以下、あまり自信なし。

ショートコード

  {{% shortcodename arguments %}}

ショートコードネームと引数との区切り(前後も含め)スペース必須

ショートコードをそのまま表示する

2024-06-05 追記

HugoでShortcode(ショートコード)をそのまま表示する方法 -STYSK BLOG

ショートコード名を/* */で括れ!

リンク

外部リンク

普通にorg-modeのリンクの書き方でOK。

[[https://gohugo.io/content-management/shortcodes/][ショートコード | Hugo]]

ショートコード | Hugo

サイト内リンク

この間のあれ

[[{{% ref "/posts/202405311307.20240531.org" %}}][この間のあれ]]
サイト内アンカーへのリンク1
 [[{{% ref "/posts/202406101814.journal.org#headline-3" %}}][エアコンから水漏れ]]

リンク先のhtmlソースを見ないとIDがわからない。面倒。

エアコンから水漏れ

画像

hugo 標準のディレクトリ構成で "~/blog/static/images" に画像ファイルを置いた場合。例はこの前のラーメン写真。

今日のお昼

{{<figure src="/images/20240601/DSC_0384.JPG" alt="今日のお昼">}}

"<"、">"をエスケープしています。そのまんま表示する方法がわからない(泣)。 脚注とかもわからない(泣)。

/* */で括ってみた。↓

{{<figure src="/images/20240601/DSC_0384.JPG" alt="今日のお昼">}}

できた!

twitter

{{< twitter user="tsut" id="1821132124923285653" >}}

highlite

{{< highlight go-html-template >}}
{{ range .Pages }}
<h2><ahref="{{ .RelPermalink }}">{{ .LinTitle }}</a></h2>
{{ end }}
{{< /highlight >}}

{{ range .Pages }}
<h2><ahref="{{ .RelPermalink }}">{{ .LinTitle }}</a></h2>
{{ end }}

org-mode

目次の設定2

  • config.toml で サイト全体のdefault設定
toc = true (or false)
  • ページごとに目次を付けるかどうかを設定
#+toc: false (or true)

脚注(footnote)

  * サイト内アンカーへのリンク[fn:1]

  [fn:1] 2024-06-12 追記

水平線

5つ以上の '-'

  -----

html をそのまま適用する

"#+begin_export html"と"#+end_export"で括る。

#+begin_export html
  <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://blog.sorakote.net/" data-iframely-url="//iframely.net/Xfn3lsC"></a></div></div><script async src="//iframely.net/embed.js"></script>
#+end_export

Embeds codes for today's Internet - Iframely

Iframelyで取得したコードを上のように"#+begin_export html"で括ると、下のようになる。余りふさわしい例ではないけど例示。


1

2024-06-12 追記

2

2024-06-16 追記