[Hexo] 使用 NexT 主題如何在文章中內嵌 Codepen

估狗估不到什麼東西，還好自己有摸索成功，乾脆來發一篇！

在搬運 Medium 文章過來的過程中遇到一個問題，就是我之前在 Medium 寫文的時候超常 embed Codepen 的，畢竟有些效果真的有 Demo 輔助說明會比較好。
但在 hexo NexT 的環境下要怎麼嵌入 Codepen 哩？

第一次踩雷

我首先找到這篇文章： Hexo NexT：在文章中嵌入 CodePen或 jsFiddle，但是我下載完套件後，按照文中的方式在文章裡插入模板，卻跑出一堆錯誤訊息，整篇文章的內容都無法渲染。

所以我只好捨棄這個方法，跑去翻翻 NexT 官方文件：標籤外掛（Tag Plugins）。
看到官方有提供插入 iframe 的語法，我就想說 Codepen 也有提供 iframe 程式碼，說不定行得通。

Next 與 Codepen iframe 語法

Next 官方提供的語法：

1	{% iframe url [width] [height] %}

Codepen 提供的 iframe 程式碼：

<iframe height="265" style="width: 100%;" scrolling="no" title="bs flex order" src="https://codepen.io/gretema/embed/eYOjPJx?height=265&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/gretema/pen/eYOjPJx'>bs flex order</a> by 馬維君
  (<a href='https://codepen.io/gretema'>@gretema</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

第二次踩雷

我把 Next 語法中的 url 代換成 Codepen 連結網址 (https://codepen.io/gretema/pen/eYOjPJx)，[width] 代換成 [100%]，[height] 代換成 [265]。
寬度跟高度的數值都是從 Codepen 提供的程式碼中取出來的。
呈現出來是這樣：

嗯…… Codepen 畫面是出來了，但尺寸很有問題。

終於成功啦

最後，我嘗試把 Codepen 提供的程式碼中，<iframe> 的 src 值取出來，放到 Next iframe 語法的 url 位置，而 [width] 跟 [height] 都去掉。

1	{% iframe https://codepen.io/gretema/embed/eYOjPJx?height=265&theme-id=default&default-tab=html,result %}

嵌入成功！