Skip to content

Commit 2e75d2b

Browse files
CatCodeMeCatCodeMe
committed
新增 banner 组件优化独立页面标题展示效果
1 parent d2bf036 commit 2e75d2b

12 files changed

Lines changed: 205 additions & 357 deletions

File tree

‎packages/pure/components/basic/Header.astro‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@ import { Icon } from '../user'
3030
{item.icon ? (
3131
<Icon name={item.icon as IconName} class='size-4' />
3232
) : item.iconImg ? (
33-
<Image src={item.iconImg} width={16} height={16} class='size-4' alt={item.title || 'icon image'} />
33+
<Image
34+
src={item.iconImg}
35+
width={16}
36+
height={16}
37+
class='size-4'
38+
loading='eager'
39+
alt={item.title || 'cats icon'}
40+
/>
3441
) : null}
3542
{item.title}
3643
</a>

‎packages/pure/components/user/MdxRepl.astro‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
---
22
interface Props {
33
width?: string
4+
prose?: boolean
45
}
56
6-
const { width } = Astro.props
7+
const { width, prose = false } = Astro.props
78
---
89

910
<div class='mdx-repl overflow-hidden rounded-xl border'>
10-
<div class='mdx-repl-container not-prose flex flex-col items-center justify-center p-4'>
11+
<div
12+
class:list={[
13+
'mdx-repl-container flex flex-col items-center justify-center p-4',
14+
{ prose, 'not-prose': !prose }
15+
]}
16+
>
1117
<slot />
1218
</div>
1319
<div class='bg-muted'>

‎public/images/social-card.png‎

-1.3 MB
Loading

‎src/assets/icons/android-chrome-512x512.png‎

269 KB
Loading

‎src/assets/msgboard/board2.png‎

1.9 MB
Loading

‎src/assets/shelf/desk1.png‎

3.16 MB
Loading

