建站: Custom <AdvanceStep> Component Guide

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.

Core Concept#

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.

The split prop is required and can have one of the following values:

• 'ol': For styling a standard Markdown ordered list (1., 2., …).
• 'h2': Uses Level 2 headings (##) as step separators.
• 'h3': Uses Level 3 headings (###) as step separators.
• 'h4': Uses Level 4 headings (####) as step separators.
• 'hr': Uses horizontal rules (---) as step separators.

Usage by split="ol"#

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.

import AdvanceStep from '@/components/AdvanceStep.astro';
import { Aside } from 'astro-pure/user';

<AdvanceStep split="ol">
  1. **Install Dependencies**
     First, you need to install the required packages.
     ```bash
     npm install
     ```
  2. **Run the Development Server**
     Next, start the local server to see your changes.
  3. **Build for Production**
     Finally, build the application for deployment. You can even nest other components:
     <Aside type="tip" title="Nested Component">
       This `Aside` component is nested inside a step!
     </Aside>
</AdvanceStep>

Usage by Headings (h2, h3, h4)#

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.

import AdvanceStep from '@/components/AdvanceStep.astro';

<AdvanceStep split="h2">
  ## Step 1: Clone the Repository
  Start by getting the source code from the remote repository.

  ### Sub-heading (not a step)
  This H3 is just part of Step 1.

  ## Step 2: Install and Run
  Now you can install dependencies and start the project.
</AdvanceStep>

Usage by Horizontal Rule (hr)#

This mode is perfect for simple steps that don’t require titles. Just separate your content blocks with a horizontal rule (---).

import AdvanceStep from '@/components/AdvanceStep.astro';

<AdvanceStep split="hr">
  First, do this thing. It can be a long paragraph of text.

  ---

  Second, do the next thing. You can include code blocks or other elements.
  ```js
  console.log("Hello, Step 2!");
  ```
  ---

  Finally, you are done.
</AdvanceStep>

Fallback Behavior#

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.

import AdvanceStep from '@/components/AdvanceStep.astro';

<AdvanceStep split="h2">
  This content does not contain any H2 headings.

  ### Therefore...
  All of it, including this H3 heading, will be grouped into a single Step 1.
</AdvanceStep>

Nesting Steps#

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.

import AdvanceStep from '@/components/AdvanceStep.astro';

<AdvanceStep split="ol">
  1. **Main Step One**
     This is the first primary step.

  2. **Main Step Two (with Sub-steps)**
     This step contains a nested procedure.

     <AdvanceStep split="h3">
       ### Sub-step A
       This is the first sub-step, separated by an H3 heading.

       ### Sub-step B
       This is the second sub-step.
     </AdvanceStep>

  3. **Main Step Three**
     This is the final primary step.
</AdvanceStep>

1. Main Step One
   This is the first primary step.

2. Main Step Two (with Sub-steps)
   This step contains a nested procedure.

   1. Sub-step A#

      This is the first sub-step, separated by an H3 heading.

         console.log("Hello, Step 2!");

   2. Sub-step B#

      This is the second sub-step.

3. Main Step Three
   This is the final primary step.