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: "切换",
                        },
                    },
                },
            },
        },
    }
}
相关文章
如何设置控制台由底部展示改为右侧位置
这篇文章介绍了如何在Sublime Text编辑器中将控制台从底部展示改为右侧位置,通过使用Package Control来安装相关的插件来实现界面布局的调整。
|
6月前
|
Windows
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
590 0
|
6月前
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
|
4月前
|
JavaScript
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
|
4月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
354 0
|
6月前
LabVIEW更改Tab所选标签的颜色
LabVIEW更改Tab所选标签的颜色
56 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
74 0
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
552 0
|
前端开发
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
58 0