ox-Hugo を使う

出版日 2019-03-30
変更日 2019-04-03
単語数 1167 3 mins read

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 でのプリアンブルの設定方法

(org)
#+OPTIONS: H:6 num:t
H:6
見出しのレベルを 6 まで出力します。
num::t
見出しに番号をつけます。

3 このサイトでで使える記法

3.1

これは:

(org)
#+ATTR_HTML: :alt test :width 25%
#+caption: Reddit Icon
[[file:images/Org-mode-unicorn.svg]]

次に変換されます:

test

図1: Reddit Icon

3.2 Babel

Org-mode の中でプログラミング言語を書くことができます。 それだけではなく、 Org-mode の中でプログラムを実行することが できます。

この Ditaa のプログラムは:

(ditaa)
+--------------+
|              |
| Hello World! |
|              |
+--------------+

このように変換されます:

図2:  Ditaa の出力

図2: Ditaa の出力

3.3 数式

3.3.1 インライン数式

例えば下の Org mode の断片は:

(org)
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 の断片は:

(org)
\begin{equation}
\label{eq:0}
C = W\log_{2} (1+\mathrm{SNR})
\end{equation}

次のようにエクスポートされます:

\begin{equation} \label{eq:1} C = W\log_{2} (1+\mathrm{SNR}) \end{equation}

\ref{eq:1} は \ref{eq:1} へと変換されます<。

3.4 コードブロック

いくつかのコードの例です:

(emacs-lisp)
(message "Hello")
(sh)
ls -al
ソースコード 1: Ruby の例 (ruby)
print("test")

上の Ruby コードの出力です:

test

3.5

これは (1):

(org)
#+name: tab:test1
#+caption: 表のテスト
|---|---|---|
| a | b | c |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
|---|---|---|

このように出力されます:

表 1: 表のテスト
a b c
1 2 3
1 2 3
1 2 3

3.6 引用

3.6.1 素の quote ブロック

素の quote ブロックの出力です。

(org)
#+begin_quote :author Shimano
こんなものですかね。引用は。うまくいきます?
#+end_quote

こんなものですかね。引用は。うまくいきます?

3.6.2 quote ショートコードを使う

3.6.2.1 quote ショートコード

このような quote ショートコード を作りました。あ

(html)
{{- $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 著者ありの例:
ソースコード 2: 著者ありの引用 (org)
#+HTML: {{% blockquote width="30%" author="shimano" %}}
#+begin_quotation :author Shimano
こんなものですかね。引用は。うまくいきます?
#+end_quotation
#+HTML: {{< /blockquote >}}

これが出力されます:


こんなものですかね。引用は。うまくいきます?

by: shimano



3.6.2.3 著者なしの例:
(org)
#+HTML: {{% blockquote width="70%" %}}
#+begin_quotation :author Shimano
こんなものですかね。引用は。うまくいきます?
#+end_quotation
#+HTML: {{< /blockquote >}}

これが出力されます:


こんなものですかね。引用は。うまくいきます?


3.7 スペシャルブロック

Org-mode の中のスペシャルブロックは <div> へ変換されます。 クラスを設定するには、 #+ATTR_HTML: :class を設定します。

この Org-mode のスペシャルブロックは:

(org)
#+ATTR_HTML: :class w3-panel w3-blue w3-border
#+begin_info
Info

This is a test.
#+end_info

これへと変換されます:

Info

This is a test.

(org)
#+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 例のブロック

(ruby)
p "test"
test

Tags: Hugo ox-hugo

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now
This website uses cookies to ensure you get the best experience on our website. Learn more Got it