Hugo 画像を載せる方法

スポンサーリンク

画像を保存する場所

quickというフォルダ名でプロジェクトを作成した時 ディレクトリ構成図は以下のようになる

quick/
   ┣static/
         ┗img/
             ┗work2.png

staticディレクトリ下にimgというフォルダを作ってそこに 画像を保存する。

タイトル部分に画像を表示する

画像を表示したい記事のマークダウンファイルを 編集していく。 今回はwork2.mdという名前で マークダウンファイルを作成した。

$vim content/post/work2.md

を打って編集して行く タイトルに画像を貼ってないときは f:id:shangtian:20180628080505p:plain

f:id:shangtian:20180628080510p:plain

実際に書いてみると

---
title: "$e^x x$<<1の時の近似"
date: 2018-06-21T21:40:03+09:00
draft: false
categories: ["math"]
image : img/work2-1.png     <---ココ
---
まず$\mathrm{e}^x$をマクローリン展開してみる

$$
f(x) = \mathrm{e}^x
$$
とおいて
...................

f:id:shangtian:20180628080540p:plain

f:id:shangtian:20180628080542p:plain

本文に画像を表示する

つぎは本文中に画像を表示する

以下のようにマークダウンファイル 中に書き込むことで画像を表示できる

......文章.....
![aaa][1]
......文章.....
![aaa][2]
......文章.....


[1]: img/a1.png
[2]: img/a2.png

画像を表示させたい位置 に以下を書く

![alt属性][任意の数字]

最初のはalt属性に書き込む 値をいれる 次の任意の数字を書いて その数字に対して画像の ファイルパスを以下のように書く

[任意の数字]: staticより下のパス

hugo-nederburg-themeというテーマを使っていが 本文中に画像を表示するとき static以下のファイルパスを設定し $hugoでpublicを生成すると 画像が表示されなかったのでサイトのurl からファイルパスを書いた。

他のテーマではどうなるのかは試していない

実際に本文中に書いてみると

$
e^x = 1+x+\frac{1}{2}x^2+\frac{1}{6}x^3+\cdots
$$

$x\ll1$の時
$$
e^x = 1+x
$$
と近似できる。このことは以下のグラフを見ると明らかである。
![this is][1]

[1]: https://ugeugehigh.github.io/MathAndPhysics/img/work2-1.png

こんな感じ

f:id:shangtian:20180628080657p:plain