Skip to content

Commit 9828d61

Browse files
CatCodeMeCatCodeMe
committed
添加advance-step 说明文档，调整间距
1 parent c83c4fd commit 9828d61

3 files changed

Lines changed: 261 additions & 1 deletion

File tree

‎src/assets/styles/advance-step.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ ol.advanced-steps {
77
counter-reset: advanced-step-counter;
88
padding-left: 0;
99
margin-left: 1rem;
10+
margin-top: 1rem;
1011
position: relative;
1112
}
1213

1314
ol.advanced-steps>li {
1415
counter-increment: advanced-step-counter;
1516
position: relative;
1617
padding-left: calc(var(--bullet-size) + 1rem);
17-
padding-bottom: 1.5rem;
18+
padding-bottom: .5rem;
1819
min-height: calc(var(--bullet-size) + var(--bullet-margin));
1920
}
2021

‎src/content/blog/test/test_advancestep.mdx‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
---
2+
title: "AdvanceStep Component Guide"
3+
description: 'A comprehensive guide and documentation for the AdvanceStep component.'
4+
publishDate: 2025-08-28 17:31:03
5+
slug: p1jz
6+
tags: ['component', 'documentation', 'astro']
7+
---
8+
9+
> generated by gemini
10+
11+
import { MdxRepl } from 'astro-pure/user'
12+
import Aside from '@/custom/components/user/Aside.astro'
13+
import AdvanceStep from '@/components/AdvanceStep.astro';
14+
15+
The `AdvanceStep` component is a powerful tool for creating beautifully rendered, step-by-step guides. It's a more advanced alternative to the standard `Steps` component, offering several ways to automatically structure your content.
16+
17+
## Core Concept
18+
19+
Unlike the basic `<Steps>` component which requires you to manually write an ordered list, `<AdvanceStep>` intelligently processes its content based on a mandatory `split` property. This property tells the component how to identify and separate each step.
20+
21+
The `split` prop is required and can have one of the following values:
22+
- `'ol'`: For styling a standard Markdown ordered list (`1.`, `2.`, ...).
23+
- `'h2'`: Uses Level 2 headings (`##`) as step separators.
24+
- `'h3'`: Uses Level 3 headings (`###`) as step separators.
25+
- `'h4'`: Uses Level 4 headings (`####`) as step separators.
26+
- `'hr'`: Uses horizontal rules (`---`) as step separators.
27+
28+
---
29+
30+
## Usage by `split="ol"`
31+
32+
This is the most flexible mode. Use it when you want to style a standard Markdown ordered list. It fully supports complex nested content within each step, including other components.
33+
34+
<MdxRepl>
35+
<AdvanceStep split="ol">
36+
1. **Install Dependencies**
37+
First, you need to install the required packages.
38+
```bash
39+
npm install
40+
```
41+
2. **Run the Development Server**
42+
Next, start the local server to see your changes.
43+
3. **Build for Production**
44+
Finally, build the application for deployment. You can even nest other components:
45+
<Aside type="tip" title="Nested Component">
46+
This `Aside` component is nested inside a step!
47+
</Aside>
48+
</AdvanceStep>
49+
50+
<Fragment slot='desc'>
51+
````jsx
52+
import AdvanceStep from '@/components/AdvanceStep.astro';
53+
import { Aside } from 'astro-pure/user';
54+
55+
<AdvanceStep split="ol">
56+
1. **Install Dependencies**
57+
First, you need to install the required packages.
58+
```bash
59+
npm install
60+
```
61+
2. **Run the Development Server**
62+
Next, start the local server to see your changes.
63+
3. **Build for Production**
64+
Finally, build the application for deployment. You can even nest other components:
65+
<Aside type="tip" title="Nested Component">
66+
This `Aside` component is nested inside a step!
67+
</Aside>
68+
</AdvanceStep>
69+
````
70+
</Fragment>
71+
</MdxRepl>
72+
73+
---
74+
75+
## Usage by Headings (`h2`, `h3`, `h4`)
76+
77+
Use a heading-based split when each of your steps has a clear title. The component will use the specified heading level to separate the steps. Any other heading levels will be treated as regular content.
78+
79+
<MdxRepl>
80+
<AdvanceStep split="h2">
81+
## Step 1: Clone the Repository
82+
Start by getting the source code from the remote repository.
83+
84+
### Sub-heading (not a step)
85+
This H3 is just part of Step 1.
86+
87+
## Step 2: Install and Run
88+
Now you can install dependencies and start the project.
89+
</AdvanceStep>
90+
91+
<Fragment slot='desc'>
92+
````jsx
93+
import AdvanceStep from '@/components/AdvanceStep.astro';
94+
95+
<AdvanceStep split="h2">
96+
## Step 1: Clone the Repository
97+
Start by getting the source code from the remote repository.
98+
99+
### Sub-heading (not a step)
100+
This H3 is just part of Step 1.
101+
102+
## Step 2: Install and Run
103+
Now you can install dependencies and start the project.
104+
</AdvanceStep>
105+
````
106+
</Fragment>
107+
</MdxRepl>
108+
109+
---
110+
111+
## Usage by Horizontal Rule (`hr`)
112+
113+
This mode is perfect for simple steps that don't require titles. Just separate your content blocks with a horizontal rule (`---`).
114+
115+
<MdxRepl>
116+
<AdvanceStep split="hr">
117+
First, do this thing. It can be a long paragraph of text.
118+
119+
---
120+
121+
Second, do the next thing. You can include code blocks or other elements.
122+
```js
123+
console.log("Hello, Step 2!");
124+
```
125+
126+
---
127+
128+
Finally, you are done.
129+
</AdvanceStep>
130+
131+
<Fragment slot='desc'>
132+
````jsx
133+
import AdvanceStep from '@/components/AdvanceStep.astro';
134+
135+
<AdvanceStep split="hr">
136+
First, do this thing. It can be a long paragraph of text.
137+
138+
---
139+
140+
Second, do the next thing. You can include code blocks or other elements.
141+
```js
142+
console.log("Hello, Step 2!");
143+
```
144+
145+
---
146+
147+
Finally, you are done.
148+
</AdvanceStep>
149+
````
150+
</Fragment>
151+
</MdxRepl>
152+
153+
---
154+
155+
## Fallback Behavior
156+
157+
If you specify a `split` separator that is not found in the content, the component will gracefully render all the content as a single step.
158+
159+
<MdxRepl>
160+
<AdvanceStep split="h2">
161+
This content does not contain any H2 headings.
162+
163+
### Therefore...
164+
All of it, including this H3 heading, will be grouped into a single Step 1.
165+
</AdvanceStep>
166+
167+
<Fragment slot='desc'>
168+
````jsx
169+
import AdvanceStep from '@/components/AdvanceStep.astro';
170+
171+
<AdvanceStep split="h2">
172+
This content does not contain any H2 headings.
173+
174+
### Therefore...
175+
All of it, including this H3 heading, will be grouped into a single Step 1.
176+
</AdvanceStep>
177+
````
178+
</Fragment>
179+
</MdxRepl>
180+
181+
---
182+
183+
## Nesting Steps
184+
185+
You can nest `AdvanceStep` components to create complex, multi-level procedures. This works best when the outer component uses `split="ol"`, as this gives you explicit control over the list items (`<li>`) where you can place a nested component.
186+
187+
<MdxRepl>
188+
<AdvanceStep split="ol">
189+
1. **Main Step One**
190+
This is the first primary step.
191+
192+
2. **Main Step Two (with Sub-steps)**
193+
This step contains a nested procedure.
194+
<AdvanceStep split="h3">
195+
### Sub-step A
196+
This is the first sub-step, separated by an H3 heading.
197+
198+
### Sub-step B
199+
This is the second sub-step.
200+
</AdvanceStep>
201+
202+
3. **Main Step Three**
203+
This is the final primary step.
204+
</AdvanceStep>
205+
206+
<Fragment slot='desc'>
207+
````jsx
208+
import AdvanceStep from '@/components/AdvanceStep.astro';
209+
210+
<AdvanceStep split="ol">
211+
1. **Main Step One**
212+
This is the first primary step.
213+
214+
2. **Main Step Two (with Sub-steps)**
215+
This step contains a nested procedure.
216+
217+
<AdvanceStep split="h3">
218+
### Sub-step A
219+
This is the first sub-step, separated by an H3 heading.
220+
221+
### Sub-step B
222+
This is the second sub-step.
223+
</AdvanceStep>
224+
225+
3. **Main Step Three**
226+
This is the final primary step.
227+
</AdvanceStep>
228+
````
229+
</Fragment>
230+
</MdxRepl>
231+
232+
233+
<AdvanceStep split="ol">
234+
1. **Main Step One**
235+
This is the first primary step.
236+
237+
2. **Main Step Two (with Sub-steps)**
238+
This step contains a nested procedure.
239+
240+
<AdvanceStep split="h3">
241+
### Sub-step A
242+
This is the first sub-step, separated by an H3 heading.
243+
244+
### Sub-step B
245+
This is the second sub-step.
246+
</AdvanceStep>
247+
248+
3. **Main Step Three**
249+
This is the final primary step.
250+
</AdvanceStep>

‎src/content/blog/test/test_code.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,4 +250,13 @@ def hello_world():
250250
- Underline
251251
- Reversed
252252
- Strikethrough
253+
```
254+
255+
```txt title='.gitignore'
256+
.starlight-icons/*
257+
!.starlight-icons/safelist.json
258+
```
259+
260+
```ts title="app.ts"
261+
console.log('hi')
253262
```

0 commit comments

Comments
 (0)