From 9b87e5b8b4ed17bf4266502b23e280f11d8f0900 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Thu, 16 May 2024 14:18:29 +0800 Subject: [PATCH 1/4] docs: add AutoLink --- docs/reference/components.md | 59 +++++++++++++++++++++++++++++++ docs/zh/reference/components.md | 61 +++++++++++++++++++++++++++++++++ 2 files changed, 120 insertions(+) diff --git a/docs/reference/components.md b/docs/reference/components.md index c06a9a42..9230dceb 100644 --- a/docs/reference/components.md +++ b/docs/reference/components.md @@ -1,5 +1,64 @@ # Built-in Components +## AutoLink + +- Props: + + - config + - Type: `AutoLinkConfig` + - Required: `true` + +```ts +interface AutoLinkConfig { + /** + * Pattern to determine if the link should be active, which has higher priority than `exact` + */ + activeMatch?: string | RegExp + + /** + * The `aria-label` attribute + */ + ariaLabel?: string + + /** + * Whether the link should be active only if the url is an exact match + */ + exact?: boolean + + /** + * URL of the auto link + */ + link: string + + /** + * The `rel` attribute + */ + rel?: string + + /** + * The `target` attribute + */ + target?: string + + /** + * Text of the auto link + */ + text: string +} +``` + +```md + +``` + +- Details: + + This component will automatically render a `` or `` bases on your configuration. + + It's recommended to use this component instead of the `` component if the link can be both internal and external. + + It has a default slot to render the content of the link (default is `config.text`), and you can also add slots named `before` and `after` to render content before and after the text. + ## ClientOnly - Usage: diff --git a/docs/zh/reference/components.md b/docs/zh/reference/components.md index aea84b9d..0f68df81 100644 --- a/docs/zh/reference/components.md +++ b/docs/zh/reference/components.md @@ -1,5 +1,66 @@ # 内置组件 +## AutoLink + +- Props: + + - config + - 类型：`AutoLinkConfig` + - 是否必须：`true` + +```ts +interface AutoLinkConfig { + /** + * 判断该链接是否被激活的模式，优先级高于 `exact` + */ + activeMatch?: string | RegExp + + /** + * `aria-label` 属性 + */ + + ariaLabel?: string + + /** + * 该链接是否只有在 URL 完全匹配时才激活 + */ + exact?: boolean + + /** + * 自动链接的 URL + */ + + link: string + + /** + * `rel` 属性 + */ + rel?: string + + /** + * `target` 属性 + */ + target?: string + + /** + * 自动链接的文本 + */ + text: string +} +``` + +```md + +``` + +- 详情： + + 该组件将根据您的配置自动渲染一个 `` 或 ``。 + + 如果链接既可以是内部链接也可以是外部链接，建议使用这个组件而不是 `` 组件。 + + 它有一个默认插槽用于渲染链接的内容（默认为 `config.text`），您还可以添加名为 `before` 和 `after` 的插槽，在文本之前和之后渲染内容。 + ## ClientOnly - 使用： From a0a48d7af2ff29d772a0a03800fc1697e23e6dcc Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 16 May 2024 20:39:47 +0800 Subject: [PATCH 2/4] docs: improve --- docs/reference/components.md | 27 +++++++++++++++++++++++---- docs/zh/reference/components.md | 27 +++++++++++++++++++++++---- 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/docs/reference/components.md b/docs/reference/components.md index 9230dceb..3a045c39 100644 --- a/docs/reference/components.md +++ b/docs/reference/components.md @@ -47,17 +47,36 @@ interface AutoLinkConfig { } ``` +- Usage: + ```md + + + default slot + + + + + + + + + + + + + + ``` - Details: - This component will automatically render a `` or `` bases on your configuration. + This component will automatically render internal link as ``, and render external link as ``. It will also add necessary attributes correspondingly. - It's recommended to use this component instead of the `` component if the link can be both internal and external. + You can make use of the `before` and `after` slots to render content before and after the text. Also, you can use the `default` slot to render the text (default text is `config.text`). - It has a default slot to render the content of the link (default is `config.text`), and you can also add slots named `before` and `after` to render content before and after the text. + This component is mainly for developing themes. Users won't need it in most cases. For theme authors, it's recommended to use this component to render links that could be either internal or external. ## ClientOnly @@ -132,4 +151,4 @@ interface AutoLinkConfig { If the `active` prop is set to `true`, the link will have an extra `activeClass`. Notice that the active status won't be updated automatically when the route changes. - This component is mainly for developing themes. You won't need it in most cases. For theme authors, it's recommended to use this component instead of the `` component from `vue-router`. + This component is mainly for developing themes. Users won't need it in most cases. For theme authors, it's recommended to use this component to render internal links instead of the `` component from `vue-router`. diff --git a/docs/zh/reference/components.md b/docs/zh/reference/components.md index 0f68df81..ed0830b3 100644 --- a/docs/zh/reference/components.md +++ b/docs/zh/reference/components.md @@ -49,17 +49,36 @@ interface AutoLinkConfig { } ``` +- 使用： + ```md + + + default 插槽 + + + + + + + + + + + + + + ``` - 详情： - 该组件将根据您的配置自动渲染一个 `` 或 ``。 + 该组件将会自动将内部链接渲染为 `` ，将外部链接渲染为 `` ，并添加必要的属性。 - 如果链接既可以是内部链接也可以是外部链接，建议使用这个组件而不是 `` 组件。 + 你可以通过 `before` 和 `after` 插槽，在文本之前和之后渲染内容。也可以通过 `default` 插槽，直接渲染文本（默认文本是 `config.text`）。 - 它有一个默认插槽用于渲染链接的内容（默认为 `config.text`），您还可以添加名为 `before` 和 `after` 的插槽，在文本之前和之后渲染内容。 + 该组件主要是为了开发主题时使用，普通用户在绝大多数情况下并不会用到它。对于主题作者来说，我们建议你在不确定链接是内部链接还是外部链接时，尽量使用这个组件。 ## ClientOnly @@ -134,4 +153,4 @@ interface AutoLinkConfig { 如果 `active` Prop 被设置为 `true` ，那么这个链接会被额外添加一个 `activeClass` 类名。需要注意的是，这里的 active 状态并不会根据当前路由自动更新。 - 该组件主要是为了开发主题时使用。在绝大多数情况下你不会用到它。对于主题作者来说，我们建议你尽可能使用这个组件，而不是使用 `vue-router` 的 `` 组件。 + 该组件主要是为了开发主题时使用，普通用户在绝大多数情况下并不会用到它。对于主题作者来说，我们建议你在渲染内部链接时尽量使用这个组件，而不是使用 `vue-router` 的 `` 组件。 From c76c2a6a4b28e7746577b2b5365326ede05e97a6 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 16 May 2024 20:41:12 +0800 Subject: [PATCH 3/4] chore: tweaks --- docs/zh/reference/components.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/zh/reference/components.md b/docs/zh/reference/components.md index ed0830b3..845ca10d 100644 --- a/docs/zh/reference/components.md +++ b/docs/zh/reference/components.md @@ -29,7 +29,6 @@ interface AutoLinkConfig { /** * 自动链接的 URL */ - link: string /** From 75dee9ec5b1629ea5e23777b7def269b629c81cd Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 16 May 2024 20:41:47 +0800 Subject: [PATCH 4/4] chore: tweaks --- docs/zh/reference/components.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/zh/reference/components.md b/docs/zh/reference/components.md index 845ca10d..95f790d2 100644 --- a/docs/zh/reference/components.md +++ b/docs/zh/reference/components.md @@ -18,7 +18,6 @@ interface AutoLinkConfig { /** * `aria-label` 属性 */ - ariaLabel?: string /**