dumi 2,它来了它来了它来了

news2024/12/29 13:03:29

dumi 1.0 在 2020 年 3 月 2 日正式发布,到今天一共有 80+ 位 Contributor、提交 1100+ Commit、为近 4000 个开源项目提供了组件库/站点的文档方案;dumi 作为一个 GitHub 数亿开源项目中的渺小一粒,能有这么多人共同参与、能为这么多项目提供价值,无疑是十分幸运的。

与这份幸运一同到来的,还有许多体验问题的反馈、组件研发的思考、实际项目的场景,加上社区的底层技术栈也在飞速迭代,是时候给 dumi 做一次大升级了,所以我们在今年的 7 月 29 日正式启动了 dumi 2.0 的研发,而在今天,它终于与大家正式见面了!

核心升级

全新主题系统

先晒一下全新的默认主题,它也是主题系统的一部分:

除了更精致以外,dumi 2 的主题系统还提供了如下能力。

主题支持局部覆盖

在 dumi 1 里,想定制侧边栏就必须覆盖整个 Layout,成本非常高; dumi 2 参考 Docusaurus 的 Swizzing 设计、提供了 slots(UI 插槽)特性,只需要在项目里创建 .dumi/theme/slots/{SlotName} 就能实现对应 slot 的局部覆盖,并且提供哪些 slots 是由主题包决定的,在保持开放性的同时、极大地降低了定制成本。

自带国际化方案

在 dumi 1 里,主题包想做多语言,只能自行判断 locale 展示不同的文案; dumi 2 约定主题包内的 locales/{lang-LOCALE}.json 文件为国际化文案,会被框架自动加载,主题包组件只需要从 dumi 里导出 react-intl的相关 API,只需调用文案 key 即可实现文案的国际化。 不仅如此,文案也是支持 key 覆盖的,这意味着用户如果想定制主题包提供的文案,只需要创建 .dumi/theme/locales{lang-LOCALE}.json 覆盖对应 key 的文案即可。

支持注册 dumi 插件

主题包可能伴随着默认配置、甚至是框架能力扩展,所以 dumi 2 约定主题包的 plugin.ts 或 plugin/index.ts 为主题包的插件、会自动挂载,为主题包提供更加强大的定制能力。

更多信息欢迎移步官方文档查看:主题-如何工作。

内置全文搜索

静态站点的搜索一直是老大难的问题,社区一般就两种方案:

  1. 传统的标题搜索方案,因为生成 TOC 原本就需要采集标题,拿来做索引是顺理成章的,这也是 SSG 框架的常见做法,缺点是能搜到的东西太少
  2. 接入三方的搜索服务并且产出预渲染的 HTML 和 sitemap.xml,好处是能保证搜索质量,缺点是有一定门槛,例如 Algolia 就需要申请 AppKey

听起来都不完美,但 dumi 2 这次带来了第 3 种方案,既不需要接入三方服务、又能实现全文匹配、还不会导致产物尺寸增加,是真正开箱即用的全文搜索方案!

搜索的过程在 Service Worker 中进行,这意味着不需要担心搜索结果匹配引发性能问题、也可以离线部署,同时 dumi 也提供了搜索 API、可供主题包定制搜索结果的呈现。

约定式路由增强

dumi 1 被诟病最多的问题就是『路由生成难以控制』,配置完不跑一跑都不知道长什么样儿,所以 dumi 2 这次对约定式路由做了 3 大升级。

配置简化

去掉 Markdown FrontMatter 中的 nav.path 和 group.path 配置项,最终路由就是文件路径,简单明了。

概念拆分

将路由分为『文档路由』和『资产路由』,文档路由通常放在 docs 目录下,会嵌套层级,而资产路由通常放在 src 下,不会嵌套层级、且默认归类在某一前缀(比如 /components)下,比如:

docs/guide/getting-started.md 会生成 /guide/getting-started
src/Foo/index.md 会生成 /components/foo
复制代码

以上解析路径和资产路由前缀均可通过配置修改。

约定式 Tab

支持以约定式的形式为 Markdown 内容增加 Tab,比如 index.$tab-key.md 就会作为 index.md 的 Tab 呈现,可以帮助我们更好地组织文档内容的呈现:

不仅如此,Tab 也支持通过插件 API 注册,为更多功能的扩展提供了可能。

