- A+
所属分类:Web前端
直接上答案
theme.ts
配置中添加下面这行配置项
{ editLinkPattern: ":repo/edit/:branch/:path",// 我是部署的GitLab,具体匹配规则可以照着代码管理工具改 }
原因
花了几个小时,最后在源码里找到答案,我们先来看官方文档中这个配置项的说明:
文档中editLinkPattern
与上面的editLink
配置项放一起时极具迷惑性:
你可能直觉认为editLink
配置项比editLinkPattern
的优先级高,即editLink
为true
时,就应该展示“编辑此页”链接,哪怕自动生成的匹配规则错了,等测试发现后再来配置editLinkPattern
。
这就埋下了坑,你如果不是内置支持的GitHub、Gitlab、Gitee和Bitbucket链接(例如内网链接),那么不配置这项就直接不会展示“编辑此页”链接,哪怕editLink
配置为true
。
源码解析
// packages/theme/src/client/modules/info/components/PageMeta.ts const { repo, docsRepo = repo, docsBranch = "main", docsDir = "", editLink, editLinkPattern = "", } = themeLocale.value; const showEditLink = frontmatter.value.editLink ?? editLink ?? true; if (!showEditLink) return null;// 可以看到`editLink`就算为`true`,还要判断下面`link`的值 if (!docsRepo) return null; const link = resolveEditLink({ docsRepo, docsBranch, docsDir, editLinkPattern, filePathRelative: page.value.filePathRelative, });// 只要`resolveEditLink`方法返回null,同样不会渲染"编辑此页"链接 if (!link) return null; return { text: themeLocale.value.metaLocales.editLink, link, };
我们再来看看resolveEditLink
方法
// packages/theme/src/client/modules/info/utils/resolveEditLink.ts export const resolveEditLink = ({ docsRepo, docsBranch, docsDir, filePathRelative, editLinkPattern, }: EditLinkOptions): string | null => { if (!filePathRelative) return null; const repoType = resolveRepoType(docsRepo);// 只要不是内置支持的链接,`resolveRepoType`方法就会返回null let pattern: string | undefined; if (editLinkPattern) pattern = editLinkPattern;// 这里`editLinkPattern`为"",就不会给`pattern`赋值 else if (repoType !== null) pattern = editLinkPatterns[repoType];// `repoType`为null,也不会给`pattern`赋值 if (!pattern) return null;// `pattern`为`undefined`,返回null,导致不渲染"编辑此页"链接 return pattern .replace( /:repo/u, isLinkHttp(docsRepo) ? docsRepo : `https://github.com/${docsRepo}`, ) .replace(/:branch/u, docsBranch) .replace( /:path/u, removeLeadingSlash(`${removeEndingSlash(docsDir)}/${filePathRelative}`), ); };