feat(plugin-docs): add article footer meta & update layout & modify colors

[LolipopJ]

本次 PR 针对 @umijs/plugin-docs 做了如下工作：

Feat

• 对于 Git 仓库，添加文档的上次更新时间、创建时间和贡献者信息。代码实现基于 VuePress 的 git 插件。
• 在文章页显示文档编辑链接、上次更新时间、创建时间（悬停上次更新时间处显示）和贡献者信息。
• 将显示信息可配置化。
• 支持多语言默认内容。

通过配置 theme.config.ts 中的 git 属性即可开启此功能：

export default {
  git: {},
};

可以关闭文档的编辑链接、上次更新时间、创建时间或贡献者信息的显示：

export default {
  // github: 'https://github.com/umijs/umi',
  git: {
    repo: 'https://github.com/umijs/umi-next', // 若未指定，则取 github 配置项
    branch: 'master', // 若未指定，则为 main
    displayEditLink: false,
    displayUpdatedTime: false,
    displayCreatedTime: false,
    displayContributors: false,
  },
};

Style

• 在日间模式下，为左侧菜单添加了背景色，增加层次感。
• 添加了新的布局断点，屏幕宽度在 lg 至 xl 之间时，仅隐藏 Toc。
• 调整 Toc 位置，使得文章主体部分到两边栏的距离保持一致。

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
umi-next	✅ Ready (Inspect)	Visit Preview	May 6, 2022 at 3:10AM (UTC)

[fz6m]

execa 在 utils 包里有 compiled 的，要不要直接加到依赖里用

[LolipopJ]

execa 在 utils 包里有 compiled 的，要不要直接加到依赖里用

当然！使用的 execa 版本也相同，不会冲突。

该怎样引用呢……？

[fz6m]

添加 @umijs/utils 至 package.json#dependencies ，之后直接

import { execa } from '@umijs/utils'

[sorrycc]

https://umi-next-git-fork-lolipopj-feat-article-actions-chencheng.vercel.app/docs/tutorials/getting-started contributor 信息好像不全？

[LolipopJ]

https://umi-next-git-fork-lolipopj-feat-article-actions-chencheng.vercel.app/docs/tutorials/getting-started contributor 信息好像不全？

应该是 Vercel 预览部署的问题？它可能创建了一份新的 Git commits 记录。本机跑的时候，能够正确显示：

---

上周部署的时候，只显示了我为 Contributor，https://umi-next-n1f7if29c-umijs.vercel.app/docs/guides/directory-structure ；今天合并了一下最近的提交，再部署的时候，Contributor 变成了期间对文档进行了修改的人，https://umi-next-1uth76n68-chencheng.vercel.app/docs/guides/directory-structure 。猜测是 Vercel 持续集成独特的机制，合并了每个文件的提交记录。

不知道合并到主分支后，Git 的 commits 信息会否保留原样。

[fz6m]

感觉是 vercel 用了 depth=1 的 source，所以获取不到完整的 commit history

[LolipopJ]

感觉是 vercel 用了 depth=1 的 source，所以获取不到完整的 commit history

是的！一语中的：

When you trigger a deployment, Vercel builds your project. During the build step, Vercel performs a "shallow clone" on your Git repository by using the command git clone --depth=10 (...) to fetch ten levels of git commit history. This way, Vercel pulls only the latest ten commits and not the entire repo history.

Build Step - Vercel Docs

但 Vercel 官方似乎没有给出配置 --depth 属性的环境变量……

[fz6m]

感觉是 vercel 用了 depth=1 的 source，所以获取不到完整的 commit history

是的！一语中的：

When you trigger a deployment, Vercel builds your project. During the build step, Vercel performs a "shallow clone" on your Git repository by using the command git clone --depth=10 (...) to fetch ten levels of git commit history. This way, Vercel pulls only the latest ten commits and not the entire repo history. Build Step - Vercel Docs

但 Vercel 官方似乎没有给出配置 --depth 属性的环境变量……

把 contributor 这部分切割了吧，改成在 github 编辑此页 + latest edit time，你觉得呢

[LolipopJ]

把 contributor 这部分切割了吧，改成在 github 编辑此页 + latest edit time，你觉得呢

是的，这是目前可行的替代方案了。可以在 theme.config.ts 文件中配置展示内容，对于 Vercel 部署的文档，建议用户配置如下：

export default {
  git: {
    // 仓库地址
    repoUrl: 'https://github.com/umijs/umi-next',
    // 显示编辑文档链接
    diaplayEditLink: true,
    // 显示文档上次更新时间
    displayUpdatedTime: true,
    // 隐藏文档创建时间
    displayCreatedTime: false,
    // 隐藏文档贡献者
    displayContributors: false,
  },
};

[LolipopJ]

把 contributor 这部分切割了吧，改成在 github 编辑此页 + latest edit time

@sorrycc @fz6m check here: https://umi-next-qu3rzl9hz-chencheng.vercel.app/zh-CN/docs/tutorials/getting-started

When you trigger a deployment, Vercel builds your project. During the build step, Vercel performs a "shallow clone" on your Git repository by using the command git clone --depth=10 (...) to fetch ten levels of git commit history. This way, Vercel pulls only the latest ten commits and not the entire repo history.

显示 latest edit time 仍然存在的问题是，文档更新时间最早仍为仓库 10 次提交前的时间，而非实际的最后修改时间。~不过，有总比没有好。~