更好的编译性能

dumi 2 通过结合使用 Umi 4 MFSU、esbuild、SWC、持久缓存等方案,带来比 dumi 1 更快的编译速度。

另外,dumi 2 也使用最新的 Unified.js 生态重写了整个 Markdown 编译逻辑,还提供了对 remark 和 rehype 插件的配置能力,在高性能的同时也更加易于定制。

成为合格的 SSG

dumi 1 虽然本质上是 SSG(Static Site Generator),但实际上是异常偏科的,这次把本职工作勉强做合格:

  1. 支持页面级的 TDK 配置,且内置 Helmet 可做深度自定义
  2. 内置 404 页面
  3. 默认静态化全部页面
  4. 支持基于 React@18 Stream 的构建时预渲染
  5. ……

当然合格仍然是不够的,也希望大家能一起参与完善,既然是『为组件研发而生的静态站点框架』,那就组件研发和静态站点都不能落下。

终于『有面儿』了

回想起当初 dumi 取名的过程,还是觉得很神奇,一个代号可以是冰冷的字母,也可以是有温度的昵称。

不过这么久以来,dumi 一直都借用的 Umi 的 LOGO,是时候趁着 2.0 的全新升级,给这个有温度的昵称配上一张有温度的脸庞了:

这就是 dumi 的 LOGO,用扎实的文档撑起精致的组件,请记住它的模样,如果是脸盲就不强求了 :D

除了以上核心升级,dumi 2.0 还有非常多的细节改进,受限于篇幅就不再展开了,欢迎大家在官网文档和实际使用中慢慢发现。

立即上手

如果是 dumi 1.x 的项目,请参考升级文档升级到 dumi 2:d.umijs.org/guide/upgra… 如果是打算新建全新项目,请直接使用 create-dumi 脚手架:d.umijs.org/guide/initi…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/23184.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JAVA程序设计】(C00097) 基于SSM的果树溯源可视化管理系统

基于SSM的果树溯源可视化管理系统项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架的果树溯源可视化管理系统,本系统分为二种用户:管理员、农户 管理员角色包含以下功能: 登录、农户管理、商家管理、果树管理、地块管理、农资…

马上2023年了,终于发现一款颜值爆表的记账软件

不知道大家平时有没有记账的习惯,我是在疫情之后,才开始记账的。 记账之后,的确发现了很多问题。尤其是自己花钱大手大脚没有规划的毛病。 后来,在每个月第1周,我都会分析一下上一个月的账目,看看自己的收…

同花顺_代码解析_交易系统_J09_18

本文通过对同花顺中现成代码进行解析,用以了解同花顺相关策略设计的思想 目录 J_09 抛物线转向系统 J_10 均线系统 J_11 随机指标专家 J_12 顺势指标 J_15 动量线 J_16 心理线 J_17 变动速率 J_18 相对强弱指标 J_09 抛物线转向系统 指标标识由绿变红时为买…

LeetCode287之寻找重复数(相关话题:二分查找,快慢指针)

题目描述 给定一个包含 n 1 个整数的数组 nums ,其数字都在 [1, n] 范围内(包括 1 和 n),可知至少存在一个重复的整数。 假设 nums 只有 一个重复的整数 ,返回 这个重复的数 。 你设计的解决方案必须 不修改 数组 …

【SIFT】超详详详解 - 实现细节记录

目录前言一、尺度空间的生成:高斯金字塔 Gaussian pyrmid1、图像的尺度空间 - 高斯金字塔 Gaussian pyramid2、高斯金字塔的组 与 组数 Octave1)组2)组数3)升采样获得 base image3、高斯金字塔的层与层数 interval31)层…

2022年轨道交通行业研究报告

第一章 行业概况 轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。最典型的轨道交通就是由传统火车和标准铁路所组成的铁路系统。随着火车和铁路技术的多元化发展,轨道交通呈现出越来越多的类型,不仅遍布于长距离的陆地运输&#x…

k8s基础命令及Linux上用Kubectl(k8s)部署Nginx

k8s基础命令及Linux上用Kubectl(k8s)部署Nginx 不懂K8s搭建的可以看我这篇文章 Linux上部署Kubectl(k8s) 1.k8s简介 1.1 Kubernetes 概念 在 k8s 上进行部署前,首先需要了解一个基本概念 Deployment Deployment 译名为 部署。在k8s中,通过发布 Depl…

