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: "切换",
                        },
                    },
                },
            },
        },
    }
}
相关文章
|
7月前
|
前端开发 C语言
C语言06-HelloWorld执行流程分析
C语言06-HelloWorld执行流程分析
C语言06-HelloWorld执行流程分析
|
9月前
|
存储 前端开发 API
基于SpringBoot+Vue的智能在线考试系统的设计与实现
基于SpringBoot+Vue的智能在线考试系统的设计与实现
802 0
|
9月前
|
程序员 编译器 C语言
最新Dev-C++下载安装以及C语言环境搭建教程(含C语言入门教程)
最新Dev-C++下载安装以及C语言环境搭建教程(含C语言入门教程)
1006 0
|
移动开发 缓存 JavaScript
2021最新阿里代码规范(前端篇)
2021最新阿里代码规范(前端篇)
50825 11
2021最新阿里代码规范(前端篇)
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
|
5月前
|
算法 前端开发 开发工具
vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客
这篇文章详细介绍了如何从零开始使用VitePress搭建个人博客,包括项目初始化、配置美化及部署全流程。
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
bug:The following dependencies are imported but could not be resolved lib-flexibleflexible
bug:The following dependencies are imported but could not be resolved lib-flexibleflexible
1183 0
|
3月前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
199 4
|
9月前
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
269 0

热门文章

最新文章