Vuepress-Theme-Hope - 不顯示“編輯此頁”

TinyMaD發表於2024-11-12
Vue

直接上答案

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}`),
    );
};

相關文章