One

主题

One2025-05-24
3292
18.2m
Get...

导航栏格式 ​

默认风格 ​

默认风格 ​

ts
export default defineConfig({

  themeConfig: {
    //导航栏
    nav: [
      { text: '首页', link: '/' }, 
      { text: '快速上手', link: '/getting-started' },
      { text: 'VitePress', link: 'https://vitepress.dev/' },
    ], 
  },

})

效果：

image-20250525083810797

下拉式菜单导航 风格 ​

若想要下拉式菜单导航，就需要加一个 iteams

ts
export default defineConfig({

  themeConfig: {
    //导航栏
    nav: [
      { text: '首页', link: '/' }, 
      {
        text: '指南',
        items: [
          { text: '前言', link: '/preface' },
          { text: '快速上手', link: '/getting-started' },
          { text: '配置', link: '/configuration' }
        ]
      },
      { text: 'VitePress', link: 'https://vitepress.dev/' },
    ], 
  },

})

效果：

image-20250525083845218

分组风格 ​

给下拉菜单赋予分组标题，就要再次嵌套 iteams

ts
export default defineConfig({

  themeConfig: {
    //导航栏
    nav: [
      { text: '首页', link: '/' },
      {
        text: '指南',
        items: [
          {
            // 分组标题1
            text: '介绍',
            items: [
              { text: '前言', link: '/preface' },
            ],
          },
          {
            // 分组标题2
            text: '基础设置',
            items: [
              { text: '快速上手', link: '/getting-started' },
              { text: '配置', link: '/configuration' },
              { text: '页面', link: '/page' },
              { text: 'Frontmatter', link: '/frontmatter' },
            ],
          },
          {
            // 分组标题3
            text: '进阶玩法',
            items: [
              { text: 'Markdown', link: '/Markdown' },
              { text: '静态部署', link: '/assets' },
            ],
          },
        ],
      },
      { text: 'VitePress', link: 'https://vitepress.dev/' },
    ],
  },

})

image-20250524094158267

导航栏图标 ​

分组风格（html方式） ​

给下拉菜单赋予分组标题，就要再次嵌套 iteams

ts
      {
        text: '🗃️笔记',
        items: [
          {
            // 分组标题1
            text: '运维',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Linux</span>
                  </div>
                  `,
                link: '/linux',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/nginx.png" alt="" style="width: 16px; height: 16px;">
                    <span>Nginx</span>
                  </div>
                  `,
                link: '/nginx',
              },
            ],
          },
          {
            // 分组标题2
            text: '前端',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/html.png" alt="" style="width: 16px; height: 16px;">
                    <span>Html</span>
                  </div>
                  `,
                link: '/html',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/css.png" alt="" style="width: 16px; height: 16px;">
                    <span>Css</span>
                  </div>
                  `,
                link: '/css',
              },
            ],
          },
        ],
      },

image-20250524094158267

自己html最终版 ​

