ox-Hugo を使う
1 はじめに
1.1 なぜ Hugo を使うのか？
早い!
の一言につきます。 ポストが少ないのであれば、 Hugo のサイトのリビルドは一瞬です。
1.2 なぜ ox-hugo を使うのか？
ox-hugo は Org mode から Markdown へのエクスポートバックエンドです。
Hugo は Markdown で書くのが普通ですが、私は Markdown に慣れることが できません。そこで、 ox-hugo というパッケージを使って、 Org-mode のファイルを Markdown に変換しています。 この ox-hugo というパッケージがなかなか優れもので、 やりたいことはほとんどできます。
それでも、自分の好みの機能がないので、 ox-hugo をカスタマイズして 使っています。uh
2 ox-hugo でのプリアンブルの設定方法
#+OPTIONS: H:6 num:t
- H:6
- 見出しのレベルを 6 まで出力します。
- num::t
- 見出しに番号をつけます。
3 このサイトでで使える記法
3.1 図
これは:
#+ATTR_HTML: :alt test :width 25%
#+caption: Reddit Icon
[[file:images/Org-mode-unicorn.svg]]
次に変換されます:
図1: Reddit Icon
3.2 Babel
Org-mode の中でプログラミング言語を書くことができます。 それだけではなく、 Org-mode の中でプログラムを実行することが できます。
この Ditaa のプログラムは:
+--------------+
| |
| Hello World! |
| |
+--------------+
このように変換されます:
図2: Ditaa の出力
3.3 数式
3.3.1 インライン数式
例えば下の Org mode の断片は:
LaTeX formatted equation: \( E = -J \sum_{i=1}^N s_i s_{i+1} \)
これは Hugo がレンダリングする HTML の中でこのように見えます:
LaTeX formatted equation: \( E = -J \sum_{i=1}^N s_i s_{i+1 }\)
3.3.2 \LaTeX の数式
ox-hugo は \LaTeX の環境をサポートしています。
下の Org mode の断片は:
次のようにエクスポートされます:
\begin{equation} \label{eq:1} C = W\log_{2} (1+\mathrm{SNR}) \end{equation}
\ref{eq:1} は \ref{eq:1} へと変換されます<。
3.4 コードブロック
いくつかのコードの例です:
(message "Hello")
ls -al
print("test")
上の Ruby コードの出力です:
test
3.5 表
これは (1):
#+name: tab:test1
#+caption: 表のテスト
|---|---|---|
| a | b | c |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
|---|---|---|
このように出力されます:
| a | b | c |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
3.6 引用
3.6.1 素の quote ブロック
素の quote ブロックの出力です。
#+begin_quote :author Shimano
こんなものですかね。引用は。うまくいきます？
#+end_quote
こんなものですかね。引用は。うまくいきます？
3.6.2 quote ショートコードを使う
3.6.2.1 quote ショートコード
このような quote ショートコード を作りました。あ
{{- $author := .Get "author" -}}
{{- $width := .Get "width" -}}
<div class="w3-panel w3-card-4 w3-light-grey"
{{ if eq $width ""}}
style="width:50%"
{{ else }}
style="width:{{$width}}"
{{ end }}>
<i class="fa fa-quote-left w3-large w3-text-red"></i><br>
<p class="w3-large">
{{ .Inner }}
</p>
{{ with $author }}
<p class="w3-large w3-right">by: {{.}}</p><br>
{{ end }}
<i class="fa fa-quote-right w3-large w3-text-red"></i><br>
</div>
3.6.2.2 著者ありの例:
#+HTML: {{% blockquote width="30%" author="shimano" %}}
#+begin_quotation :author Shimano
こんなものですかね。引用は。うまくいきます？
#+end_quotation
#+HTML: {{< /blockquote >}}
これが出力されます:
style="width:30%"
こんなものですかね。引用は。うまくいきます？
by: shimano
3.6.2.3 著者なしの例:
#+HTML: {{% blockquote width="70%" %}}
#+begin_quotation :author Shimano
こんなものですかね。引用は。うまくいきます？
#+end_quotation
#+HTML: {{< /blockquote >}}
これが出力されます:
style="width:70%"
こんなものですかね。引用は。うまくいきます？
3.7 スペシャルブロック
Org-mode の中のスペシャルブロックは <div> へ変換されます。
クラスを設定するには、 #+ATTR_HTML: :class を設定します。
この Org-mode のスペシャルブロックは:
#+ATTR_HTML: :class w3-panel w3-blue w3-border
#+begin_info
Info
This is a test.
#+end_info
これへと変換されます:
Info
This is a test.
#+ATTR_HTML: :class w3-panel w3-yellow w3-border
#+begin_info
#+begin_warning
Warning
This is a test.
#+end_warning
Warning
This is a test.
3.8 例のブロック
p "test"
test
Related Articles:
- 2019/04/02 このブログの作りかた