diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 0fa1bfb..d96eada 100644 --- a/docs/.vitepress/config.ts +++ b/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: '根据 MIT License 发布', @@ -160,6 +166,14 @@ export default defineConfig({ 'Copyright © 2020-至今 zjx0905', }, }, + + markdown: { + theme: { + light: 'github-light', + dark: 'github-dark', + }, + }, + vite: { plugins: [ VitePWA({ diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 6cab559..c3e29ca 100644 --- a/docs/.vitepress/theme/index.ts +++ b/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, }; diff --git a/docs/.vitepress/theme/styles/cover.css b/docs/.vitepress/theme/styles/cover.css new file mode 100644 index 0000000..9432bb2 --- /dev/null +++ b/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) {} \ No newline at end of file diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css new file mode 100644 index 0000000..f0f4afa --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/docs/pages/api/axios.md b/docs/pages/api/axios.md index 1f8b5ad..bce6534 100644 --- a/docs/pages/api/axios.md +++ b/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: { diff --git a/docs/pages/api/cancel-token.md b/docs/pages/api/cancel-token.md index 9a5d423..44ff5e8 100644 --- a/docs/pages/api/cancel-token.md +++ b/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', { diff --git a/docs/pages/api/create.md b/docs/pages/api/create.md index 7096170..b62f531 100644 --- a/docs/pages/api/create.md +++ b/docs/pages/api/create.md @@ -6,7 +6,7 @@ `自定义实例`拥有和`axios`相同的调用方式和请求方法的别名。 -```typescript +```ts axios.defaults.baseURL = 'https://www.api.com'; const instance = axios.create({ diff --git a/docs/pages/api/fork.md b/docs/pages/api/fork.md index 2db9bca..218f893 100644 --- a/docs/pages/api/fork.md +++ b/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({ diff --git a/docs/pages/api/get-uri.md b/docs/pages/api/get-uri.md index 94df24e..c99044e 100644 --- a/docs/pages/api/get-uri.md +++ b/docs/pages/api/get-uri.md @@ -4,7 +4,7 @@ 根据配置中的`url`和`params`生成一个`URI`。 -```typescript +```ts const uri = axios.getUri({ url: '/user', params: { diff --git a/docs/pages/api/interceptors.md b/docs/pages/api/interceptors.md index ca390d0..428ce0f 100644 --- a/docs/pages/api/interceptors.md +++ b/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 () { // 在发送请求之前做些什么 }); diff --git a/docs/pages/api/is-axios-error.md b/docs/pages/api/is-axios-error.md index 8f2d859..b07028d 100644 --- a/docs/pages/api/is-axios-error.md +++ b/docs/pages/api/is-axios-error.md @@ -4,7 +4,7 @@ 可以判断当前错误是否来自请求响应,而不是语法错误或者用户主动抛出的错误 -```typescript +```ts axios('/user').catch((error) => { if (axios.isAxiosError(error)) { // 错误是否来自原生接口的 fail 回调 diff --git a/docs/pages/api/is-cancel.md b/docs/pages/api/is-cancel.md index 8a4c8e3..eed55f2 100644 --- a/docs/pages/api/is-cancel.md +++ b/docs/pages/api/is-cancel.md @@ -4,7 +4,7 @@ 可以判断当前错误是否来自取消请求 -```typescript +```ts axios('/user').catch((error) => { if (axios.isCancel(error)) { // 请求被取消了 diff --git a/docs/pages/config/adapter.md b/docs/pages/config/adapter.md index a9c9c0e..8796714 100644 --- a/docs/pages/config/adapter.md +++ b/docs/pages/config/adapter.md @@ -4,7 +4,7 @@ 您可以手动适配当前所处的平台。 -```typescript +```ts axios.defaults.adapter = function adapter(adapterConfig) { const { // 请求类型 diff --git a/docs/pages/config/download.md b/docs/pages/config/download.md index 99b7c81..7fc1830 100644 --- a/docs/pages/config/download.md +++ b/docs/pages/config/download.md @@ -6,7 +6,7 @@ - 只有 get 请求才生效 -```typescript +```ts axios .get( '/file', diff --git a/docs/pages/config/error-handler.md b/docs/pages/config/error-handler.md index fea7d42..60609ac 100644 --- a/docs/pages/config/error-handler.md +++ b/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) { // 做一些想做的事情 diff --git a/docs/pages/config/params-serializer.md b/docs/pages/config/params-serializer.md index dd6d6cc..f941a71 100644 --- a/docs/pages/config/params-serializer.md +++ b/docs/pages/config/params-serializer.md @@ -4,7 +4,7 @@ 可以使用自己的规则去序列化参数。 -```typescript +```ts axios('/user', { paramsSerializer: function paramsSerializer(params) { return qs.stringify(params, { diff --git a/docs/pages/config/preview.md b/docs/pages/config/preview.md index b967225..cde1a47 100644 --- a/docs/pages/config/preview.md +++ b/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, */*'; diff --git a/docs/pages/config/transform-request.md b/docs/pages/config/transform-request.md index 35de710..c84b29b 100644 --- a/docs/pages/config/transform-request.md +++ b/docs/pages/config/transform-request.md @@ -4,7 +4,7 @@ 可以在请求发出之前转换请求数据。 -```typescript +```ts axios('/user', { transformRequest: [ function transformRequest(data, headers) { diff --git a/docs/pages/config/transform-response.md b/docs/pages/config/transform-response.md index aed60dd..0aee5ce 100644 --- a/docs/pages/config/transform-response.md +++ b/docs/pages/config/transform-response.md @@ -4,7 +4,7 @@ 可以在请求发出之前转换请求数据。 -```typescript +```ts axios('/user', { transformResponse: [ function transformResponse(data, headers) { diff --git a/docs/pages/config/upload.md b/docs/pages/config/upload.md index 7979569..ede8dd5 100644 --- a/docs/pages/config/upload.md +++ b/docs/pages/config/upload.md @@ -6,7 +6,7 @@ - 只有 post 请求才生效 -```typescript +```ts axios.post( '/file', { diff --git a/docs/pages/config/validate-status.md b/docs/pages/config/validate-status.md index 3f65704..5203c44 100644 --- a/docs/pages/config/validate-status.md +++ b/docs/pages/config/validate-status.md @@ -4,7 +4,7 @@ 可以让请求按照您的要求成功或者失败。 -```typescript +```ts axios('/user', { validateStatus: function validateStatus(status) { // 这样,状态码在 200 到 400 之间都是请求成功 diff --git a/docs/pages/start.md b/docs/pages/start.md index 405faa1..4912369 100644 --- a/docs/pages/start.md +++ b/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, });