Github 提供 1GB 的免費空間¹，個人認為圖片或多媒體資源應該要另外存放才對。
以下記錄 imgur 的用法以及讓圖片並晚顯示的方法。

imgur 作為圖床

文章來源²
imgur 的優點：

圖片不會被刪除，即使瀏覽量很低 [1]
桌面版可以使用 Chrome 的 Extension，可支援直接 copy & paste 跟拖拉上傳。
預設圖片上傳都是私密的，除非知道圖片網址，否則無法瀏覽
可以直接用網址來控制圖片的大小
完全免費

目前 imgur 支援六種不同尺寸的縮圖:

Thumbnail Suffix	Thumbnail Name	Thumbnail Size	Keeps Image Proportions
s	Small Square	90x90	No
b	Big Square	160x160	No
t	Small Thumbnail	160x160	Yes
m	Medium Thumbnail	320x320	Yes
l	Large Thumbnail	640x640	Yes
h	Huge Thumbnail	1024x1024	Yes

For example,the image located at http:\//i.imgur.com/12345.jpg has the Medium Thumbnail located at http:\//i.imgur.com/12345m.jpg

圖片並列顯示

在內文要有效果要，要先修改一下themes\next\source\css\_common\components\tags\group-pictures.styl文件，註解或刪除其中兩項。

mark:2,4

.page-post-detail .post-body .group-picture-column {
  // float: none;
  margin-top: 10px;
  // width: auto !important;
  img { margin: 0 auto; }
}

要隱藏首頁的標題列只顯示圖的話，文章的 Header 要加入 type: "picture"，如下範例

---
title:
tags:
date:
type: "picture"
password:
abstract:
---

然後在內文中使用

{% gp 5-3 %}
![](/images/post/18210.jpg)
![](/images/post/196232.jpg)
![](/images/post/224147.jpg)
![](/images/post/199301.jpg)
![](/images/post/213318.jpg)
{% endgp %}

另外{\% gp 5-3 \%}：設置圖片展示效果，參考 theme/next/scripts/tags/group-pictures.js 註釋示意圖 , 如下。

:line_number:false

 * 2-1
 *
 *  □
 *  □
/**
 * 2-2
 *
 * □ □
/**
 * 3-1
 *
 * □ □ □
 *
/**
 * 3-2
 *
 *  □
 * □ □
 *
/**
 * 3-3
 *
 * □ □
 *  □
 *
/**
 * 4-1
 *
 *  □
 * □ □
 *  □
 *
/**
 * 4-2
 *
 *   □
 * □ □ □
 *
/**
 * 4-3
 *
 * □ □
 * □ □
 *
/**
 * 4-4
 *
 * □ □ □
 *   □
 *
/**
 * 5-1
 *
 *  □
 * □ □
 * □ □
 *
/**
 * 5-2
 *
 * □ □
 *  □
 * □ □
 *
/**
 * 5-3
 *
 *  □ □
 * □ □ □
 *
/**
 * 5-4
 *
 * □ □ □
 *  □ □
 *
/**
 * 6-1
 *
 *   □
 *  □ □
 * □ □ □
 *
/**
 * 6-2
 *
 *   □
 * □ □ □
 *  □ □
 *
/**
 * 6-3
 *
 *  □ □
 *   □
 * □ □ □
 *
/**
 * 6-4
 *
 * □ □
 * □ □
 * □ □
 *
/**
 * 6-5
 *
 * □ □ □
 * □ □ □
 *
/**
 * 7-1
 *
 *  □
 * □ □
 * □ □
 * □ □
 *
/**
 * 7-2
 *
 *   □
 * □ □ □
 * □ □ □
 *
/**
 * 7-3
 *
 *  □ □
 *  □ □
 * □ □ □
 *
/**
 * 7-4
 *
 *  □ □
 * □ □ □
 *  □ □
 *
/**
 * 7-5
 *
 * □ □ □
 *  □ □
 *  □ □
 *
/**
 * 8-1
 *
 *   □
 *  □ □
 *  □ □
 * □ □ □
 *
/**
 * 8-2
 *
 *   □
 *  □ □
 * □ □ □
 *  □ □
 *
/**
 * 8-3
 *
 *   □
 * □ □ □
 *  □ □
 *  □ □
/**
 * 8-4
 *
 * □ □
 * □ □
 * □ □
 * □ □
 *
/**
 * 8-5
 *
 *  □ □
 * □ □ □
 * □ □ □
 *
/**
 * 8-6
 *
 * □ □ □
 *  □ □
 * □ □ □
 *
/**
 * 8-7
 *
 * □ □ □
 * □ □ □
 *  □ □
 *
/**
 * 9-1
 *
 *   □
 *  □ □
 * □ □ □
 * □ □ □
 *
/**
 * 9-2
 *
 *   □
 * □ □ □
 *  □ □
 * □ □ □
 *
/**
 * 9-3
 *
 *  □ □
 *  □ □
 *  □ □
 * □ □ □
 *
/**
 * 9-4
 *
 *  □ □
 *  □ □
 * □ □ □
 *  □ □
 *
/**
 * 9-5
 *
 *  □ □
 * □ □ □
 *  □ □
 *  □ □
 *
/**
 * 9-6
 *
 * □ □ □
 *  □ □
 *  □ □
 *  □ □
 *
/**
 * 9-7
 *
 * □ □ □
 * □ □ □
 * □ □ □
 *
/**
 * 10-1
 *
 *   □
 * □ □ □
 * □ □ □
 * □ □ □
 *
/**
 * 10-2
 *
 *  □ □
 *  □ □
 * □ □ □
 * □ □ □
 *
/**
 * 10-3
 *
 *  □ □
 * □ □ □
 *  □ □
 * □ □ □
 *
/**
 * 10-4
 *
 *  □ □
 * □ □ □
 * □ □ □
 *  □ □
 *
/**
 * 10-5
 *
 * □ □ □
 *  □ □
 *  □ □
 * □ □ □
 *
/**
 * 10-6
 *
 * □ □ □
 *  □ □
 * □ □ □
 *  □ □
 *
/**
 * 10-7
 *
 * □ □ □
 * □ □ □
 *  □ □
 *  □ □
 *
/**
 * Defaults Layout
 *
 * □ □ □
 * □ □ □
 * ...

科技、藝術、工藝

Hexo 使用 imgur 圖床跟並列顯示圖片

imgur 作為圖床

圖片並列顯示