diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
index b99bfafa..564b07ec 100644
--- a/src/client/theme-default/components/NavBar.vue
+++ b/src/client/theme-default/components/NavBar.vue
@@ -12,7 +12,7 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <NavBarLinks class="hide-mobile"/>
+  <NavBarLinks class="hide-mobile" />
 </template>
 
 <script src="./NavBar"></script>
diff --git a/src/client/theme-default/components/NavRepoLink.ts b/src/client/theme-default/components/NavRepoLink.ts
new file mode 100644
index 00000000..a0b105a2
--- /dev/null
+++ b/src/client/theme-default/components/NavRepoLink.ts
@@ -0,0 +1,47 @@
+import { computed, defineComponent, PropType } from 'vue'
+import OutboundLink from './icons/OutboundLink.vue'
+import { DefaultTheme } from '/@theme/config'
+
+export default defineComponent({
+  components: {
+    OutboundLink
+  },
+
+  props: {
+    editLinkConfig: {
+      type: Object as PropType<DefaultTheme.EditLinkConfig>,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const editLinkConfig = props.editLinkConfig
+    const repoLink = computed(() => {
+      if (editLinkConfig && editLinkConfig.repo) {
+        return /^https?:/.test(editLinkConfig.repo)
+          ? editLinkConfig.repo
+          : `https://github.com/${editLinkConfig.repo}`
+      }
+      return null
+    })
+    const repoLabel = computed(() => {
+      if (!repoLink.value) return
+      const repoHosts = repoLink.value.match(/^https?:\/\/[^/]+/)
+      if (!repoHosts) return
+      const repoHost = repoHosts[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    })
+    return {
+      repoLink,
+      repoLabel
+    }
+  }
+})
diff --git a/src/client/theme-default/components/NavRepoLink.vue b/src/client/theme-default/components/NavRepoLink.vue
new file mode 100644
index 00000000..f1091274
--- /dev/null
+++ b/src/client/theme-default/components/NavRepoLink.vue
@@ -0,0 +1,22 @@
+<template>
+  <a
+    v-if="repoLink"
+    :href="repoLink"
+    class="repo-link"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {{ repoLabel }}
+    <OutboundLink />
+  </a>
+</template>
+
+<script src="./NavRepoLink"></script>
+
+<style>
+.repo-link {
+  margin-left: 1.5rem;
+  color: var(--text-color);
+  font-weight: 600;
+}
+</style>