成果

https://blog.genesu.me/about-me/

綜合技

在 Content Page 載入寫好的 Shortcode {{< about-me >}}，並在引入的 Shortcode 中載入 scss 資源檔案，編排要顯示的內容，以下是原始碼：

./content/page/about-me.md

---
title: "關於我"
slug: "about-me"
author: littlebookboy
type: page
comments: false
showMeta: false
showActions: false
description: "littlebookboy - About Me"
---

{{< about-me >}}

{{< a-link center="true" target="_blank" href="https://codepen.io/KaioRocha/pen/orpKxq" >}}特效出處{{< /a-link >}}

Shortcode about-me.html

{{ $sass := resources.Get "scss/cubic-bezier.scss" }} 
{{ $style := $sass | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
<div class="container">
  <div class="post">
    <div class="header_post">
      <img src="https://raw.githubusercontent.com/littlebookboy/hugo-blog-images/master/kobu-agency-67L18R4tW_w-unsplash%20(2).jpg" />
    </div>
    <div class="body_post">
      <div class="post_content">
        <h1>Back-end</h1>
        <p>
          <ul>
            <li>Laravel</li>
            <li>Composer Package</li>
            <li>MySQL, SQLite, Redis</li>
            <li>PHPUnit Test</li>
            <li>Web Crawler (Dusk)</li>
            <li>AWS</li>
            <li>Docker</li>
          </ul>
        </p>
      </div>
    </div>
  </div>
  <div class="post">
    <div class="header_post">
      <img src="https://raw.githubusercontent.com/littlebookboy/hugo-blog-images/master/jason-wong-kSlL887znkE-unsplash%20(2).jpg" />
    </div>
    <div class="body_post">
      <div class="post_content">
        <h1>喜歡的食物</h1>
        <ul>
          <li>咖啡</li>
          <li>無糖綠</li>
          <li>雞腿飯</li>
          <li>咖喱飯</li>
          <li>牛肉麵</li>
          <li>麻醬麵</li>
        </ul>
      </div>
    </div>
  </div>
</div>

./asset/scss/cubic-bezier.scss

因為筆者不擅長改 css，本篇範例做法是參考作者的做法，搭配影片，微調一下自己想要的顏色，以及需要的內容就完成了。

小結

對筆者而言，最困難的是嘗試載入資源，並且修改 scss 以達成想要的樣式效果，有些現成的資源會使用全局樣式，以至於網站本身的樣式都跑版，需謹慎套用。

另外，在本地修改的過程中，每次異動 scss 都需要停掉 hugo server，才會套用當次異動到頁面中。

最後，筆者目前都還是用 Shortcode 去運用 Hugo 變數，引入到 Content Page，但應該有更好的方式，透過樣板去創建唯一頁面，直接訪問/載入「關於我」頁面/樣板，這部分就還需要花時間摸索研究了。

參考連結

• Hugo 貼身打造個人部落格系列 第 21 篇 - Hugo Pipes
• Hugo 貼身打造個人部落格系列 第 22 篇 - Hugo Shortcode 介紹
• Cubic Bezier codepen
• CSS Card Hover Effect w/ Cubic Bezier