Skip to content

Commit 8b46431

Browse files
CatCodeMeCatCodeMe
committed
新增 quote 类型
1 parent 7b5a5d1 commit 8b46431

5 files changed

Lines changed: 467 additions & 108 deletions

File tree

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ const asideVariants = [
1111
'tip',
1212
'warning',
1313
'caution',
14-
'success',
15-
'error'
14+
'quote'
1615
] as const
1716
const asideStyles = ['solid', 'card'] as const
1817
@@ -23,10 +22,9 @@ const defaultIcons: Record<(typeof asideVariants)[number], IconName> = {
2322
info: 'callout_info',
2423
note: 'note',
2524
tip: 'tip',
26-
success: 'tip',
2725
warning: 'warning',
2826
caution: 'caution',
29-
error: 'caution'
27+
quote: 'quote'
3028
} as const
3129
3230
interface Props {

‎packages/pure/libs/icons.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ export const BuiltInIcons = {
126126
callout_info:
127127
'<g fill="currentColor" fill-rule="evenodd"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/></g>',
128128
note: '<g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.5 2v3m-9-3v3M11 2v3m8 7v-1.5c0-3.3 0-4.95-1.025-5.975S15.3 3.5 12 3.5h-2c-3.3 0-4.95 0-5.975 1.025S3 7.2 3 10.5V15c0 3.3 0 4.95 1.025 5.975S6.7 22 10 22h1m-4-7h4m-4-4h8m.737 10.653L14 22l.347-1.737c.07-.352.244-.676.499-.93l4.065-4.066a.91.91 0 0 1 1.288 0l.534.534a.91.91 0 0 1 0 1.288l-4.065 4.065a1.8 1.8 0 0 1-.931.499"/></g>',
129+
quote:
130+
'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.135 9h3L10 14.608H7zm5 0h3L15 14.608h-3z"/></svg>',
129131
tip: '<g fill="currentColor" fill-rule="evenodd"><path d="M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z"/></g>',
130132
warning:
131133
'<g fill="currentColor" fill-rule="evenodd"><path fill="currentColor" d="m21.171 15.398l-5.912-9.854C14.483 4.251 13.296 3.511 12 3.511s-2.483.74-3.259 2.031l-5.912 9.856c-.786 1.309-.872 2.705-.235 3.83C3.23 20.354 4.472 21 6 21h12c1.528 0 2.77-.646 3.406-1.771s.551-2.521-.235-3.831M12 17.549c-.854 0-1.55-.695-1.55-1.549c0-.855.695-1.551 1.55-1.551s1.55.696 1.55 1.551c0 .854-.696 1.549-1.55 1.549m1.633-7.424c-.011.031-1.401 3.468-1.401 3.468c-.038.094-.13.156-.231.156s-.193-.062-.231-.156l-1.391-3.438a1.8 1.8 0 0 1-.129-.655c0-.965.785-1.75 1.75-1.75a1.752 1.752 0 0 1 1.633 2.375" /></g>',

‎src/assets/styles/aside.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,20 @@ html.dark .aside.aside-tip {
114114
--aside-content-bg-color: rgb(22 163 74 / 0.1);
115115
}
116116

117+
/* Quote Type */
118+
.aside.aside-quote {
119+
--aside-color: color-mix(in srgb, rgb(70, 130, 180), black 30%);
120+
--aside-bg-color: rgb(70 130 180 / 0.14);
121+
--aside-border-color: rgb(70, 130, 180);
122+
--aside-content-bg-color: rgb(70 130 180 / 0.05);
123+
}
124+
html.dark .aside.aside-quote {
125+
--aside-color: color-mix(in srgb, rgb(70, 130, 180), white 80%);
126+
--aside-bg-color: rgb(70 130 180 / 0.16);
127+
--aside-border-color: rgb(70, 130, 180);
128+
--aside-content-bg-color: rgb(70 130 180 / 0.1);
129+
}
130+
117131

118132
/* --- Style Implementations --- */
119133

‎src/content/blog/test/layout-and-responsive-notes.mdx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: "主题布局与响应式逻辑解析"
3+
description: "对 ContentLayout.astro 的布局和响应式设计模式进行分析和记录。"
4+
publishDate: 2025-08-29
5+
tags: ['layout', 'theme', 'internal', 'documentation']
6+
slug: yqeu
7+
---
8+
9+
> 本文档旨在记录对主题核心布局文件 `ContentLayout.astro` 的分析，为后续的二次开发和维护提供参考。
10+
11+
## 1. Slot 布局分析：`sidebar` vs. `bottom-sidebar`
12+
13+
一个常见的误区是认为 `sidebar` 和 `bottom-sidebar` 插槽是垂直相邻的。通过分析 `ContentLayout.astro`，我们发现它们的布局是分离的。
14+
15+
**核心布局结构如下：**
16+
17+
1. 页面主体由一个 `<main>` 标签包裹，它内部采用 `md:flex` 布局，分为两大列：**文章区**和**侧边栏区**。我们传入 `sidebar` slot 的内容（如 TOC）就在这里。
18+
19+
```html
20+
<!-- ContentLayout.astro -->
21+
<main class='...
22+
md:flex'>
23+
<aside id='sidebar'>
24+
<slot name="sidebar" />
25+
</aside>
26+
<article>
27+
<slot />
28+
</article>
29+
</main>
30+
```
31+
32+
2. 在 `<main>` 标签**之后**，有一个完全独立的 `<div class="bottom">` 标签，它也采用 `md:flex` 布局，用于承载文章底部的附加内容。
33+
34+
```html
35+
<!-- ContentLayout.astro -->
36+
<div class='bottom ... md:flex'>
37+
<div class='flex-1'>
38+
<slot name="bottom" />
39+
</div>
40+
<div>
41+
<slot name="bottom-sidebar" />
42+
</div>
43+
</div>
44+
```
45+
46+
**结论与实践指南**
47+
48+
- `sidebar` 用于放置和正文内容同行的侧边栏模块（如 TOC）。
49+
- `bottom-sidebar` 用于放置在整个页面**最底部**的右下角区域的内容。
50+
- **如何在 TOC 下方添加内容？**
51+
正确的做法是在使用布局时（如 `BlogPost.astro`），将 TOC 和其他需要添加的组件一起包裹在 `<Fragment>` 中，再传入 `sidebar` 插槽。
52+
53+
```astro icon="light_astro"
54+
// 示例：在 BlogPost.astro 中
55+
<Fragment slot="sidebar">
56+
<TOC headings={headings} />
57+
<FeedbackButton />
58+
</Fragment>
59+
```
60+
61+
---
62+
63+
## 2. 响应式逻辑解析：移动端 TOC “收缩为按钮”
64+
65+
这个效果是 HTML、CSS 功能类、JavaScript 和 CSS 媒体查询协同工作的结果，逻辑全部封装在 `ContentLayout.astro` 中。
66+
67+
**实现步骤分解：**
68+
69+
1. **隐藏侧边栏**：
70+
- 侧边栏的 `<aside>` 标签拥有 `max-md:hidden` 类。
71+
- **作用**：在移动端（屏幕宽度小于 `md` 断点），整个侧边栏被隐藏。
72+
73+
2. **显示按钮**：
74+
- 在布局的底部，有一个专门用于切换侧边栏的 `<button id="sidebar-btn">`。
75+
- 它拥有 `md:hidden` 类。
76+
- **作用**：与侧边栏相反，这个按钮只在移动端显示。
77+
78+
3. **JavaScript 交互**：
79+
- 文件中的 `<script>` 监听 `#sidebar-btn` 的点击事件。
80+
- 当按钮被点击，脚本会为 `<aside id="sidebar">` 元素**添加或移除一个名为 `show` 的 CSS 类**。
81+
82+
4. **CSS 动画呈现**：
83+
- 文件中的 `<style>` 包含一段 `@media (max-width: 769px)` 媒体查询。
84+
- 它定义了 `aside.show` 的样式：当侧边栏拥有 `show` 类时，会通过 `display: block !important;` 强制显示，并伴有从右侧滑入的动画效果。
85+
86+
**结论与实践指南**
87+
88+
- 这是一个“有状态”的响应式切换，状态由 `.show` 类来管理。
89+
- **如何实现类似的移动端悬浮按钮？**
90+
最简单的方式是复用现有逻辑。例如，可以将你的新按钮也放置在 `<BackToTop>` 组件的 `other-icons` 插槽内，并赋予 `md:hidden` 类，让它和目录按钮一起出现和工作。

0 commit comments

Comments
 (0)