【vuepress】vuepress自定义导航页面

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kuan 的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等常用开发工具系列:罗列常用的开

檀越剑指大厂

29359人浏览 · 2022-12-07 00:39:38

檀越剑指大厂 · 2022-12-07 00:39:38 发布

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐:kuan 的首页,持续学习,不断总结,共同进步,活到老学到老
导航
檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等
常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等
数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作
数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

博客目录

在这里插入图片描述

<div id="root">
  <div class="cc-row cc-row-gutter-20">
    <h2>LeetCode</h2>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="../java/算法/codetop" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="CodeTop题解">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/题解.jpg"
              style="height: 35px;"
              alt="CodeTop题解"
            />
            <div style="height: 40px; float: right;">CodeTop题解</div>
          </div>
          <div class="cc-nav-des" title="CodeTop题解">
            <p>CodeTop题解</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="../java/算法/数据结构与算法" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="算法小知识总结">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/算法小知识总结.jpg"
              style="height: 35px;"
              alt="算法小知识总结"
            />
            <div style="height: 40px; float: right;">算法小知识总结</div>
          </div>
          <div class="cc-nav-des" title="算法小知识总结">
            <p>算法小知识总结</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://leetcode.cn/u/kwn77777/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="LeetCode个人中心">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/力扣.jpg"
              style="height: 35px;"
              alt="LeetCode个人中心"
            />
            <div style="height: 40px; float: right;">LeetCode个人中心</div>
          </div>
          <div class="cc-nav-des" title="LeetCode个人中心">
            <p>LeetCode个人中心</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://leetcode.cn/problemset/all/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="题库">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/题库.jpg"
              style="height: 35px;"
              alt="题库"
            />
            <div style="height: 40px; float: right;">题库</div>
          </div>
          <div class="cc-nav-des" title="题库">
            <p>题库</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://codetop.cc/home" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="CodeTop">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/codetop.jpg"
              style="height: 35px;"
              alt="CodeTop"
            />
            <div style="height: 40px; float: right;">CodeTop</div>
          </div>
          <div class="cc-nav-des" title="CodeTop">
            <p>CodeTop</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a
        href="https://www.cs.usfca.edu/~galles/visualization/Algorithms.html"
        target="_blank"
      >
        <div class="my-nav-item">
          <div class="cc-nav-title" title="可视化算法">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/可视化算法.jpg"
              style="height: 35px;"
              alt="可视化算法"
            />
            <div style="height: 40px; float: right;">可视化算法</div>
          </div>
          <div class="cc-nav-des" title="可视化算法">
            <p>可视化算法</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://www.nowcoder.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="牛客网">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/牛客网.jpg"
              style="height: 35px;"
              alt="牛客网"
            />
            <div style="height: 40px; float: right;">牛客网</div>
          </div>
          <div class="cc-nav-des" title="牛客网">
            <p>牛客网</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://learn.lianglianglee.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="技术文章">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/技术文章.jpg"
              style="height: 35px;"
              alt="技术文章"
            />
            <div style="height: 40px; float: right;">技术文章</div>
          </div>
          <div class="cc-nav-des" title="技术文章">
            <p>技术文章</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="../软技能/如何学源码" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="软技能">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/软技能.jpg"
              style="height: 35px;"
              alt="软技能"
            />
            <div style="height: 40px; float: right;">软技能</div>
          </div>
          <div class="cc-nav-des" title="软技能">
            <p>软技能</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="http://coderead.cn/home/index.html" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="源码阅读网">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/源码阅读网.jpg"
              style="height: 35px;"
              alt="源码阅读网"
            />
            <div style="height: 40px; float: right;">源码阅读网</div>
          </div>
          <div class="cc-nav-des" title="源码阅读网">
            <p>源码阅读网</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://space.bilibili.com/302417610" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="尚硅谷">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/尚硅谷.jpg"
              style="height: 35px;"
              alt="尚硅谷"
            />
            <div style="height: 40px; float: right;">尚硅谷</div>
          </div>
          <div class="cc-nav-des" title="尚硅谷">
            <p>尚硅谷</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://www.lintcode.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="练码">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/炼码.jpg"
              style="height: 35px;"
              alt="练码"
            />
            <div style="height: 40px; float: right;">练码</div>
          </div>
          <div class="cc-nav-des" title="练码">
            <p>练码</p>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="cc-row cc-row-gutter-20">
    <h2>CSDN</h2>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://editor.csdn.net/md/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="写BLOG">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/CSDN.jpg"
              style="height: 35px;"
              alt="写BLOG"
            />
            <div style="height: 40px; float: right;">写BLOG</div>
          </div>
          <div class="cc-nav-des" title="写BLOG">
            <p>写BLOG</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a
        href="https://mp.csdn.net/mp_blog/manage/article?spm=1001.2100.3001.5448"
        target="_blank"
      >
        <div class="my-nav-item">
          <div class="cc-nav-title" title="文章管理">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/CSDN.jpg"
              style="height: 35px;"
              alt="文章管理"
            />
            <div style="height: 40px; float: right;">文章管理</div>
          </div>
          <div class="cc-nav-des" title="文章管理">
            <p>文章管理</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://ask.csdn.net/channel/7" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="我的问答">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/CSDN.jpg"
              style="height: 35px;"
              alt="我的问答"
            />
            <div style="height: 40px; float: right;">我的问答</div>
          </div>
          <div class="cc-nav-des" title="我的问答">
            <p>我的问答</p>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="cc-row cc-row-gutter-20">
    <h2>GIT地址</h2>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://gitcode.net/dashboard/projects/home" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="Gitcode">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/gitcode.jpg"
              style="height: 35px;"
              alt="Gitcode"
            />
            <div style="height: 40px; float: right;">Gitcode</div>
          </div>
          <div
            class="cc-nav-des"
            title="GitCode 是 CSDN 为开发者提供的开源项目创新服务平台，秉承“创新、开放、协作、共享”的开源价值观，致力于为大规模开源开放协同创新助力赋能，打造创新成果孵化和新时代开发者培养的开源创新生态！支持公有云使用、私有化部署以及软硬一体化私有部署。"
          >
            <p>GitCode是CSDN为开发者提供的代码文档管理平台</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://github.com/qyj19920704?tab=repositories" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="GitHub">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/github.jpg"
              style="height: 35px;"
              alt="GitHub"
            />
            <div style="height: 40px; float: right;">GitHub</div>
          </div>
          <div
            class="cc-nav-des"
            title="GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。"
          >
            <p>GitHub是一个面向开源及私有软件项目的托管平台</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://gitee.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="Gitee">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/gitee.jpg"
              style="height: 35px;"
              alt="Gitee"
            />
            <div style="height: 40px; float: right;">Gitee</div>
          </div>
          <div
            class="cc-nav-des"
            title="Gitee是开源中国（OSChina）推出的基于Git的代码托管服务"
          >
            <p>Gitee是开源中国推出的基于Git的代码托管服务</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://gitcode.net/qyj19920704/coding-tree" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="GitHub-coding-tree">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/codingtree.jpg"
              style="height: 35px;"
              alt="GitHub-coding-tree"
            />
            <div style="height: 40px; float: right;">GitHub-coding-tree</div>
          </div>
          <div class="cc-nav-des" title="GitHub-coding-tree">
            <p>GitHub-coding-tree</p>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="cc-row cc-row-gutter-20">
    <h2>技术网站</h2>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://tech.meituan.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="美团技术团队">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/美团技术团队.jpg"
              style="height: 35px;"
              alt="美团技术团队"
            />
            <div style="height: 40px; float: right;">美团技术团队</div>
          </div>
          <div class="cc-nav-des" title="美团技术团队">
            <p>美团技术团队</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="http://www.atguigu.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="尚硅谷">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/尚硅谷.jpg"
              style="height: 35px;"
              alt="尚硅谷"
            />
            <div style="height: 40px; float: right;">尚硅谷</div>
          </div>
          <div class="cc-nav-des" title="尚硅谷">
            <p>尚硅谷</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://www.imooc.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="慕课网">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/慕课网.jpg"
              style="height: 35px;"
              alt="慕课网"
            />
            <div style="height: 40px; float: right;">慕课网</div>
          </div>
          <div class="cc-nav-des" title="慕课网">
            <p>慕课网</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://www.yuque.com/itbro/show/sg99s8?#gDIkW" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="牛皮程序员">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/牛皮程序员.jpg"
              style="height: 35px;"
              alt="牛皮程序员"
            />
            <div style="height: 40px; float: right;">牛皮程序员</div>
          </div>
          <div class="cc-nav-des" title="牛皮程序员">
            <p>牛皮程序员</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://www.runoob.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="菜鸟教程">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/菜鸟教程.jpg"
              style="height: 35px;"
              alt="菜鸟教程"
            />
            <div style="height: 40px; float: right;">菜鸟教程</div>
          </div>
          <div class="cc-nav-des" title="菜鸟教程">
            <p>菜鸟教程</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://segmentfault.com/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="segmentfault">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/segmentfault.jpg"
              style="height: 35px;"
              alt="segmentfault"
            />
            <div style="height: 40px; float: right;">segmentfault</div>
          </div>
          <div class="cc-nav-des" title="segmentfault">
            <p>segmentfault</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://hutool.cn/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="hutool">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/hutool.jpg"
              style="height: 35px;"
              alt="hutool"
            />
            <div style="height: 40px; float: right;">hutool</div>
          </div>
          <div class="cc-nav-des" title="hutool">
            <p>hutool</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="https://search.maven.org/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="maven仓库">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/maven仓库.jpg"
              style="height: 35px;"
              alt="maven仓库"
            />
            <div style="height: 40px; float: right;">maven仓库</div>
          </div>
          <div class="cc-nav-des" title="maven仓库">
            <p>maven仓库</p>
          </div>
        </div>
      </a>
    </div>
    <div
      class="cc-col-xl-4 cc-col-lg-6 cc-col-md-8 cc-col-sm-10 cc-col-xs-12 cywz-001"
    >
      <a href="http://openkoala.org/" target="_blank">
        <div class="my-nav-item">
          <div class="cc-nav-title" title="Koala">
            <img
              class="nozoom medium-zoom-image"
              src="../../.vuepress/public/nav/koala.jpg"
              style="height: 35px;"
              alt="Koala"
            />
            <div style="height: 40px; float: right;">Koala</div>
          </div>
          <div class="cc-nav-des" title="Koala">
            <p>Koala DDD思想落地</p>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<style>
  .cc-row {
    display: block;
    float: left;
  }
  .cywz-001 {
    margin: 10px;
    float: left;
    background-color: #f3f4f5;
    max-width: 280px;
    min-width: 280px;
    max-height: 100px;
    min-height: 100px;
    position: relative;
    border-radius: 10px 10px 10px 10px;
  }
  .cc-nav-des {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 280px;
    height: 36px;
    font-size: 10px;
    position: absolute;
    bottom: 0;
  }
  .cc-nav-des p {
    position: absolute;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  footer {
    margin-top: auto;
  }
</style>

觉得有用的话点个赞 👍🏻 呗。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^