kuangpf/dumi-theme-antd

A antd site theme package for the dumi framework.

dumi-theme-antd's Issues

themeConfig 的 title 配置目前无效

0.2.10 的 title 配置无效，左上角 和 中间 取的都是 name字段

不支持toc

docs目录的markdown文档，不支持toc功能，无法展示右侧导航。

---

同样试过四五个版本，几乎所有版本都存在此问题，包括目前最新版本0.2.7

一起查下，给点思路或者建议。一起完善它。

首页按钮和导航不支持跳转外链

cmd + k快速搜索定位失效

使用cmd+k快速搜索时，点击后hash更改了但是没有滑动到对应的锚点位置
https://kuangpf.com/dumi-theme-antd/ 也存在相同的问题

有空可以看看😂

dumi 2x+antd 4x版本能使用这个主题包么

SSR 服务端渲染的问题

添加 ssr 参数后，打包出来的静态文件访问时 js 会最后加载，导致样式渲染不及时，一秒后 js 加载完毕，样式才渲染完毕。

export default defineConfig({
  ssr: {}
});

然而 dumi 官网也是服务端渲染，没有出现这种情况。

umiJs SSR 介绍

dumi SSR 配置
...(process.env.NODE_ENV === 'development' ? {} : { ssr: {} }),

附上 Chrome DevTools Waterfall 图：

我的

dumi 官网

0.2.5版本，新增的bannerConfig属性失效，导致mainContent dom丢失

嗨咯，这是更新版本后出现的问题，退回 0.2.4 一切正常。
demo截图：

主题配置截图：

body污染的 全局样式

环境：

• "dumi": "^2.2.1"
• "dumi-theme-antd": "^0.2.7"

去掉dumi-theme-antd 主题，一切正常。所以判断问题出在了主题中。

问题1：

body全局样式会被一个叫 Common.tsx 覆盖掉。

问题2：
在某些场景，Common.tsx 的样式，再次被覆盖。

Sample Code
无
demo地址：https://assets-test.sto.cn/ux/cn-eone/0.0.1-alpha.5/guide/index.html

markdown代码块显示行号

请问如何在markdown代码块中显示行号

安装依赖警告问题

项目里使用的antd版本是5.9.0，会报以下警告。
技术栈：pnpm8、antd5.9.0 、dumi2、dumi-theme-antd@latest

背景图在缩放屏幕的时候会拉伸变形

重定向问题

访问

https://kuangpf.com/dumi-theme-antd/guide/introduce

会 301 重定向到

https://kuangpf.com/dumi-theme-antd/guide/introduce/

然后浏览器地址栏显示的是

https://kuangpf.com/dumi-theme-antd/guide/introduce

---

直接访问

https://kuangpf.com/dumi-theme-antd/guide/introduce/

没发生重定向，但是地址栏还是会去掉 /

https://kuangpf.com/dumi-theme-antd/guide/introduce

---

dumi 官网只会去掉 /，不会发生重定向

控制台报错 colorItemBg 废弃

请替换后发版

请问一下sidebarGroupModePath效果是和menu组件type:group一样么?

我不太明白具体是怎么配置

antdTheme: {
sidebarGroupModePath: ['/components',]
}

我这么配置上了好像不起作用

loading 转圈bug

引用dumi-theme-antd，
启动后，点击任意链接，然后再点击左上角回到首页时，
此时首页右上角一直在loading 转圈。

---

试过四五个版本，几乎所有版本都存在此问题，包括目前最新版本0.2.7

Markdown内容过少时，内容区样式问题

截图如下：

默认主题内容区样式有设置 min-height，所以没有问题

.dumi-default-header+main>.dumi-default-content, .dumi-default-doc-layout-mobile-bar+main>.dumi-default-content {
  min-height: calc(100vh - 76px)
}

使用 antd-style 替换 emotion 方案

一直以来 Ant Design 官网都是使用 emotion 作为 CSS-in-JS 方案, 目前 antd 已经完成从 emoction 迁移至 antd-style ref: ant-design/ant-design#43623