ts
    nav: [
      { text: "🏡首页", link: "/" },

      // 笔记
      {
        text: '🗃️笔记',
        items: [
          {
            // 分组标题1
            text: '运维',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Linux</span>
                  </div>
                  `,
                link: '/linux',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/nginx.png" alt="" style="width: 16px; height: 16px;">
                    <span>Nginx</span>
                  </div>
                  `,
                link: '/nginx',
              },
            ],
          },
          {
            // 分组标题2
            text: '前端',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/html.png" alt="" style="width: 16px; height: 16px;">
                    <span>Html</span>
                  </div>
                  `,
                link: '/html',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/css.png" alt="" style="width: 16px; height: 16px;">
                    <span>Css</span>
                  </div>
                  `,
                link: '/css',
              },
            ],
          },
          {
            // 分组标题3
            text: '编程',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/python.png" alt="" style="width: 16px; height: 16px;">
                    <span>Python</span>
                  </div>
                  `,
                link: '/python',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/go.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Go</span>
                  </div>
                  `,
                link: '/go',
              },
            ],
          },
          {
            text: '专题',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/博客.svg" alt="" style="width: 16px; height: 16px;">
                    <span>博客搭建</span>
                  </div>
                  `,
                link: '/blog',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/前端demo.svg" alt="" style="width: 16px; height: 16px;">
                    <span>前端demo</span>
                  </div>
                  `,
                link: '/qianduan-demo',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Git</span>
                  </div>
                  `,
                link: '/git',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/面试.svg" alt="" style="width: 16px; height: 16px;">
                    <span>面试</span>
                  </div>
                  `,
                link: '/mianshi',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/NAS.svg" alt="" style="width: 16px; height: 16px;">
                    <span>NAS</span>
                  </div>
                  `,
                link: '/NAS',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
                    <span>脚本</span>
                  </div>
                  `,
                link: '/jiaoben',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/工具.svg" alt="" style="width: 16px; height: 16px;">
                    <span>工具</span>
                  </div>
                  `,
                link: '/tools',
              },
            ],
          },
          {
            text: '开源项目',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Teek-one</span>
                  </div>
                  `,
                link: '/teek',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/Typora.svg" alt="" style="width: 16px; height: 16px;">
                    <span>Typora-one</span>
                  </div>
                  `,
                link: '/typora-theme-one',
              },
              
            ],
          },
        ],
      },  

      // 生活
      {
        text: '🏓生活',
        items: [
          {
            // 分组标题1
            text: '娱乐',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
                    <span>相册</span>
                  </div>
                  `,
                link: 'https://photo.onedayxyy.cn/',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
                    <span>电影</span>
                  </div>
                  `,
                link: '/movie',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
                    <span>音乐</span>
                  </div>
                  `,
                link: '/music',
              },
            ],
          },
          {
            // 分组标题2
            text: '小屋',
            items: [
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
                    <span>精神小屋</span>
                  </div>
                  `,
                link: '/love',
              },
              {
                text: `
                  <div style="display: flex; align-items: center; gap: 4px;">
                    <img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
                    <span>时间管理</span>
                  </div>
                  `,
                link: '/time-plan',
              },
            ],
          },
        ],
      },  

      // 索引
      {
        text: '👏索引',
        items: [
          { text: '📃分类页', link: '/categories' },
          { text: '🔖标签页', link: '/tags' },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
                <span>归档页</span>
              </div>
              `,
            link: '/archives',
          },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
                <span>清单页</span>
              </div>
              `,
            link: '/articleOverview',
          },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
                <span>登录页</span>
              </div>
              `,
            link: '/login',
          },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
                <span>风险链接提示页</span>
              </div>
              `,
            link: '/risk-link?target=https://onedayxyy.cn/',
          },
        ],
      },  

      // 关于
      {
        text: '🍷关于',
        items: [
          { text: '👋关于我', link: '/about-me' },
          { text: '🎉关于本站', link: '/about-website' },
          { text: '🌐网站导航', link: '/websites' },          
          { text: "👂留言区", link: "/liuyanqu" },
          { text: "💡思考", link: "/thinking" },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
                <span>时间轴</span>
              </div>
              `,
            link: 'https://onedayxyy.cn/time-line/',
          },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
                <span>网站统计</span>
              </div>
              `,
            link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
          },
          {
            text: `
              <div style="display: flex; align-items: center; gap: 4px;">
                <img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
                <span>站点监控</span>
              </div>
              `,
            link: 'https://status.onedayxyy.cn/status/monitor',
          },

        ],
      },       
    ],

Hyde 组件方式版 ​

ts
// nav导航栏配置
import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
export const Nav = [
  {
    text: "🏡首页",
    items: [
      { text: "首页", link: "/" },
      { text: "起始页", link: "https://hyde.seasir.top/" },
    ],
  },
  {
    text: "📖笔记专栏",
    items: [
      {
        component: "NavIcon",
        props: TeekIcon,
      },
      {
        component: "NavIcon",
        props: VdoingIcon,
      },
      {
        component: "NavIcon",
        props: SSLIcon,
      },
      {
        component: "NavIcon",
        props: BlogIcon,
      },
    ],
  },
  {
    text: "🧰工具资源", // 目录页链接，此处 link 是 vdoing 主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
    items: [
      { text: "开发工具", link: "/tools/" },
      { text: "VSCode配置", link: "/vscode/" },
      { text: "Git教程", link: "/git/" },
      { text: "Docker", link: "/Docker/" },
      { text: "实用软件", link: "/software/" },
    ],
  },
  {
    text: "🏙️生活娱乐",
    items: [
      { text: "相册", link: "https://photo.seasir.top/" },
      { text: "音乐", link: "http://music.alger.fun/#/" },
      { text: "电影", link: "/go-cata/" },
    ],
  },
  { text: "👂畅所欲言", link: "/message-area/" },
  {
    text: "👏文章索引",
    items: [
      {
        text: "本站",
        items: [
          { text: "分类", link: "/categories/" },
          { text: "标签", link: "/tags/" },
          { text: "归档", link: "/archives/" },
          { text: "清单", link: "/articleOverview/" },
          {
            text: "风险提示页",
            link: "/risk-link?target=http://localhost:5173/",
          },
        ],
      },
    ],
  },
  {
    text: "🌐站点信息",
    items: [
      { text: "关于博主", link: "/about-me/" },
      { text: "关于本站", link: "/about-website/" },
      { text: "友链链接", link: "/friends/" },
      { text: "网站导航", link: "/nav/" },
      { text: "开源项目", link: "/opensource-project/" },
      {
        text: "站点统计",
        link: "https://umami.seasir.top/share/rvVBNZWa0sUCN6wG/teek.seasir.top",
      },
      {
        text: "站点状态",
        link: "https://status.seasir.top/",
      },
    ],
  },
];

最新-抽离nav ​

编辑docs\.vitepress\config.ts

ts
import { Nav } from "./ConfigOne/Nav"; // 导入Nav模块


    nav: Nav, // 导航栏配置

image-20250608161548387

image-20250608161615543

创建docs\.vitepress\ConfigOne目录：

image-20250608161744326

docs\.vitepress\ConfigOne\Nav.ts文件

ts
// nav导航栏配置
import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
export const Nav = [
    { text: "🏡首页", link: "/" },


    // 下拉菜单 (测试 导航栏图标-自定义组件 对  下拉菜单的影响)
    // {
    //   text: "📖笔记专栏",
    //   items: [
    //     {
    //       component: "NavIcon",
    //       props: TeekIcon,
    //     },
    //     {
    //       component: "NavIcon",
    //       props: VdoingIcon,
    //     },
    //     {
    //       component: "NavIcon",
    //       props: SSLIcon,
    //     },
    //     {
    //       component: "NavIcon",
    //       props: BlogIcon,
    //     },
    //   ],
    // },



    // (测试 导航栏图标-自定义组件 对  分组菜单 的影响)
    // {
    //   text: '指南',
    //   items: [
    //     {
    //       // 分组标题1
    //       text: '介绍',
    //       items: [
    //         {
    //           component: "NavIcon",
    //           props: SSLIcon,
    //         },
    //         {
    //           component: "NavIcon",
    //           props: BlogIcon,
    //         },
    //       ],
    //     },
    //     {
    //       // 分组标题2
    //       text: '基础设置',
    //       items: [
    //         {
    //           component: "NavIcon",
    //           props: SSLIcon,
    //         },
    //         {
    //           component: "NavIcon",
    //           props: BlogIcon,
    //         },
    //       ],
    //     },
    //   ],
    // },



    // 笔记
    {
      text: '🗃️笔记',
      items: [
        {
          // 分组标题1
          text: '运维',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
                  <span>Linux</span>
                </div>
                `,
              link: '/linux',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/nginx.png" alt="" style="width: 16px; height: 16px;">
                  <span>Nginx</span>
                </div>
                `,
              link: '/nginx',
            },
          ],
        },
        {
          // 分组标题2
          text: '前端',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/html.png" alt="" style="width: 16px; height: 16px;">
                  <span>Html</span>
                </div>
                `,
              link: '/html',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/css.png" alt="" style="width: 16px; height: 16px;">
                  <span>Css</span>
                </div>
                `,
              link: '/css',
            },
          ],
        },
        {
          // 分组标题3
          text: '编程',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/python.png" alt="" style="width: 16px; height: 16px;">
                  <span>Python</span>
                </div>
                `,
              link: '/python',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/go.svg" alt="" style="width: 16px; height: 16px;">
                  <span>Go</span>
                </div>
                `,
              link: '/go',
            },
          ],
        },
        {
          text: '专题',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/博客.svg" alt="" style="width: 16px; height: 16px;">
                  <span>博客搭建</span>
                </div>
                `,
              link: '/blog',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/前端demo.svg" alt="" style="width: 16px; height: 16px;">
                  <span>前端demo</span>
                </div>
                `,
              link: '/qianduan-demo',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
                  <span>Git</span>
                </div>
                `,
              link: '/git',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/面试.svg" alt="" style="width: 16px; height: 16px;">
                  <span>面试</span>
                </div>
                `,
              link: '/mianshi',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/NAS.svg" alt="" style="width: 16px; height: 16px;">
                  <span>NAS</span>
                </div>
                `,
              link: '/NAS',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
                  <span>脚本</span>
                </div>
                `,
              link: '/jiaoben',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/工具.svg" alt="" style="width: 16px; height: 16px;">
                  <span>工具</span>
                </div>
                `,
              link: '/tools',
            },
          ],
        },
        {
          text: '开源项目',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
                  <span>Teek-one</span>
                </div>
                `,
              link: '/teek',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/Typora.svg" alt="" style="width: 16px; height: 16px;">
                  <span>Typora-one</span>
                </div>
                `,
              link: '/typora-theme-one',
            },
            
          ],
        },
      ],
    },  

    // 生活
    {
      text: '🏓生活',
      items: [
        {
          // 分组标题1
          text: '娱乐',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
                  <span>相册</span>
                </div>
                `,
              link: 'https://photo.onedayxyy.cn/',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
                  <span>电影</span>
                </div>
                `,
              link: '/movie',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
                  <span>音乐</span>
                </div>
                `,
              link: '/music',
            },
          ],
        },
        {
          // 分组标题2
          text: '小屋',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
                  <span>精神小屋</span>
                </div>
                `,
              link: '/love',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
                  <span>时间管理</span>
                </div>
                `,
              link: '/time-plan',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/文案.svg" alt="" style="width: 16px; height: 16px;">
                  <span>文案</span>
                </div>
                `,
              link: '/wenan',
            },
            { text: "💖情侣空间", link: "https://fxj.onedayxyy.cn/" },
          ],
        },
      ],
    },  

    // 索引
    {
      text: '👏索引',
      items: [
        { text: '📃分类页', link: '/categories' },
        { text: '🔖标签页', link: '/tags' },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
              <span>归档页</span>
            </div>
            `,
          link: '/archives',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
              <span>清单页</span>
            </div>
            `,
          link: '/articleOverview',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
              <span>登录页</span>
            </div>
            `,
          link: '/login',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
              <span>风险链接提示页</span>
            </div>
            `,
          link: '/risk-link?target=https://onedayxyy.cn/',
        },
      ],
    },  

    // 关于
    {
      text: '🍷关于',
      items: [
        { text: '👋关于我', link: '/about-me' },
        { text: '🎉关于本站', link: '/about-website' },
        { text: '🌐网站导航', link: '/websites' },          
        { text: "👂留言区", link: "/liuyanqu" },
        { text: "💡思考", link: "/thinking" },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
              <span>时间轴</span>
            </div>
            `,
          link: 'https://onedayxyy.cn/time-line/',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
              <span>网站统计</span>
            </div>
            `,
          link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
              <span>站点监控</span>
            </div>
            `,
          link: 'https://status.onedayxyy.cn/status/monitor',
        },

      ],
    },       
  ]

docs\.vitepress\ConfigOne\icon\NavIcon.ts文件

ts
import { Blog } from "./Svgicon";
export const TeekIcon = {
  text: "Teek主题",
  link: "/Teek",
  subMenu: true, // 是否有子菜单
  iconProps: {
    icon: "https://vp.teek.top/teek-logo-mini.svg",
    iconType: "img",
    // size: 12, // 图标大小
  },
};

export const VdoingIcon = {
  text: "Vdoing主题",
  link: "/Vdoing",
  subMenu: true, // 是否有子菜单
  iconProps: {
    icon: "https://vuepress.vuejs.org/images/hero.png",
    iconType: "img",
    size: 16, // 图标大小
  },
};

export const SSLIcon = {
  text: "SSL证书",
  link: "/SSL",
  subMenu: true, // 是否有子菜单
  iconProps: {
    icon: "https://allinssl.com/logo.svg",
    iconType: "img",
    size: 12, // 图标大小
  },
};

export const BlogIcon = {
  text: "博客搭建",
  link: "/Blog",
  subMenu: true, // 是否有子菜单
  iconProps: {
    icon: Blog,
    iconType: "svg",
  },
};

docs\.vitepress\ConfigOne\icon\Svgicon.ts文件

ts
const Blog = `<svg t="1748063380189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="256" height="256"><path d="M0 0h1024v1024H0z" fill="#5da8ff" opacity=".01" p-id="4049"></path><path d="M795.562667 228.437333A126.037333 126.037333 0 0 1 921.6 354.474667v504.106666c0 34.816-28.202667 63.018667-63.018667 63.018667h-141.568V354.474667c0-69.632 8.96-126.037333 78.549334-126.037334z" fill="#7aaeeb" p-id="4050" data-spm-anchor-id="a313x.search_index.0.i15.1dbc3a81biy5SY" class=""></path><path d="M669.525333 102.4a126.037333 126.037333 0 0 1 126.037334 126.037333v630.186667c0 34.773333 28.202667 62.976 63.018666 62.976H228.394667A126.037333 126.037333 0 0 1 102.4 795.562667V228.437333A126.037333 126.037333 0 0 1 228.437333 102.4z m-220.544 519.893333h-189.013333a47.274667 47.274667 0 1 0 0 94.506667h189.013333a47.274667 47.274667 0 1 0 0-94.506667z m189.013334-189.056h-378.026667a47.274667 47.274667 0 1 0 0 94.506667h378.026667a47.274667 47.274667 0 0 0 0-94.506667zM322.986667 244.224H259.925333a47.274667 47.274667 0 0 0 0 94.464H322.986667a47.274667 47.274667 0 1 0 0-94.506667z" fill="#5da8ff" p-id="4051" data-spm-anchor-id="a313x.search_index.0.i7.1dbc3a81biy5SY" class=""></path></svg>`;

export { Blog };
最近更新