fix: style compatibility for content footer navigation (#1800)

* fix: style compatibility for content footer navigation * docs: improve last updated config * refactor: remove duplicated tab suffix for demo id
umijs · Jul 30, 2023 · 55a6f04 · 55a6f04
1 parent c4fb651
commit 55a6f04
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/docs/guide/faq.md b/docs/guide/faq.md
@@ -138,10 +138,16 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - run: npm install
-      # 文档编译命令，如果是 react 模板需要修改为 npm run docs:build
-      - run: npm run build
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # 如果配置 themeConfig.lastUpdated 为 false，则不需要添加该参数以加快检出速度
+          fetch-depth: 0
+      - name: Install dependencies
+        run: npm install
+      - name: Build with dumi
+        # 文档编译命令，如果是 react 模板需要修改为 npm run docs:build
+        run: npm run build
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

diff --git a/docs/theme/default.md b/docs/theme/default.md
@@ -30,6 +30,8 @@ dumi 内置了一套完善的默认主题，默认主题的呈现效果与 dumi
 
 配置是否在 Markdown 页面内容区域底部展示当前文档的最后更新时间。
 
+文档最后更新时间来源于 Git 提交记录，如果 Markdown 文档还未被 Git 追踪，那么则会展示构建时间；如果你的文档通过 GitHub Action 进行部署，还需要在 [actions/checkout](https://github.com/actions/checkout) 步骤中加上 `fetch-depth: 0` 参数以检出所有 Git 提交记录，确保可以 dumi 可以拿到正确的最后更新时间，具体可参考 [FAQ - 自动部署](../guide/faq.md#自动部署)。
+
 ### logo
 
 - 类型：`string | false`

diff --git a/src/client/theme-default/slots/ContentFooter/index.less b/src/client/theme-default/slots/ContentFooter/index.less
@@ -94,28 +94,36 @@
       }
 
       &[data-prev] {
-        float: inline-start;
+        float: left;
         padding-inline-end: 24px;
 
         svg {
           margin-inline-end: 4px;
+        }
+
+        [data-direction='rtl'] & {
+          float: right;
 
-          [data-direction='rtl'] & {
+          svg {
             transform: rotate(180deg);
           }
         }
       }
 
       &[data-next] {
-        float: inline-end;
+        float: right;
         text-align: end;
         padding-inline-start: 24px;
 
         svg {
           margin-inline-start: 4px;
           transform: rotate(180deg);
+        }
+
+        [data-direction='rtl'] & {
+          float: left;
 
-          [data-direction='rtl'] & {
+          svg {
             transform: rotate(0);
           }
         }

diff --git a/src/loaders/markdown/transformer/rehypeDemo.ts b/src/loaders/markdown/transformer/rehypeDemo.ts
@@ -1,6 +1,5 @@
 import parseBlockAsset from '@/assetParsers/block';
 import type { IDumiDemoProps } from '@/client/theme-api/DumiDemo';
-import { getTabKeyFromFile, isTabRouteFile } from '@/features/tabs';
 import { getFileIdFromFsPath } from '@/utils';
 import type { sync } from 'enhanced-resolve';
 import type { Element, Root } from 'hast';
@@ -286,10 +285,7 @@ export default function rehypeDemo(
                 path.relative(opts.cwd, parseOpts.fileAbsPath),
               );
             } else {
-              const tabKey = isTabRouteFile(opts.fileAbsPath)
-                ? getTabKeyFromFile(opts.fileAbsPath)
-                : '';
-              const localId = [tabKey, opts.fileLocale, String(index++)]
+              const localId = [opts.fileLocale, String(index++)]
                 .filter(Boolean)
                 .join('-');