把 Codepen 嵌入 Hugo文章上

前言
#

之前在 Medium 上直接貼上 Codepen 連結就會直接顯示出來，但是Hugo需要多一些步驟，這裡做個紀錄。

新增 `codepen.html` shortcode
#

在Hugo的 /layouts/shortcodes/ 目錄下新增 codepen.html 的檔案

codepen.html內容如下：

html

//  codepen.html 
{{ $height := .Get "height" | default "300" }}
{{ $defaultTab := .Get "defaultTab" | default "result" }}
{{ $slugHash := .Get "slugHash" }}
{{ $penTitle := .Get "penTitle" }}
{{ $user := .Get "user" }}

<div class="codepen" data-height="{{ $height }}" data-default-tab="{{ $defaultTab }}" data-slug-hash="{{ $slugHash }}" data-pen-title="{{ $penTitle }}" data-user="{{ $user }}" style="height: {{ $height }}px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/{{ $user }}/pen/{{ $slugHash }}" target="_blank" style="color:#1976d2; text-decoration:underline; cursor:pointer;" onmouseover="this.style.color='#1565c0'" onmouseout="this.style.color='#1976d2'">
  {{ $penTitle }}</a> by {{ $user }} (<a href="https://codepen.io/{{ $user }}" target="_blank" style="color:#1976d2; text-decoration:underline; cursor:pointer;" onmouseover="this.style.color='#1565c0'" onmouseout="this.style.color='#1976d2'">@{{ $user }}</a>)
  on <a href="https://codepen.io" target="_blank" style="color:#1976d2; text-decoration:underline; cursor:pointer;" onmouseover="this.style.color='#1565c0'" onmouseout="this.style.color='#1976d2'">CodePen</a>.</span>
</div>
<script async src="https://public.codepenassets.com/embed/index.js"></script> 

到 codepen 作品頁面取得 ID
#

打開你想要嵌入文章的 codepen 作品畫面，點擊右下角 Embed 按鈕，然後將 HTML Code 中的 ID 等資訊複製起來。

在 Hugo 中的 markdown 文章中嵌入以下代碼，並將 ID 等資訊帶入。

markdown

// 複製後將 `{ {` 中間的空格拿掉，才會正確被`Hugo`轉譯
{ {< codepen height="500" defaultTab="result" slugHash="NWymLWP" penTitle="Fabricjs example2" user="easin0614" >} }