umi插件开发仿dumi项目自动生成导航栏实现详解

目录
  • 引言
  • 获取路由信息
  • 创建获取导航数据hook
  • Layout中使用

引言

前面我们已经完成了页面布局和页面路由，现在我们的导航栏还是自己写死在代码中，现在我们来改造成自动根据页面路由来生成导航栏。

获取路由信息

我们在前面创建的路由对象，会被umi存入appData对象中，umi提供了useAppDataAPI可以用于获取路由信息。

创建获取导航数据hook

// /src/client/theme-api/useNavData.ts
import { useAppData } from "umi";
/**
 * hook for get nav data
 */
export const useNavData = () => {
  // 获取全局路由信息
  const { routes } = useAppData();
  // 获取/docs下的路由信息
  const localeDocRoutes: any[] =
      Object.values(routes).filter(route => route.parentId === 'DocLayout')
  // 获取导航信息
  const nav: any = []
  Object.values(localeDocRoutes).forEach(route => {
    const _r = { ...route }
    if(_r.path == '/') {
      nav.push({
        title: '首页',
        link: '/',
      })
    } else {
      nav.push({
        title: route.path,
        link: '/' + route.path,
      })
    }
  })
  return nav;
};

Layout中使用

// /src/client/theme-default/layouts/DocLayout.ts
import { Link, Outlet } from 'umi';
import { useNavData } from '@/client/theme-api/useNavData';
import styles from './index.less';
export default function Layout() {
  const nav = useNavData()
  return (
    <div className={styles.navs}>
      <ul>
          {nav.map((item: any) => (<li key={item.link}>
              <Link style={{ marginRight: '10px' }} to={item.link}>{item.title}</Link>
          </li>))}
      </ul>
      <Outlet />
    </div>
  );
}

