docs: add how to custom cursor, close #496

demo/yun/styles/index.ts

@@ -0,0 +1 @@
+import './vars.scss'

demo/yun/styles/vars.scss

@@ -0,0 +1,31 @@
+// custom your css variables here
+:root {
+  /* 侧边栏背景图片 */
+  // --yun-sidebar-bg-img: url("https://cdn.yunyoujun.cn/img/avatar/none.jpg");
+}
+
+:root {
+  --cursor-default: url('https://cdn.yunyoujun.cn/css/md-cursors/pointer.cur');
+  --cursor-pointer: url('https://cdn.yunyoujun.cn/css/md-cursors/link.cur');
+  --cursor-text: url('https://cdn.yunyoujun.cn/css/md-cursors/text.cur');
+}
+
+body {
+  cursor: var(--cursor-default), auto;
+}
+
+a {
+  cursor: var(--cursor-pointer), auto;
+
+  &:hover {
+    cursor: var(--cursor-pointer), auto;
+  }
+}
+
+button {
+  cursor: var(--cursor-pointer), pointer;
+}
+
+input {
+  cursor: var(--cursor-text), text;
+}

docs/pages/guide/custom/styles.md

@@ -78,20 +78,22 @@ For example, you can override the default font in 'styles/css-vars.scss'.
 
 ### Custom Cursor {lang="en"}
 
-::: warning
-
-编写中...
-
-:::
-
-替换鼠标光标，默认关闭。
+替换鼠标光标样式。
 
 例如使用 [Material Design Cursors](https://www.deviantart.com/rosea92/art/Material-Design-Cursors-Dark-756850032)。
 
 - `default`: 默认状态下图标。
 - `pointer`: 指针（即链接状态下）图标。
 - `text`: 文本选择图标。
 
+新建 `styles/index.ts` 文件，引入 `vars.scss`：
+
+```ts
+import './vars.scss'
+```
+
+新建 `styles/vars.scss` 文件：
+
 ```scss
 :root {
   --cursor-default: url('https://cdn.yunyoujun.cn/css/md-cursors/pointer.cur');