积分商城小程序的作用_分享积分商城小程序开发的效果

积分商城系统带来的6点作用分别是:对商家的依赖性、提升转化和复购、运营模式多元化、提升收益、进行积分营销、进行口碑传播,下面我们就来详细的了解一下。 积分商城系统带来的作用一:对商家的依赖性 积分商城系统是进行积分兑换的&#xf…

渗透测试CTF-图片隐写的详细教程2(干货)

上篇文章我们介绍了这7个工具,这里简单的介绍一下。 Binwalk 用来检测图片中是否有隐藏的文件。 Foremost 将图片中的隐藏文件拆分出来。 010Editor ①修改图片的参数来查看隐藏信息。 ②查看压缩包是否是伪加密。 Stegsolve.jar 图片隐写查看神器。 OurSecret 1个图…

公众号免费查题功能搭建

公众号免费查题功能搭建 本平台优点: 多题库查题、独立后台、响应速度快、全网平台可查、功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库: 题库:题库后台(点击跳转&#xf…

Word处理控件Aspose.Words功能演示:在 Java 中将文本转换为 PNG、JPEG 或 GIF 图像

在各种情况下,通常需要进行文本到图像的转换,例如,使文本成为只读。在上一篇文章中,我们写过如何将TXT文件中的文本转换为 Java 中的 PDF。在本文中,您将学习如何在 Java 中以编程方式将文本转换为PNG、JPEG或GIF图像。…

B. Catching Cheaters(最长公共子序列变形)

Problem - 1446B - Codeforces 给你两个字符串A和B,代表两个涉嫌作弊的学生的论文。对于任何两个字符串C,D,我们将其相似性分数S(C,D)定义为4⋅LCS(C,D)-|C|-|D|,其中LCS(C,D)表示字符串C和D的最长公共子序列。 你认为只有部分文…

三次握手与四次挥的问题,怎么回答?

在面试中,三次握手和四次挥手可以说是问的最频繁的一个知识点了,我相信大家也都看过很多关于三次握手与四次挥手的文章,今天的这篇文章,重点是围绕着面试,我们应该掌握哪些比较重要的点,哪些是比较被面试官…

大一学生网页课程作业 南京介绍网页设计 学生家乡网页设计作品静态 HTML网页模板源码 html我的家乡网页作业

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有…

uniapp自动识别并切换到pad端、pc端【不断更新】【伸手党福利】

目录uniapp自动切换到pad、pc端(框架方法)1. 新建文件:index为主页面(代理页面)detail为主页面的引用页面(业务页面)leftwindow为左边栏【名字随便起】topwindow为顶部栏【名字随便起】2. pages…

【LeetCode】808.分汤

题目描述 有 A 和 B 两种类型 的汤。一开始每种类型的汤有 n 毫升。有四种分配操作: 提供 100ml 的 汤A 和 0ml 的 汤B 。 提供 75ml 的 汤A 和 25ml 的 汤B 。 提供 50ml 的 汤A 和 50ml 的 汤B 。 提供 25ml 的 汤A 和 75ml 的 汤B 。 当我们把汤分配给某人之后&a…

【selenium】多 frame 切换定位元素

frame 简介 frame 是 html 中的框架导航。同一个框架集中,点击某一框架的超链接,内容会在另一个框架的窗口中展示。 比如后台管理页面,点击左侧导航栏按钮,在右侧区域展示加载的内容,而不是打开一个新的窗口。 fram…

【node进阶】在node.js中优雅的使用Socket.IO模块

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd

近日,Serverless 开发者平台 Serverless Devs 重磅发布基于 Serverless 架构的轻量级 CI/CD 框架——Serverless-cd。Serverless-cd 是一款运行在 Serverless 架构上的功能强大而灵活,安全,低成本的CI/CD开源框架。该框架基于 Serverless Dev…

ML XGBoost详细原理及公式推导讲解+面试必考知识点

😄 搞竞赛天天无脑XGBoost、LightGBM、CatBoost,但不知道原理也少许有点尴尬了~,所以打算深入学习下这三大竞赛杀器的原理,整理下面试中一些高频问题。之前有决策树,GBDT的基础了,再学学这三个和随机森林&a…