新增 quote 类型

Author: CatCodeMe

packages/pure/components/user/Aside.astro

@@ -11,8 +11,7 @@ const asideVariants = [
   'tip',
   'warning',
   'caution',
-  'success',
-  'error'
+  'quote'
 ] as const
 const asideStyles = ['solid', 'card'] as const
 
@@ -23,10 +22,9 @@ const defaultIcons: Record<(typeof asideVariants)[number], IconName> = {
   info: 'callout_info',
   note: 'note',
   tip: 'tip',
-  success: 'tip',
   warning: 'warning',
   caution: 'caution',
-  error: 'caution'
+  quote: 'quote'
 } as const
 
 interface Props {

packages/pure/libs/icons.ts

@@ -126,6 +126,8 @@ export const BuiltInIcons = {
   callout_info:
     '<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>',
   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>',
+  quote:
+    '<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>',
   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>',
   warning:
     '<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

@@ -114,6 +114,20 @@ html.dark .aside.aside-tip {
   --aside-content-bg-color: rgb(22 163 74 / 0.1);
 }
 
+/* Quote Type */
+.aside.aside-quote {
+  --aside-color: color-mix(in srgb, rgb(70, 130, 180), black 30%);
+  --aside-bg-color: rgb(70 130 180 / 0.14);
+  --aside-border-color: rgb(70, 130, 180);
+  --aside-content-bg-color: rgb(70 130 180 / 0.05);
+}
+html.dark .aside.aside-quote {
+  --aside-color: color-mix(in srgb, rgb(70, 130, 180), white 80%);
+  --aside-bg-color: rgb(70 130 180 / 0.16);
+  --aside-border-color: rgb(70, 130, 180);
+  --aside-content-bg-color: rgb(70 130 180 / 0.1);
+}
+
 
 /* --- Style Implementations --- */
 

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

@@ -0,0 +1,90 @@
+---
+title: "主题布局与响应式逻辑解析"
+description: "对 ContentLayout.astro 的布局和响应式设计模式进行分析和记录。"
+publishDate: 2025-08-29
+tags: ['layout', 'theme', 'internal', 'documentation']
+slug: yqeu
+---
+
+> 本文档旨在记录对主题核心布局文件 `ContentLayout.astro` 的分析，为后续的二次开发和维护提供参考。
+
+## 1. Slot 布局分析：`sidebar` vs. `bottom-sidebar`
+
+一个常见的误区是认为 `sidebar` 和 `bottom-sidebar` 插槽是垂直相邻的。通过分析 `ContentLayout.astro`，我们发现它们的布局是分离的。
+
+**核心布局结构如下：**
+
+1.  页面主体由一个 `<main>` 标签包裹，它内部采用 `md:flex` 布局，分为两大列：**文章区**和**侧边栏区**。我们传入 `sidebar` slot 的内容（如 TOC）就在这里。
+
+    ```html
+    <!-- ContentLayout.astro -->
+    <main class='...
+    md:flex'>
+      <aside id='sidebar'>
+        <slot name="sidebar" />
+      </aside>
+      <article>
+        <slot />
+      </article>
+    </main>
+    ```
+
+2.  在 `<main>` 标签**之后**，有一个完全独立的 `<div class="bottom">` 标签，它也采用 `md:flex` 布局，用于承载文章底部的附加内容。
+
+    ```html
+    <!-- ContentLayout.astro -->
+    <div class='bottom ... md:flex'>
+      <div class='flex-1'>
+        <slot name="bottom" />
+      </div>
+      <div>
+        <slot name="bottom-sidebar" />
+      </div>
+    </div>
+    ```
+
+**结论与实践指南**
+
+-   `sidebar` 用于放置和正文内容同行的侧边栏模块（如 TOC）。
+-   `bottom-sidebar` 用于放置在整个页面**最底部**的右下角区域的内容。
+-   **如何在 TOC 下方添加内容？**
+    正确的做法是在使用布局时（如 `BlogPost.astro`），将 TOC 和其他需要添加的组件一起包裹在 `<Fragment>` 中，再传入 `sidebar` 插槽。
+
+    ```astro icon="light_astro"
+    // 示例：在 BlogPost.astro 中
+    <Fragment slot="sidebar">
+      <TOC headings={headings} />
+      <FeedbackButton />
+    </Fragment>
+    ```
+
+---
+
+## 2. 响应式逻辑解析：移动端 TOC “收缩为按钮”
+
+这个效果是 HTML、CSS 功能类、JavaScript 和 CSS 媒体查询协同工作的结果，逻辑全部封装在 `ContentLayout.astro` 中。
+
+**实现步骤分解：**
+
+1.  **隐藏侧边栏**：
+    -   侧边栏的 `<aside>` 标签拥有 `max-md:hidden` 类。
+    -   **作用**：在移动端（屏幕宽度小于 `md` 断点），整个侧边栏被隐藏。
+
+2.  **显示按钮**：
+    -   在布局的底部，有一个专门用于切换侧边栏的 `<button id="sidebar-btn">`。
+    -   它拥有 `md:hidden` 类。
+    -   **作用**：与侧边栏相反，这个按钮只在移动端显示。
+
+3.  **JavaScript 交互**：
+    -   文件中的 `<script>` 监听 `#sidebar-btn` 的点击事件。
+    -   当按钮被点击，脚本会为 `<aside id="sidebar">` 元素**添加或移除一个名为 `show` 的 CSS 类**。
+
+4.  **CSS 动画呈现**：
+    -   文件中的 `<style>` 包含一段 `@media (max-width: 769px)` 媒体查询。
+    -   它定义了 `aside.show` 的样式：当侧边栏拥有 `show` 类时，会通过 `display: block !important;` 强制显示，并伴有从右侧滑入的动画效果。
+
+**结论与实践指南**
+
+-   这是一个“有状态”的响应式切换，状态由 `.show` 类来管理。
+-   **如何实现类似的移动端悬浮按钮？**
+    最简单的方式是复用现有逻辑。例如，可以将你的新按钮也放置在 `<BackToTop>` 组件的 `other-icons` 插槽内，并赋予 `md:hidden` 类，让它和目录按钮一起出现和工作。