注意到 dumi-theme-antd 一直有在活跃, 有没有考虑也做一波迁移, 如果没啥难度很乐意提供一份 PR. 感谢

首页支持配置背景图片

现在的背景图片明显是antd 5.0的元素，希望可以支持替换；或者默认换成通用一点的图片，不要包含品牌元素

dumi-theme-antd 项目征集

如果你有项目在使用 dumi-theme-antd，并且希望展示在官网首页模块，可以按以下格式回复：

• 地址：http:xxx.com
• logo 图片地址：http:xxxx.com
• title: xxxx
• 描述:xxxx

多语言配置导致 sidebar 选中状态无效

目前的现象是当 dumi 使用英文为默认语言，中文添加 -cn 的路由后缀时，sidebar 无法高亮选中的 menu。配置如下：

locales: [
  { id: 'en-US', name: 'English', suffix: '' },
  { id: 'zh-CN', name: '中文', suffix: '-zh' }
]

useMenu 中有许多针对 -cn 的硬编码，可能有影响：

dumi-theme-antd/src/hooks/useMenu.tsx

Line 156 in 8c90dd4

key: item.link.replace(/(-cn$)/g, '')

themeConfig的nav配置children无效

例如如下配置

export default defineConfig({
  themeConfig: {
    nav: [
      {
        title: '国内镜像',
        link: 'https://ant-design.antgroup.com/index-cn',
        children: [
          { title: '官方镜像', link: 'https://ant-design.antgroup.com/index-cn' },
          { title: 'Gitee 镜像', link: 'https://ant-design.antgroup.com/index-cn' }
        ]
      }
    ]
  }
});

期望结果

配置项

nginx 部署问题

使用dumi-theme-antd 主题之后，因为首页只需要通过配置，于是docs文件夹下并没有index.md, 这样的话打包出来的项目是不存在
index.html的, 那么问题来了 之前配好的nginx.conf里的rewrite怎么配置呢，以下是我原始的配置，如果docs下有index.md的话是可以的，但是如果有index.md 就无法使用配置文件了，求助如何解决？

.dumirc.ts 配置文件:

    outputPath: 'docs-dist/static-my-ui',
    base: '/my-ui',
    publicPath: '/static-my-ui/',

nginx.conf

worker_processes  1;
events {
    worker_connections  1024;
}
http{
    server {
        listen  8000;
        absolute_redirect off;
        server_name_in_redirect off;
        port_in_redirect off;

        access_log  /home/work/log/access.log;
        error_log   /home/work/log/error.log;

        include  mime.types;

        # 设置静态资源路径
        root  /home/work/web

        location /my-ui {
            root /home/work/web;
            try_files $uri $uri/ @fallback;
            index index.html;
        }

        location @fallback {
            rewrite ^.*$ /static-my-ui/index.html break;
        }
    }
}

InstallDependencies 内置组件增强

解决类似需求： Wxh16144/dumi-debug-app#11 不一定是前端几个包管理器安装依赖操作

下面是一个伪代码：

import React from 'react';
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import SourceCode from 'dumi/theme-default/builtins/SourceCode';

const map: any = {
  android: {
    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/android/android-original.svg',
    label: 'Android'
  },
  ios: {
    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/apple/apple-original.svg',
    label: 'iOS'
  },
  windows: {
    icon: `https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/windows8/windows8-original.svg`,
    label: 'Windows'
  },
  linux: {
    icon: `https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/linux/linux-original.svg`,
    label: 'Linux'
  },
}

const InstallDependencies: React.FC = (props) => {
  const items = Object.entries(props)
    .map(([key, value]: any) => {
      if (!value || !map[key]) return null;

      return {
        key,
        children: <SourceCode lang="bash">{value}</SourceCode>,
        label: (
          <div>
            <img src={map[key].icon} alt={map[key].label} style={{ width: 18, height: 18 }} />
            <span style={{ marginLeft: 8 }}>{map[key].label}</span>
          </div>
        ),
      };
    })
    .filter(Boolean) as TabsProps['items'];

  return (
    <Tabs
      className="antd-site-snippet"
      // defaultActiveKey="npm"
      items={items}
    />
  );
};

export default InstallDependencies;