الصفحة الرئيسية
VitePress

如何在 VitePress 构建的网站中实现“安全链接”或“跳转中间页”跳转效果

08yt

如何在 VitePress 中实现这种“安全链接”或“跳转中间页”（例如 ygjc.cc/go?id=mitce 跳转到真实的mitce机场vpn的推广链接），最适合的方法是使用 Vue 组件进行客户端重定向。

由于我的网站一个机场推荐网部署在 Cloudflare Pages 上，经常有推广链接需要添加到网站里，这种静态页面的客户端跳转非常快且成本为零。

以下是实现步骤，我们将创建一个专门的跳转页面（例如 /go），然后通过 URL 参数来控制跳转目标。

请照着以下步骤进行设置。

步骤 1：建立链接映射文件 (数据库)

为了方便管理，不要把链接散落在代码里。我们创建一个专门的文件来存放所有的推广链接。


我用 VSCode 软件在本地仓库的 .vitepress 目录下新建一个文件夹 data，然后将以下代码放在新建 links.ts 文件里：

TypeScript

// .vitepress/data/links.ts

// 这里定义你的短链 ID 和对应的真实推广链接
export const linkMap: Record<string, string> = {
  // 格式: 'ID': '真实URL'
  'mitce': 'https://mitce.net/aff.php?aff=11434',
  '糖果云': 'https://candytally.cyou/web/#/login?code=TkS1YnZa',
  '雪山机场': 'https://x2.xueshan.shop/#/register?code=J9ETa4E2',
  // 添加更多...
}

步骤 2：创建跳转组件

我们需要一个 Vue 组件来读取 URL 里的参数，并执行跳转。


在 .vitepress/theme/components/ 下新建 Redirect.vue：

代码段

<script setup>
import { onMounted, ref } from 'vue'
import { linkMap } from '../../data/links' // 引入刚才的数据文件

const status = ref('正在跳转中...')
const targetUrl = ref('')

onMounted(() => {
  // 1. 获取 URL 中的参数，例如 ygjc.cc/go?id=aliyun
  const urlParams = new URLSearchParams(window.location.search)
  const key = urlParams.get('id') // 获取 ?id= 后面的值

  // 2. 查找对应的真实链接
  if (key && linkMap[key]) {
    targetUrl.value = linkMap[key]
    status.value = `正在前往: ${key}...`
    
    // 3. 执行跳转 (延迟一点点体验更好，或者设为 0 直接跳)
    setTimeout(() => {
      window.location.replace(targetUrl.value) // 使用 replace 不会留下历史记录
    }, 500)
  } else {
    status.value = '链接无效或已失效。'
  }
})
</script>

<template>
  <div class="redirect-container">
    <div class="card">
      <div class="loader"></div>
      <p>{{ status }}</p>
      <p v-if="targetUrl" class="sub-text">
        如果未自动跳转，<a :href="targetUrl" rel="nofollow">点击这里</a>
      </p>
    </div>
  </div>
</template>

<style scoped>
/* 简单的居中样式 */
.redirect-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  text-align: center;
}
.card {
  padding: 2rem;
  background: var(--vp-c-bg-soft);
  border-radius: 12px;
}
.sub-text {
  font-size: 0.9em;
  opacity: 0.7;
  margin-top: 10px;
}
</style>

步骤 3：注册组件

在 .vitepress/theme/index.ts 中注册这个组件，以便在 Markdown 中使用。


TypeScript

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import Redirect from './components/Redirect.vue' // 引入组件

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('Redirect', Redirect) // 注册组件
  }
}

步骤 4：创建跳转页面

在您的 docs 根目录下（或者您存放文章的地方），新建一个文件，例如 go.md。


Markdown

---
layout: page
title: 安全跳转
search: false 
---

<Redirect />

注意：search: false 是为了防止这个跳转页面被站内搜索索引到。

如何使用？

现在，您已经部署好了跳转链接系统。

  1. 定义链接：

在 .vitepress/data/links.ts 里添加：

‘mitce’: ‘https://mitce.net/aff.php?aff=11434’

  1. 在文章中使用：

您可以在文章里这样写链接：




Markdown

[点击购买高性价比 Mitce VPS](/go?id=mitce)
  1. 用户体验：

用户点击链接 -> 浏览器访问 ygjc.cc/go?id=mitce -> 页面显示“正在跳转” -> 0.5秒后自动跳到真实的商家页面。

效果如下：


进阶优化：不想用 ?id= 这种参数？

如果您觉得 ygjc.cc/go?id=mitce 这种带问号的链接不够优雅，想要 ygjc.cc/go/mitce 这种格式。

方法：

这就不能用上面的单一页面逻辑了，您需要为每个推广创建一个 .md 文件。

例如新建 docs/go/mitce.md，内容如下：

Markdown

---
head:
  - - script
    - {}
    - >
      window.location.replace("https://mitce.net/aff.php?aff=11434");
---
正在跳转到Mitce机场...

这种方法不需要组件，链接更短，但管理起来比较麻烦（每个链接都要建一个文件）。推荐还是使用上面第一种 ?id= 的组件化方案，维护方便。

以上文章中提到的机场为：一个机场的 Mitce 机场评测页面，赶快去试试吧。

إرسال تعليق