Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

配置nav的时候 支持children选项 可以方便进行nav的分组 #3983

Closed
4 tasks done
LiCHUYA opened this issue Jun 24, 2024 · 4 comments
Closed
4 tasks done

Comments

@LiCHUYA
Copy link

LiCHUYA commented Jun 24, 2024

Is your feature request related to a problem? Please describe.

在类似于下拉菜单分组的时候,往往会出现items嵌套层级比较深,不好进一步扩展维护
image

Describe the solution you'd like

我已经写好了demo,并且在vitepress源码中已经更改,但本人由于第一次pr,不太会使用,在这附上一些代码片段,以及使用示例。
`import type { DefaultTheme } from 'vitepress'
const handleData = [
{
id: 0,
text: '学习心得1',
children: [
{
groupId: '0-0',
text: '学习心得2',
link: 'xxx',
},
{
groupId: '0-0',
text: '学习心得3',
link: 'xxx',
},
{
groupId: '0-1',
text: '学习心得4',
link: 'xxx',
},
{
groupId: '0-2',
text: '学习心得5',
link: 'xxx',
},
{
groupId: '0-3',
text: '学习心得6',
link: 'xxx',
},
],
},
{
id: 1,
text: '学习心得1',
children: [
{
groupId: '1-1',
text: '学习心得2',
link: 'xxx',
},
{
groupId: '1-2',
text: '学习心得3',
link: 'xxx',
},
{
groupId: '1-3',
text: '学习心得4',
link: 'xxx',
},
],
},
]

function transformHandleDataToNav(handleData) {
return handleData.map((dataItem) => {
// 创建顶级nav项
const navItem = { text: dataItem.text, items: [] }

// 如果有子项,根据groupId进行分组
if (dataItem.children) {
  const groups = new Map()

  dataItem.children.forEach((child) => {
    const groupId = child.groupId.split('-')[1] // 假设groupId格式为"id-index"
    if (!groups.has(groupId)) {
      groups.set(groupId, [])
    }
    groups.get(groupId).push({ text: child.text, link: child.link })
  })

  // 将分组转换为items数组
  groups.forEach((groupItems) => {
    navItem.items.push({ items: groupItems })
  })
} else if (dataItem.link) {
  // 如果没有子项但有链接,直接设置链接
  navItem.link = dataItem.link
}

return navItem

})
}

const nav1 = transformHandleDataToNav(handleData)
console.log(nav1)

export const nav: DefaultTheme.Config['nav'] = nav1
`,在这个示例中,我们可以清晰的配置navGroup选项,只需要在groupid去配置,以"id-index"手动式声明,当然也可以在runtime时编译
添加id之类的。

Describe alternatives you've considered

No response

Additional context

No response

Validations

@LiCHUYA
Copy link
Author

LiCHUYA commented Jun 24, 2024

code-snapshot-1719205808373

@11-shou
Copy link

11-shou commented Jun 27, 2024

我也这么希望,兄嘚

@brc-dd
Copy link
Member

brc-dd commented Jun 27, 2024

Duplicate of #3816

@brc-dd brc-dd marked this as a duplicate of #3816 Jun 27, 2024
@brc-dd brc-dd closed this as completed Jun 27, 2024
@Zhengqbbb
Copy link
Contributor

在开发完成前,如果定义需求可以这样玩:
https://vitepress.dev/guide/extending-default-theme#overriding-internal-components

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants