From 3adc965dd09490b7efa1cce9f09b0a3b30970277 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Wed, 19 Apr 2023 17:30:39 +0800
Subject: ✨优化文档
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.docs/content/2.api/2.composables.md | 88 +++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 docs/.docs/content/2.api/2.composables.md

(limited to 'docs/.docs/content/2.api/2.composables.md')

diff --git a/docs/.docs/content/2.api/2.composables.md b/docs/.docs/content/2.api/2.composables.md
new file mode 100644
index 0000000..4c0bea2
--- /dev/null
+++ b/docs/.docs/content/2.api/2.composables.md
@@ -0,0 +1,88 @@
+# Composables
+
+Discover the Docus composables to use in your custom Vue components and pages.
+
+## `useDocus()`
+
+`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts`
+
+- `config` refers to the merged config of the current page.
+
+`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file.
+
+The configs in `app.config` file will be used as defaults.
+
+```vue
+<script setup>
+const { config } = useDocus()
+</script>
+
+<template>
+  <div>
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
+  </div>
+</template>
+```
+
+- `tree` refers to the current navigation tree that is displayed in the `aside` component.
+
+```vue
+<script setup>
+const { tree } = useDocus()
+</script>
+
+<template>
+  <DocsAsideTree :links="tree" />
+</template>
+```
+
+::source-link
+---
+source: "composables/useDocus.ts"
+---
+::
+
+## `useMenu()`
+
+`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally.
+
+```ts
+const {
+  // Is menu visible
+  visible,
+  // Close menu function
+  close,
+  // Open menu function
+  open,
+  // Toggle menu function
+  toggle
+} = useMenu()
+```
+
+::source-link
+---
+source: "composables/useMenu.ts"
+---
+::
+
+## `useScrollspy()`
+
+`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings.
+
+```ts
+const {
+  // Headings on the page
+  visibleHeadings,
+  // Active headings (for the current page)
+  activeHeadings,
+  // Update headings (an array of DOM nodes)
+  updateHeadings
+} = useScrollspy()
+```
+
+::source-link
+---
+source: "composables/useScrollspy.ts"
+---
+::
-- 
cgit v1.2.3-70-g09d2