‎src/components/banner/Banner.astro‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
import { Image } from 'astro:assets'
3+
import type { HTMLAttributes } from 'astro/types'
4+
5+
6+
interface Props extends HTMLAttributes<'div'> {
7+
image: ImageMetadata
8+
imageAlt: string
9+
}
10+
11+
const { image, imageAlt, class: className, ...rest } = Astro.props
12+
---
13+
14+
<div class:list={['section-header', className]} {...rest}>
15+
<div class="section-header-text">
16+
<slot />
17+
</div>
18+
<Image src={image} alt={imageAlt} class="section-header-image" loading="eager" />
19+
</div>
20+
21+
<style>
22+
.section-header {
23+
display: flex;
24+
align-items: stretch;
25+
margin-bottom: 1.5rem;
26+
background-color: #f7fafc;
27+
border-radius: 8px;
28+
overflow: hidden;
29+
height: 200px;
30+
}
31+
.section-header-text {
32+
padding: 2rem;
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: center;
36+
flex: 1;
37+
}
38+
.section-header-image {
39+
width: 40%;
40+
object-fit: cover;
41+
}
42+
43+
@media (max-width: 767px) {
44+
.section-header {
45+
flex-direction: column;
46+
height: auto;
47+
}
48+
.section-header-image {
49+
width: 100%;
50+
height: 150px;
51+
}
52+
.section-header-text {
53+
padding: 1.5rem;
54+
}
55+
}
56+
</style>

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Banner 组件用法
3+
description: '如何使用通用的 Banner 组件来创建页面标题区域。'
4+
publishDate: 2025-10-17 19:45:00
5+
slug: yex1
6+
tags: ['组件', '建站']
7+
---
8+
9+
import { MdxRepl, Aside } from '@/custom/components/user';
10+
import Banner from '@/components/banner/Banner.astro';
11+
import { Icon } from '@/custom/components/user';
12+
import bannerImage from '@/assets/shelf/desk1.png';
13+
14+
`Banner` 是一个通用的页面横幅组件，用于快速创建一个包含左侧内容和右侧图片的标题区域。它通过 Astro 的 `slot` (插槽) 特性提供了极高的灵活性。
15+
16+
### 基础用法
17+
18+
`Banner` 组件接收两个主要属性：`image` 和 `imageAlt`。您需要将想要在左侧显示的任何内容放置在 `<Banner>` 和 `</Banner>` 标签之间。
19+
20+
<MdxRepl>
21+
<Banner image={bannerImage} imageAlt="示例图片">
22+
<div class="flex items-center gap-3">
23+
<Icon name="book" class="size-8" />
24+
<h2 class="text-3xl font-bold">这是主标题</h2>
25+
</div>
26+
<p class="border-l-2 border-border pl-3 text-muted-foreground mt-2">
27+
这是副标题，您可以在这里写一些描述性文字。
28+
</p>
29+
</Banner>
30+
<Fragment slot="desc">
31+
```jsx
32+
import Banner from '@/components/banner/Banner.astro';
33+
import { Icon } from '@/custom/components/user';
34+
import bannerImage from '@/assets/shelf/desk1.png';
35+
36+
<Banner image={bannerImage} imageAlt="示例图片">
37+
<div class="flex items-center gap-3">
38+
<Icon name="book" class="size-8" />
39+
<h2 class="text-3xl font-bold">这是主标题</h2>
40+
</div>
41+
<p class="border-l-2 border-border pl-3 text-muted-foreground mt-2">
42+
这是副标题，您可以在这里写一些描述性文字。
43+
</p>
44+
</Banner>
45+
```
46+
</Fragment>
47+
</MdxRepl>
48+
49+
### MDX Syntax Example
50+
51+
When using in an `.mdx` file, you can write Markdown directly in the slot, like this:
52+
53+
<MdxRepl prose={true}>
54+
<Banner image={bannerImage} imageAlt="MDX Example Image">
55+
> This is a Markdown Title
56+
57+
</Banner>
58+
<Fragment slot="desc">
59+
```mdx
60+
import Banner from '@/components/banner/Banner.astro';
61+
import bannerImage from '@/assets/shelf/desk1.png';
62+
63+
{/* 显然这里不适合有太多的太复杂的内容 */}
64+
<Banner image={bannerImage} imageAlt="MDX Example Image">
65+
> This is a Markdown Title
66+
67+
</Banner>
68+
```
69+
</Fragment>
70+
</MdxRepl>
71+
72+
### 组件属性 (Props)
73+
74+
| 属性 | 类型 | 是否必需 | 描述 |
75+
|---|---|---|---|
76+
| `image` | `ImageMetadata` | 是 | 用于右侧展示的图片资源, 需要从 `src` 目录导入。 |
77+
| `imageAlt` | `string` | 是 | 图片的替代文本。 |
78+
| `class` | `string` | 否 | 为组件根元素添加额外的 CSS 类。 |
79+
| `loading` | `'lazy' \| 'eager'` | 否 | 图片的加载策略，对于首屏的 Banner，推荐设置为 `eager`。 |
80+
81+
82+
<Banner image={bannerImage} imageAlt="MDX Example Image">
83+
## This is a Markdown Title
84+
This is a paragraph written in **Markdown** syntax.
85+
</Banner>
86+
87+
<Banner image={bannerImage} imageAlt="MDX Example Image">
88+
> This is a Markdown Title
89+
90+
</Banner>
91+
92+
### 插槽 (Slot)
93+
94+
<Aside type="info">
95+
`Banner` 组件的核心是它的默认插槽。您可以在组件标签内放置任何有效的 HTML 或 Astro 组件，它们将被渲染在 Banner 的左侧区域。
96+
</Aside>
97+
98+
<Aside type="tip" title="在 MDX 中使用">
99+
正如本页面一样，当您在 `.mdx` 文件中使用 `Banner` 组件时，可以直接在插槽中编写 Markdown 语法，它会被自动解析。
100+
```mdx
101+
<Banner image={...}>
102+
### 我是一个 Markdown 标题
103+
这是用 **Markdown** 写的段落。
104+
</Banner>
105+
```
106+
</Aside>

0 commit comments

Comments
 (0)