feat: 正文内容渲染

e2e/playground/basic/docs/guide/index.mdx

@@ -0,0 +1,5 @@
+# 介绍
+
+## 什么是 Island.js?
+
+🏝️ Island.js 是一个基于 Vite、React 和 MDX 的静态站点生成器。它的特点是**简单**、**强大**且**高性能**，旨在帮助你以最少的配置专注于编写和部署静态站点。它主要具有以下功能：

e2e/playground/basic/docs/rpress.config.ts

@@ -10,14 +10,14 @@ export default defineConfig({
     sidebar: {
       '/guide/': [
         {
-          text: '教程',
+          text: '介绍',
           items: [
             {
-              text: '快速上手',
+              text: '快速开始',
               link: '/guide/start'
             },
             {
-              text: '如何使用',
+              text: '配置站点',
               link: '/guide/usage'
             }
           ]

src/runtime/theme-default/Layout/DocLayout/index.module.scss

@@ -0,0 +1,16 @@
+$sidebarWidth: calc(
+  var(--island-sidebar-width) + ((100vw - var(--island-layout-max-width)) / 2)
+);
+
+$sidebarPadding: calc(32px + (100vw - var(--island-layout-max-width)) / 2);
+
+.content {
+  padding: 48px 24px;
+  margin-left: calc(
+    var(--island-sidebar-width) + ((100vw - var(--island-layout-max-width)) / 2) +
+      48px
+  );
+  padding-right: $sidebarPadding;
+  // 100 vw - sidebar 的宽度  - 右侧大纲栏的宽度 - padding-right
+  max-width: calc(100vw - $sidebarWidth - var(--island-aside-width) - 100px);
+}

src/runtime/theme-default/Layout/DocLayout/index.tsx

@@ -1,6 +1,7 @@
 import { useLocation } from 'react-router-dom'
-import { usePageData } from '../../../'
+import { Content, usePageData } from '../../../'
 import { Sidebar } from '../../components/Sidebar/'
+import styles from './index.module.scss'
 
 export function DocLayout() {
   const { siteData } = usePageData()
@@ -16,6 +17,13 @@ export function DocLayout() {
   return (
     <div>
       <Sidebar sidebarData={matchedSidebar} pathname={pathname} />
+      <div className={styles.content}>
+        <div>
+          <div className="island-doc">
+            <Content />
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

src/runtime/theme-default/Layout/index.tsx

@@ -4,6 +4,7 @@ import { DocLayout } from './DocLayout'
 import { usePageData } from '../../'
 import '../styles/base.css'
 import '../styles/vars.css'
+import '../styles/doc.css'
 import 'uno.css'
 
 export function Layout() {
@@ -21,7 +22,13 @@ export function Layout() {
   return (
     <div>
       <Nav />
-      {getContent()}
+      <section
+        style={{
+          paddingTop: 'var(--island-nav-height)',
+        }}
+      >
+        {getContent()}
+      </section>
     </div>
   )
 }

src/runtime/theme-default/components/Nav/index.module.scss

@@ -28,4 +28,5 @@
     32px,
     calc(32px + (100vw - var(--island-layout-max-width)) / 2)
   );
+  background-color: var(--island-c-bg);
 }