內建組件 | My Open Source Blog

文章發布時間 2026年4月4日

作者 Demo Admin

標籤

#步驟指示器

位置：
- src/components/post/Steps/Steps.astro
- src/components/post/Steps/Step.astro
引入路徑：
- @shComponents/Steps/Steps.astro
- @shComponents/Steps/Step.astro

參數：

組件	參數名稱	類型	說明
`<Steps />`	`start`	number	指定步驟指示器的起始步驟編號，預設為 1。
`<Steps />`	`class`	string	額外的 CSS Class，可以用來自定義步驟指示器的樣式。
`<Step />`	`title`	string	步驟的標題，將顯示在步驟指示器中。

你可以使用 Steps 和 Step 組件來創建一個步驟指示器，這對於展示流程或指南非常有用。

1
<Steps start={3}>
2
  <Step title="第一步">這是第一步的描述</Step>
3
  <Step title="第二步">這是第二步的描述</Step>
4
  <Step title="第三步">
5
    這是第三步的描述，你可以在這裡添加更多的內容來說明這一步驟。
6
    <ol>
7
      <li>這是一個清單，對你可以用清單</li>
8
      <li>但是必須手動添加 HTML 標籤哦</li>
9
    </ol>
10
  </Step>
11
</Steps>

第一步

這是第一步的描述

第二步

這是第二步的描述

第三步

這是第三步的描述，你可以在這裡添加更多的內容來說明這一步驟。

這是一個清單，對你可以用清單
但是必須手動添加 HTML 標籤哦

這將會渲染一個包含三個步驟的指示器，每個步驟都有標題和描述。你可以根據需要添加更多的步驟，或者自定義每個步驟的內容。

#檔案架構

位置：
- src/components/post/Files/Files.astro
- src/components/post/Files/Folder.astro
- src/components/post/Files/File.astro
引入路徑：
- @shComponents/Files/Files.astro
- @shComponents/Files/Folder.astro
- @shComponents/Files/File.astro

參數：

組件	參數名稱	類型	說明
`<Files />`	`path`	string	指定文件樹的根路徑（可選）。
`<Files />`	`class`	string	額外的 CSS Class，可以用來自定義文件樹的樣式。
`<Folder />`	`name`	string	資料夾的名稱。
`<Folder />`	`defaultOpen`	boolean	指定資料夾是否預設展開（可選，預設為`False`）。
`<Folder />`	`highlighted`	boolean	指定資料夾是否高亮顯示（可選，預設為`False`）。
`<File />`	`name`	string	檔案的名稱。
`<File />`	`icon`	FileIconType	指定檔案圖示的類型（預設為`normal`，所有選項請參考下方資訊）。
`<File />`	`highlighted`	boolean	指定檔案是否高亮顯示（可選，預設為`False`。請注意，高亮檔案並不會因而將父資料夾一同高亮。如需高亮資料夾，請在 `<Folder />` 上使用 `highlighted` 屬性）。

1
<Files path="/sh-blog-next/">
2
  <Folder name="app" defaultOpen>
3
    <File name="layout.tsx" icon="code" />
4
    <File name="page.tsx" />
5
    <File name="global.css" highlighted />
6
  </Folder>
7
  <Folder name="components" highlighted>
8
    <File name="button.tsx" icon="code" />
9
    <File name="tabs.tsx" />
10
    <File name="dialog.tsx" highlighted />
11
    <Folder name="core">
12
      <File name="Header.astro" />
13
      <File name="Footer.astro" />
14
    </Folder>
15
  </Folder>
16
  <File name="package.json" />
17
</Files>

/sh-blog-next/

layout.tsx

page.tsx

global.css

package.json

以下是所有可用的圖示：

1
<Files>
2
  <Folder name="Development" defaultOpen>
3
    <File name="source_code.ts" icon="code" />
4
    <File name="config.yaml" icon="config" />
5
    <File name="script.sh" icon="terminal" />
6
    <File name="compiled.bin" icon="binary" />
7
  </Folder>
8
  <Folder name="Media Assets" defaultOpen>
9
    <File name="background.png" icon="image" />
10
    <File name="podcast.mp3" icon="audio" />
11
    <File name="tutorial.mp4" icon="video" />
12
    <File name="model_3d.obj" icon="3d" />
13
  </Folder>
14
  <Folder name="Documents">
15
    <File name="report.pdf" icon="document" />
