目錄： Table of Contents | 匠活筆記 | 用思考與科技買回時間的踩坑紀錄

▼ 本文目錄

我在這篇文章中展示我做的的 Hugo Shortcodes。

Hugo

Hugo 是使用 Go 語言開發的靜態網站生成器，是一個快速、輕量、易於使用、可擴展的網站生成器。

The world’s fastest framework for building websites | Hugo

The world’s fastest framework for building websites

edited date: 2025-02-03 gohugo.io

Frameworks/Theme: Hugo Blox

Hugo Blox 是 Hugo 的框架，提供了很多現成的元件，可以快速建立網站。

Hugo Blox

Accelerate your growth with the #1 open source marketing platform for creators to easily publish, share, and grow a business around their content. An all-in-one tool to build a website, landing pages, and publish courses. Remove the middleman. Engage your fans directly and make your profile standout from the crowd.

edited date: 2025-02-03 hugoblox.com

Hugo Shortcodes

Hugo 的 Shortcodes 是 Hugo 提供的一種功能，允許開發者在文章中插入自定義的 HTML 片段，這些片段可以包含動態內容、圖片、表單等。

為了日常使用方便，我製作了這些 Shortcodes，並放在 Repo: mars-made-hugo-blox-and-shortcodes 中。

我在本頁中提供了這些 Shortcodes 的使用範例。

Demo

Toc-block

▼ 本文目錄

Customized-callout

可自定義的提示框
- 支援不同類型(info, warning)
- 可自定義標題和內容
- 包含圖示和樣式

Info

有時候 TOC 會出現，有時候不會出現，這是因為有下了參數：

mobile_only=true 如果是手機版 / 較窄的視窗，才會顯示 TOC
is_open=true 預設是關閉的，如果想要預設打開，可以下 is_open=true

shortcode sample

{{<customized-callout type="info">}}
有時候 TOC 會出現，有時候不會出現，這是因為有下了參數：
- mobile_only=true 如果是手機版 / 較窄的視窗，才會顯示 TOC
- is_open=true 預設是關閉的，如果想要預設打開，可以下 is_open=true
{{</customized-callout>}}

有 Title

有時候 TOC 會出現，有時候不會出現，這是因為有下了參數：

mobile_only=true 如果是手機版 / 較窄的視窗，才會顯示 TOC
is_open=true 預設是關閉的，如果想要預設打開，可以下 is_open=true

shortcode sample

{{<customized-callout type="info" title="有 Title">}}
有時候 TOC 會出現，有時候不會出現，這是因為有下了參數：
- mobile_only=true 如果是手機版 / 較窄的視窗，才會顯示 TOC
- is_open=true 預設是關閉的，如果想要預設打開，可以下 is_open=true
{{</customized-callout>}}

Link-preview-card

美觀的連結預覽卡片
- 支援圖片、標題、描述
- 顯示網站域名和日期
- 響應式設計

匠活筆記 | 在忙碌與平衡之間，找到屬於你的節奏

聰明工作，從容生活。生活不該只剩忙碌，工作也能有溫度。這裡談構築理想生活，聊生涯規劃，分享那些利用科技讓人生運轉順暢的小技巧；從專案管理到心智模型，從問題解決到產品思維。來吧，一起用匠人的態度，勾勒屬於你的生活藍圖。

edited date: 2025-02-02 anelive.today

shortcode sample

{{<link-preview-card 
    url="https://anelive.today"
    title="匠活筆記 | 在忙碌與平衡之間，找到屬於你的節奏"
    description="聰明工作，從容生活。生活不該只剩忙碌，工作也能有溫度。這裡談構築理想生活，聊生涯規劃，分享那些利用科技讓人生運轉順暢的小技巧；從專案管理到心智模型，從問題解決到產品思維。來吧，一起用匠人的態度，勾勒屬於你的生活藍圖。"
    image="https://anelive.today/media/icon_hu13349831664580004083.png"
    date="2025-02-02"
>*/}}