HelloVic Demo 文章
2026/06/06 · 3 min read
這是一篇 MDX 示範文章。MDX = Markdown + 元件,所以你可以照常寫 Markdown, 需要特效時再插入下面這些標籤。一般的 粗體、斜體、連結、清單、 程式碼都跟以前一樣用。
1. 裝飾分隔線 — <Ornament />
想換段落、做一個呼吸的空隙時,放一行 <Ornament />:
就會出現上面這條「中央星芒 + 兩側漸隱線」的分隔。比 Markdown 的 --- 有質感。
2. 置中金句 — <PullQuote>
把想強調的一句話包起來,會變成置中、放大的斜體金句(上下帶細線):
先讓內容出現在頁面上,再慢慢打磨成自己喜歡的樣子。
用法就是:<PullQuote>你的金句</PullQuote>。
3. 詩句 / 引文卡片 — <PoemBox>
引用詩、歌詞、別人的話時,用 <PoemBox> 包成一張柔色卡片,
可選擇加上 author(作者)和 source(出處)。每行結尾加一個反斜線 \ 就會斷行:
少年不識愁滋味,愛上層樓。
愛上層樓,為賦新詞強說愁。
而今識盡愁滋味,欲說還休。
欲說還休,卻道天涼好個秋。
(空一行 = 換段;行尾 \ = 換行。)
4. 圖片 + 說明 — <Figure>
放圖片時用 <Figure>,會自動置中、加圓角與柔光陰影,caption 是選填的圖說:
圖片請放在 public/images/ 裡,src 就寫 /images/檔名。
5. 一般引言與程式碼照常
這是普通的 Markdown 引言區塊,適合短短的旁白。
const greeting = "Hello, Vic!";
console.log(greeting);怎麼新增一篇文章?
- 在
src/content/blog/新增一個.mdx檔(檔名就是網址,例如my-post.mdx→/blog/my-post/)。 - 最上面填 frontmatter(
title/date/readMin/excerpt,選填pinned、listed)。 - 想用效果元件時,在內文最上方
import(複製本檔開頭那三行即可),然後在文章裡使用。
之後把這份示範換成你的正式內容就完成了。