vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来

简介: vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来

右上角两侧小标志怎样进行设置:

这里两侧的图标,是由nav组件控制,想要修改这里的内容,只要在config.js中配置nav就可以了

export default {
    title: '文档', // 站点的标题
    description: '第一个 VitePress',// 站点的描述,
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Examples', link: '/markdown-examples' }
        ],
        sidebar: [
            {
                text: 'Examples',
                items: [
                    { text: 'Markdown Examples', link: '/markdown-examples' },
                    { text: 'Runtime API Examples', link: '/api-examples' }
                ]
            }
        ],
        socialLinks: [
            { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
        ]
        ,
        footer: {
            copyright: "Copyright "
        },
        // 设置搜索框的样式
        search: {
            provider: "local",
            options: {
                translations: {
                    button: {
                        buttonText: "搜索文档",
                        buttonAriaLabel: "搜索文档",
                    },
                    modal: {
                        noResultsText: "无法找到相关结果",
                        resetButtonTitle: "清除查询条件",
                        footer: {
                            selectText: "选择",
                            navigateText: "切换",
                        },
                    },
                },
            },
        },
    }
}

想要设置成这种下拉框,如何进行设置????

这里要在nav中进行修正,资料如下,具体的写法要写成:

这里的修改点是在themeConfig中下成数组的集合,然后再添加你想要的例外展示页面

   themeConfig: {

       nav: [

           {

               text: '家', items: [

                   { text: '首页', link: '/' },

                   { text: 'markdows示例', link: '/markdown-examples' }

               ]

           },

           { text: '首页', link: '/markdown-examples' }

       ]}

export default {
    title: '文档', // 站点的标题
    description: '第一个 VitePress',// 站点的描述,
    themeConfig: {
        nav: [
            {
                text: '家', items: [
                    { text: '首页', link: '/' },
                    { text: 'markdows示例', link: '/markdown-examples' }
                ]
            },
            { text: '首页', link: '/markdown-examples' }
        ],
        sidebar: [
            {
                text: 'Examples',
                items: [
                    { text: 'Markdown Examples', link: '/markdown-examples' },
                    { text: 'Runtime API Examples', link: '/api-examples' }
                ]
            }
        ],
        socialLinks: [
            { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
        ]
        ,
        footer: {
            copyright: "Copyright "
        },
        // 设置搜索框的样式
        search: {
            provider: "local",
            options: {
                translations: {
                    button: {
                        buttonText: "搜索文档",
                        buttonAriaLabel: "搜索文档",
                    },
                    modal: {
                        noResultsText: "无法找到相关结果",
                        resetButtonTitle: "清除查询条件",
                        footer: {
                            selectText: "选择",
                            navigateText: "切换",
                        },
                    },
                },
            },
        },
    }
}
相关文章
|
Java Linux 开发工具
Jenv 多版本JDK管理
Jenv 可以对多版本JDK进行管理
|
Windows
Mac 技术篇-Windows Remote Desktop远程连接windows系统时键盘输入字母自动变为快捷键操作问题解决方法
Mac 技术篇-Windows Remote Desktop远程连接windows系统时键盘输入字母自动变为快捷键操作问题解决方法
2051 0
Mac 技术篇-Windows Remote Desktop远程连接windows系统时键盘输入字母自动变为快捷键操作问题解决方法
|
前端开发 JavaScript 应用服务中间件
VUE3(十八)vue 路由history 模式去掉 URL 中的 # (nginx)
这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。 但是,去掉#之后的路由在配合php框架使用的时候可能会有问题,就是这个链接不知道该去后端还是去前端的路由。
1560 0
VUE3(十八)vue 路由history 模式去掉 URL 中的 # (nginx)
|
JavaScript 搜索推荐 资源调度
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress,创建文档网站,并编写组件库文档。接着,通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后,文章提供了自动化脚本,帮助开发者一键打包部署静态网站至 GitHub,并发布组件库到 npm。通过这些步骤,读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。
454 2
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
API Java 监控
SpringBoot基于OpenAPI3的接口文档管理快速集成和使用
本文主要简单介绍SpringCloud2023中进行接口文档管理,方便前后端开发和文档维护。文档管理工具基于开源的knife4j封装的openapi3。
2224 3
|
存储 API
Activiti七大接口,28张表详解
Activiti七大接口,28张表详解
1182 0
|
测试技术 数据库 Android开发
大学生心理健康APP的设计与实现
大学生心理健康APP的设计与实现
1303 0
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
850 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
4006 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
缓存 Linux Docker
在Docker中,镜像层级压缩如何实现?
在Docker中,镜像层级压缩如何实现?