以上就是umi插件开发仿dumi项目自动生成导航栏实现详解的详细内容，更多关于umi插件自动生成导航栏的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 独立使用umi的核心插件模块示例详解

    目录 引言 实践 结语 引言 今天我们做一个有趣的尝试,将 umi 的核心插件模块独立出来作为另一个框架的基础架构,这里我们将它称为 konos. 介于 umi 自身的源码的独立拆分,要实现这个功能其实非常的简单.只需要单独使用 @umijs/core 就好. 实践 先看具体实践吧.以下步骤都是常规编写 cli 的一些步骤,我就不做过多的说明,如果你看不懂其中的某些代码,可以评论区留言,或者查看我的其他文章. 新建空白文件夹,mkdir konos 你可以根据你使用的电脑执行对应的命令来新建一个

  • umi插件开发仿dumi项目实现页面布局详解

    目录 实现思路 使用默认项目提供的layout文件 自定义主题 准备工作 主题插件功能 modifyAppData 插件代码 生成layout路由对象 使用同步伪代码来描述上面流程 运行检查 实现思路 上一章我们已经完成/docs目录下文件自动生路由功能,本章我们将在此基础上,实现自动生成页面导航的功能. 使用默认模板提供的layout展示路由切换 使用自定义主题插件 使用默认项目提供的layout文件 在我们创建默认umi项目后,会在/src/layouts下生成一个布局文件: 同时在上一章节

  • umi插件开发仿dumi项目加载markdown文件实现详解

    目录 引言 为什么不能直接展示markdown chainWebpack webpack loader 实现过程 新建插件 新建loader 新建测试文档 运行项目 解决文件加载类型错误 webpack ruletype 解决错误 引言 前面章节中我们已经顺利将tsx组件转换为页面展示,但是目前提供的功能和umi的约定式路由功能差不多,接下来我们将实现将markdown文件转换为页面展示. 为什么不能直接展示markdown 我们前面所使用的页面写法都是react组件式写法,umi通过webpa

  • umi插件开发仿dumi项目实现markdown文件转为页面

    目录 引言 处理导入错误 loader返回渲染函数 添加react处理loader 用ts来写loader 改变原来的loader 创建新的loader 配置webpack 引言 前面我们已经成功将.md文件通过import加载到react组件中,并能拿到文件内容进行展示.但是点击markdown的导航链接还是会报错: 这个报错和前面的报错有点相似,只是前面是无法解析链接,这里是无法解析对象. 处理导入错误 在react渲染页面时,是调用一个个渲染函数来渲染页面,我们来对比一下button页和m

  • Umi4集成阿里低代码框架lowcode-engine实现

    Umi4集成阿里低代码框架lowcode-engine实现

    目录 前言 实现 搭建umi4项目 集成lowcode-engine 结束语 前言 最近准备研究下阿里低代码框架lowcode-engine, 官方Demo是提供好的脚手架,由于我们的框架使用的是umi,官方文档提供了一些教程,在此记录下在umi4集成lowcode-engine. 实现 搭建umi4项目 1.通过官方文档的快速开始,我们可以快速创建出项目 先找个地方建个空目录 mkdir myapp && cd myapp 通过官方工具创建项目, 这里我们采用pnpm包管理工具 $ pn

  • spring boot集成smart-doc自动生成接口文档详解

    目录 前言 功能特性 1 项目中创建 /src/main/resources/smart-doc.json配置文件 2 配置内容如下(指定文档的输出路径) 3 pom.xml下添加配置 4 运行插件 5 找到存放路径浏览器打开 6 测试结果 前言 smart-doc 是一款同时支持 java restful api 和 Apache Dubbo rpc 接口文档生成的工具,smart-doc 颠覆了传统类似 swagger 这种大量采用注解侵入来生成文档的实现方法. smart-doc 完全基于

  • 利用Python自动生成PPT的示例详解

    利用Python自动生成PPT的示例详解

    在日常工作中,PPT制作是常见的工作,如果制作创意类PPT,则无法通过自动化的形式生成,因为创意本身具有随机性,而自动化解决的是重复性工作,两者有所冲突. python-pptx是python处理PPT的一个库,注重的是读和写,无法导出,没有渲染功能. 废话不多说,第一步,安装python-pptx库: pip3 install -i https://pypi.doubanio.com/simple/ python-pptx ppt里面处理的主要对象一般为文本框,表格,图片. 每一页的ppt为一

  • Android 沉浸式状态栏与隐藏导航栏实例详解

    Android 沉浸式状态栏与隐藏导航栏实例详解

    1 前言 一般我们在Android的APP开发中,APP的界面如下: 可以看到,有状态栏.ActionBar(ToolBar).导航栏等,一般来说,APP实现沉浸式有三种需求:沉浸式状态栏,隐藏导航栏,APP全屏 沉浸式状态栏是指状态栏与ActionBar颜色相匹配, 隐藏导航栏不用多说,就是将导航栏隐藏,去掉下面的黑条. APP全屏是指将状态栏与导航栏都隐藏,例如很多游戏界面,都是APP全屏. 所以,在做这一步时,关键要问清楚产品狗的需求,免得白费功夫. 下面,分别来介绍这三种方式的实现. 2

  • Flutter实现底部导航栏创建详解

    Flutter实现底部导航栏创建详解

    目录 添加依赖项 如何使用 功能 属性 主题 预览图 代码 Flutter web问题:Failed to load network image 我的解决办法 参考资料 ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,支持多种内置样式与动画交互.你可以在https://appbar.codemagic.app/上找到在线样例. 添加依赖项 在你的项目中去 pubspec.添加依赖项: 添加https://pub.dev/packages/convex_bottom_

  • 微信小程序使用uni-app实现首页搜索框导航栏功能详解

    微信小程序使用uni-app实现首页搜索框导航栏功能详解

    目录 前言 一.兼容APP与H5的方式 二.兼容小程序 三.实现同时兼容 前言 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 App.H5效果 小程序效果 一.兼容APP与H5的方式 在常见titleNView配置代码示例中可以看到基本样式的代码如下 { "pages": [{ "path": "pages/index/index", //首页 "style"

  • SpringBoot如何自动生成API文档详解

    SpringBoot如何自动生成API文档详解

    前言 在做项目的时候,如果项目是前后分离的,后端一定要和前端或者是移动端对接接口,那么问题来了,接口是不是要自己写给他们看,一般的会采用Excel或者Word来写,高级一点的就采用API管理平台手工录入,一个项目有上千上万个接口,天啊,这是多么大的工作量,在接口维护的时候更加痛苦,为了解决这样的事我们可以借助 japi这个项目来完成RESTFul文档的自动生成,完全基于注释生成,更多详细配置可查看https://github.com/dounine/japi. 使用说明 克隆项目下来 git c

  • python自动生成model文件过程详解

    生成方式 Python中想要自动生成 model文件可以通过 sqlacodegen这个命令来生成对应的model文件 sqlacodegen 你可以通过pip去安装: pip install sqlacodegen 格式: sqlacodegen mysql+pymysql://username:password@host/database_name > model.py 说明: mysql+pymysql : 表示连接数据库的连接方式 username : 连接MySQL数据库的用户名 pa

随机推荐