docs(demo): 开发者文档 布局

README.md

@@ -47,6 +47,7 @@ All content in the [Content Collections (`src/content`)](https://github.com/Yue-
     <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt="">
     <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
 </a>；
+
 [内容集合（`src/content`）](https://github.com/Yue-plus/astro-arknights/tree/main/src/content) 内的所有内容使用
 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
     CC BY-NC-SA 4.0

src/components/DemoSlotBlock.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+    title: string,
+    fontSize: string,
+    background: string,
+}
+
+const {title, fontSize, background} = Astro.props
+---
+
+<div class="w-full h-full font-benderBold flex items-center justify-center select-none"
+     style=`background: ${background}; font-size: ${fontSize};`>
+    {title}
+</div>

src/content/docs/02-开发者文档/布局.md

@@ -0,0 +1,12 @@
+---
+title: 布局
+---
+
+# 布局
+
+> 参考官方文档：[布局 - 基础知识](https://docs.astro.build/zh-cn/basics/layouts/)
+
+## 布局插槽（slot）关系展示
+
+- [RootLayout](../../demo/RootLayoutSlot)
+  + [InfoLayout](../../demo/InfoLayoutSlot)

src/layouts/InfoLayout.astro

@@ -75,7 +75,7 @@ const subNavigationItems = Astro.props.subNavigationItems
     {
         Astro.slots.has("tool-panel") &&
             <div id="info-layout-tool-panel-slot"
-                 class="h-[3.75rem] mb-[5.75rem] fixed bottom-0 left-0 landscape:left-auto landscape:right-0">
+                 class="h-[3.75rem] mb-[5.75rem] absolute bottom-0 right-0 z-10">
                 <slot name="tool-panel"/>
             </div>
     }

src/pages/demo/InfoLayoutSlot.astro

@@ -0,0 +1,25 @@
+---
+import InfoLayout from "../../layouts/InfoLayout.astro";
+import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
+import {SubNavigationItem} from "../../_types/SubNavigationItem";
+
+const subNavigationItems: SubNavigationItem[] = [...Array(100)]
+    .map((item, index): SubNavigationItem => ({title: `子导航项 - ${index}`, href: ""}))
+---
+
+<InfoLayout {...{subNavigationItems}}>
+    <DemoSlotBlock slot="left-aside" title="LeftAsideSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, darkblue, darksalmon)"/>
+
+    <DemoSlotBlock title="Slot" fontSize="25rem"
+                   background="linear-gradient(to bottom right, darkred, darkgreen)"/>
+
+    <DemoSlotBlock slot="aside-header" title="AsideHeaderSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkSlateGray, DarkOrchid)"/>
+
+    <DemoSlotBlock slot="aside-footer" title="AsideFooterSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkMagenta, DarkOliveGreen )"/>
+
+    <DemoSlotBlock slot="tool-panel" title="ToolPanelSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkGoldenRod, Crimson)"/>
+</InfoLayout>

src/pages/demo/RootLayoutSlot.astro

@@ -0,0 +1,8 @@
+---
+import RootLayout from "../../layouts/RootLayout.astro"
+import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
+---
+
+<RootLayout>
+    <DemoSlotBlock title="Slot" fontSize="25rem" background="linear-gradient(to bottom right, darkred, darkgreen)"/>
+</RootLayout>