iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Modern Web

Hugo 貼身打造個人部落格系列 第 28

Day 28. Hugo 做個炫砲的自我介紹頁面

成果

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,但應該有更好的方式,透過樣板去創建唯一頁面,直接訪問/載入「關於我」頁面/樣板,這部分就還需要花時間摸索研究了。

參考連結


上一篇
Day 27. Hugo Template
下一篇
Day 29. 聊聊 Hugo SEO
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言