16
    <File name="data_sheet.xlsx" icon="sheet" />
17
    <File name="ssl_cert.crt" icon="certificate" />
18
    <File name="private.key" icon="key" />
19
  </Folder>
20
  <Folder name="System & Others" defaultOpen>
21
    <File name="backup.zip" icon="archive" />
22
    <File name="scanner_output.pdf" icon="scan" />
23
    <File name="unknown_file" icon="not-found" />
24
    <File name="regular_note.txt" icon="normal" />
25
  </Folder>
26
</Files>

source_code.ts

config.yaml

script.sh

compiled.bin

background.png

podcast.mp3

tutorial.mp4

model_3d.obj

backup.zip

scanner_output.pdf

unknown_file

regular_note.txt

#GitHub 卡片

位置：src/components/GHCard/GitHubCard.astro
引入路徑：@shComponents/GHCard/GitHubCard.astro

參數：

參數名稱	類型	說明
`repo`	string	指定要顯示的 GitHub 倉庫，格式為 `username/repository` 或 `https://github.com/username/repository`。
`class`	string	額外的 CSS Class，可以用來自定義 GitHub 卡片的樣式。

以下是一個 GitHub 卡片的範例，展示了如何使用 GithubCard 組件來顯示 GitHub 倉庫的資訊：

1
<GithubCard repo="510208/sh-blog-next" />

sh-blog-next

公開儲存庫

A simple, lightweight, Chinese-based personal blog template, highly customizable, suitable for personal blogs.

TypeScript

更新於4/6/2026

以下是一個已被封存的儲存庫：

1
<GithubCard repo="https://github.com/510208/MD5Hashing-NEW" />

MD5Hashing-NEW

封存儲存庫

MD5Hashing的最新版介面，用簡單的UI擄獲許多使用者愛用的心

Visual Basic .NET

更新於2/8/2026

以下是一個不存在的儲存庫：

1
<GithubCard repo="https://github.com/510208/ThisRepoDoesNotExist" />

找不到所請求的儲存庫

#分頁

位置：
- src/components/post/Tab/Tabs.astro
- src/components/post/Tab/TabItem.astro
引入路徑：
- @shComponents/Tab/Tabs.astro
- @shComponents/Tab/TabItem.astro

參數：

組件	參數名稱	類型	說明
`<Tabs />`	`class`	string	額外的 CSS Class，可以用來自定義分頁組件的樣式。
`<TabItem />`	`label`	string	分頁的標籤名稱，將顯示在分頁標籤上。
`<TabItem />`	`class`	string	額外的 CSS Class，可以用來自定義分頁項目的樣式。

1
console.log("Hello World in Javascript");

1
fn main() {
2
    println!("Hello World in Rust");
3
}

1
console.log("Hello World in Typescript");

1
print("Hello World in Python")

1
package main
2

3
import "fmt"
4

5
func main() {
6
    fmt.Println("Hello World in Go")
7
}

1
#include <iostream>
2

3
int main() {
4
    std::cout << "Hello World in C++" << std::endl;
5
    return 0;
6
}

1
public class HelloWorld {
2
    public static void main(String[] args) {
3
        System.out.println("Hello World in Java");
4
    }
5
}

1
using System;
2

3
class Program {
4
    static void Main() {
5
        Console.WriteLine("Hello World in C#");
6
    }
7
}

1
<?php
2
echo "Hello World in PHP";
3
?>

1
puts "Hello World in Ruby"

1
print("Hello World in Swift")

1
  fun main() {
2
    println("Hello World in Kotlin")
3
  }

1
void main() {
2
  print("Hello World in Dart");
3
}

1
  Module Module1
2
      Sub Main()
3
          Console.WriteLine("Hello World")
4
          Console.WriteLine("This is the first VB.Net Application.")
5
          Console.ReadKey()
6
      End Sub
7
  End Module

在同一個分頁組件中，只有一個分頁項目可以預設開啟（傳送參數 defaultOpen）。

#提示區塊

提示區塊已經被集成進 Markdown 解析器中，你可以直接使用 Markdown 的語法來創建提示區塊。

1
:::note[筆記]
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip[提示]
6
Optional information to help a user be more successful.
7
:::
8

9
:::important[重要]
10
Important information for a user to know.
11
:::
12

13
:::danger[危險]
14
Serious and/or dangerous situations.
15
:::
16

17
:::caution[小心]
18
Negative potential consequences of an action.
19
:::