docs: 自定义主题

docs/.vitepress/config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
   titleTemplate: ':title - axios',
   description: '基于 Promise 的 HTTP 请求库，适用于各大小程序平台。',
   srcDir: 'pages',
+
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
@@ -153,6 +154,11 @@ export default defineConfig({
     returnToTopLabel: '返回顶部',
     outlineTitle: '导航栏',
     darkModeSwitchLabel: '主题',
+    sidebarMenuLabel: '菜单',
+    docFooter: {
+      prev: '上一页',
+      next: '下一页',
+    },
     footer: {
       message:
         '根据 <a href="https://github.com/zjx0905/axios-miniprogram/blob/main/LICENSE">MIT License</a> 发布',
@@ -160,6 +166,14 @@ export default defineConfig({
         'Copyright © 2020-至今 <a href="https://github.com/zjx0905">zjx0905</a>',
     },
   },
+
+  markdown: {
+    theme: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+  },
+
   vite: {
     plugins: [
       VitePWA({

docs/.vitepress/theme/index.ts

@@ -1,5 +1,8 @@
 import theme from 'vitepress/theme';
 
+import './styles/vars.css';
+import './styles/cover.css';
+
 export default {
   ...theme,
 };

docs/.vitepress/theme/styles/cover.css

@@ -0,0 +1,139 @@
+.VPNavBar.has-sidebar {
+  background-color: var(--vp-nav-bg-color);
+  border-bottom-color: var(--vp-c-gutter) !important;
+}
+
+.VPNavBar .title {
+  border-bottom: none;
+}
+
+.VPNavBar .content-body {
+  background-color: transparent !important;
+}
+
+.VPNavBar .curtain,
+.VPSidebar .curtain {
+  display: none;
+}
+
+.VPSidebar {
+  margin-top: var(--vp-nav-height);
+  padding-top: 40px !important;
+  height: calc(100% - var(--vp-nav-height));
+  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1) !important;
+}
+
+.VPSidebar.open {
+  margin-top: 0;
+  height: 100%;
+  background-color: var(--vp-nav-bg-color);
+
+}
+
+.VPSidebar .nav {
+  overflow-x: hidden;
+}
+
+
+.VPSidebarItem.level-0 .text {
+  font-size: 15px;
+  font-weight: 500 !important;
+}
+
+.VPSidebarItem.level-1 .text {
+  padding-left: 1em;
+  font-size: 14px;
+  color: var(--vp-c-text-1) !important;
+  font-weight: normal !important;
+}
+
+.VPSidebarItem.level-1.is-active .text {
+  color: var(--vp-c-brand) !important;
+  font-weight: 500 !important;
+}
+
+.VPSidebarItem.level-1.is-active .text::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: #07c160;
+  position: absolute;
+  top: 15px;
+  left: 2px;
+}
+
+.VPBackdrop {
+  background-color: transparent !important;
+  transition: none !important;
+}
+
+.VPLocalNavOutlineDropdown .items {
+  overflow: auto;
+}
+
+.VPHero .tagline {
+  font-weight: normal;
+}
+
+.VPFeature {
+  border: none;
+  border-radius: 8px;
+}
+
+.VPFeature .box {
+  padding: 32px;
+}
+
+.VPFeature .icon {
+  margin-bottom: 24px;
+}
+
+.VPFeature .details {
+  font-weight: normal;
+}
+
+.VPFeature .box {
+  padding: 32px;
+}
+
+.VPFooter .message,
+.VPFooter .copyright {
+  color: var(--vp-c-text-3);
+  font-weight: normal;
+}
+
+.VPContent a {
+  color: var(--vp-c-link);
+}
+
+.language-sh,
+.language-bash,
+.language-ts {
+  border: 1px solid var(--vp-c-gutter);
+}
+
+.vp-code-group .tabs {
+  border-top: 1px;
+  border-left: 1px;
+  border-right: 1px;
+  border-bottom: 0;
+  border-style: solid;
+  border-color: var(--vp-c-gutter);
+}
+
+@media (min-width: 960px) {
+  .VPFeatures .item {
+    width: calc(100% / 2) !important;
+  }
+}
+
+@media (min-width: 640px) {
+  .VPFeatures .item {
+    width: 100%;
+  }
+}
+
+
+@media (min-width: 1440px) {}

docs/.vitepress/theme/styles/vars.css

@@ -0,0 +1,63 @@
+:root {
+  --vp-c-brand: #07c160;
+  --vp-c-brand-light: rgb(7, 193, 96, 0.8);
+  --vp-c-brand-lighter: rgb(7, 193, 96, 0.6);
+  --vp-c-brand-dark: #07c160;
+  --vp-c-brand-darker: #07c160;
+
+  --vp-c-text-light-1: #000;
+  --vp-c-text-light-2: #888;
+  --vp-c-text-light-3: #b2b2b2;
+  --vp-c-text-code: #000000;
+  --vp-c-text-dark-3: #888;
+
+
+  --vp-code-tab-text-color: var(--vp-c-text-light-2);
+  --vp-code-tab-active-text-color: var(--vp-c-text-light-1);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-light-1);
+  --vp-code-tab-divider: var(--vp-c-gutter);
+  --vp-code-block-bg-light: #ffffff;
+  --vp-code-block-bg: #f9f9fa;
+
+  --vp-code-copy-code-active-text: #000000;
+  --vp-code-copy-code-bg: #ffffff;
+  --vp-code-copy-code-hover-bg: #f3f4f6;
+  --vp-code-copy-code-border-color: rgba(31, 35, 40, 0.15);
+  --vp-code-copy-code-hover-border-color: rgba(31, 35, 40, 0.15);
+
+  --vp-c-mute: #f9f9fa;
+  --vp-c-gutter: rgba(0, 0, 0, 0.06);
+  --vp-c-link: #576b95;
+  --vp-c-bg-alt: #00000003;
+  --vp-c-bg-soft: var(--vp-c-bg-alt);
+  --vp-button-alt-bg: #ffffff;
+
+  --vp-button-alt-hover-bg: var(--vp-c-bg-alt);
+  --vp-nav-bg-color: #f7f7f7;
+
+  --vp-sidebar-width: 340px;
+}
+
+.dark {
+  --vp-c-text-dark-1: #ffffff;
+  --vp-c-text-code: #ffffff;
+
+  --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
+
+  --vp-code-block-bg: #0d1117;
+  --vp-c-bg: #020409;
+  --vp-c-bg-alt: #0d1117;
+  --vp-nav-bg-color: #161b22;
+
+  --vp-c-mute: #313136;
+  --vp-c-gutter: #30363d;
+  --vp-c-link: #2f81f7;
+  --vp-button-alt-bg: #21262d;
+
+  --vp-code-copy-code-active-text: #ffffff;
+  --vp-code-copy-code-bg: #21262d;
+  --vp-code-copy-code-hover-bg: #21262d;
+  --vp-code-copy-code-border-color: rgba(240, 246, 252, 0.1);
+  --vp-code-copy-code-hover-border-color: #8b949e;
+}

docs/pages/api/axios.md

@@ -6,7 +6,7 @@
 
 直接实例化`axios.Axios`可以得到一个`原始实例`，不能当函数调用，传入的自定义配置就是`原始实例`的默认配置，而不会像`axios.create(defaults)`一样去合并`axios`中的默认配置。
 
-```typescript
+```ts
 const instance = new axios.Axios({
   beseURL: 'https://www.api.com',
   params: {

docs/pages/api/cancel-token.md

@@ -4,7 +4,7 @@
 
 可以使用`CancelToken`取消已经发出的请求。
 
-```typescript
+```ts
 let cancel;
 
 axios('/api', {
@@ -18,7 +18,7 @@ cancel('取消请求');
 
 还可以使用`CancelToken.source`工厂方法创建`CancelToken`。
 
-```typescript
+```ts
 const source = axios.CancelToken.source();
 
 axios('/api', {

docs/pages/api/create.md

@@ -6,7 +6,7 @@
 
 `自定义实例`拥有和`axios`相同的调用方式和请求方法的别名。
 
-```typescript
+```ts
 axios.defaults.baseURL = 'https://www.api.com';
 
 const instance = axios.create({

docs/pages/api/fork.md

@@ -8,7 +8,7 @@
 
 `domain` 除了拥有和 `axios` 相同的调用方式和请求方法的别名之外，同时还可以复用 `axios` 上的拦截器，这一点是 `axios.create(defaults)` 做不到了。
 
-```typescript
+```ts
 axios.defaults.baseURL = 'https://www.api.com';
 
 const domain = axios.fork({

docs/pages/api/get-uri.md

@@ -4,7 +4,7 @@
 
 根据配置中的`url`和`params`生成一个`URI`。
 
-```typescript
+```ts
 const uri = axios.getUri({
   url: '/user',
   params: {

docs/pages/api/interceptors.md

@@ -4,7 +4,7 @@
 
 可以先拦截请求或响应，然后再由 then 或 catch 处理。
 
-```typescript
+```ts
 // 添加请求拦截器
 axios.interceptors.request.use(
   function (config) {
@@ -32,7 +32,7 @@ axios.interceptors.response.use(
 
 如果以后需要删除拦截器，则可以。
 
-```typescript
+```ts
 const myInterceptor = axios.interceptors.request.use(function () {
   // 在发送请求之前做些什么
 });
@@ -41,7 +41,7 @@ axios.interceptors.request.eject(myInterceptor);
 
 还可以将拦截器添加到`axios`的`自定义实例`中。
 
-```typescript
+```ts
 const myInterceptor = instance.interceptors.request.use(function () {
   // 在发送请求之前做些什么
 });

docs/pages/api/is-axios-error.md

@@ -4,7 +4,7 @@
 
 可以判断当前错误是否来自请求响应，而不是语法错误或者用户主动抛出的错误
 
-```typescript
+```ts
 axios('/user').catch((error) => {
   if (axios.isAxiosError(error)) {
     // 错误是否来自原生接口的 fail 回调

docs/pages/api/is-cancel.md

@@ -4,7 +4,7 @@
 
 可以判断当前错误是否来自取消请求
 
-```typescript
+```ts
 axios('/user').catch((error) => {
   if (axios.isCancel(error)) {
     // 请求被取消了

docs/pages/config/adapter.md

@@ -4,7 +4,7 @@
 
 您可以手动适配当前所处的平台。
 
-```typescript
+```ts
 axios.defaults.adapter = function adapter(adapterConfig) {
   const {
     // 请求类型

docs/pages/config/download.md

@@ -6,7 +6,7 @@
 
 - 只有 get 请求才生效
 
-```typescript
+```ts
 axios
   .get(
     '/file',

docs/pages/config/error-handler.md

@@ -4,7 +4,7 @@
 
 可以添加到默认配置中，统一处理错误。
 
-```typescript
+```ts
 axios.defaults.errorHandler = function errorHandler(error) {
   // 做一些想做的事情
   return Promise.reject(error);
@@ -20,7 +20,7 @@ const instance = axios.create({
 
 也可以发送请求时通过自定义配置传入。
 
-```typescript
+```ts
 axios('/user', {
   errorHandler: function errorHandler(error) {
     // 做一些想做的事情

docs/pages/config/params-serializer.md

@@ -4,7 +4,7 @@
 
 可以使用自己的规则去序列化参数。
 
-```typescript
+```ts
 axios('/user', {
   paramsSerializer: function paramsSerializer(params) {
     return qs.stringify(params, {

docs/pages/config/preview.md

@@ -2,7 +2,7 @@
 
 ## 全局默认配置`axios.defaults`
 
-```typescript
+```ts
 axios.defaults.baseURL = 'https://www.api.com';
 axios.defaults.headers.common['Accept'] = 'application/json, test/plain, */*';
 axios.defaults.headers.post['Content-Type'] =
@@ -13,7 +13,7 @@ axios.defaults.headers.post['Content-Type'] =
 
 可以创建时传入。
 
-```typescript
+```ts
 const instance = axios.create({
   baseURL: 'https://www.api.com',
   headers: {
@@ -29,7 +29,7 @@ const instance = axios.create({
 
 也可以创建后修改。
 
-```typescript
+```ts
 instance.defaults.baseURL = 'https://www.api.com';
 instance.defaults.headers.common['Accept'] =
   'application/json, test/plain, */*';

docs/pages/config/transform-request.md

@@ -4,7 +4,7 @@
 
 可以在请求发出之前转换请求数据。
 
-```typescript
+```ts
 axios('/user', {
   transformRequest: [
     function transformRequest(data, headers) {

docs/pages/config/transform-response.md

@@ -4,7 +4,7 @@
 
 可以在请求发出之前转换请求数据。
 
-```typescript
+```ts
 axios('/user', {
   transformResponse: [
     function transformResponse(data, headers) {

docs/pages/config/upload.md

@@ -6,7 +6,7 @@
 
 - 只有 post 请求才生效
 
-```typescript
+```ts
 axios.post(
   '/file',
   {

docs/pages/config/validate-status.md

@@ -4,7 +4,7 @@
 
 可以让请求按照您的要求成功或者失败。
 
-```typescript
+```ts
 axios('/user', {
   validateStatus: function validateStatus(status) {
     // 这样，状态码在 200 到 400 之间都是请求成功

docs/pages/start.md

@@ -30,7 +30,7 @@ pnpm install -D axios-miniprogram
 
 ### 如何引入
 
-```typescript
+```ts
 // esm
 import axios from 'axios-miniprogram';
 // cjs
@@ -43,7 +43,7 @@ axios('/user');
 
 可以通过将相关配置传递给`axios`来发送请求。
 
-```typescript
+```ts
 // 发送 GET 请求
 axios({
   url: '/user',
@@ -79,7 +79,7 @@ axios({
 
 也可以通过直接把`url`传给`axios`来发送请求。
 
-```typescript
+```ts
 // 默认发送 GET 请求
 axios('/user')
   .then((response) => {
@@ -115,7 +115,7 @@ axios('/user', {
 
 常用例子，其他同理：
 
-```typescript
+```ts
 // 发送 GET 请求
 axios.get('/user');
 
@@ -163,7 +163,7 @@ axios.post(
 
 您可以使用动态 URL 提高 RESTful API 的书写体验。
 
-```typescript
+```ts
 axios.get('/user/:id', {
   id: 1,
 });