Valaxy Yun External Link

::: zh-CN

视频教程

项目地址:https://github.com/mete0rxsc/valaxy-yun-external-link

valaxy-yun-external-link

valaxy-yun-external-link 是一个用于安全验证的Vue组件，用于验证用户输入的 URL 是否安全。它支持Valaxy原生主题Yun主题

实现功能

安全验证：通过Vue组件劫持用户点击文章超链接的行为，重定向到站内告知页面的链接。
自定义配置：允许用户自定义配置，如自定义跳转页面的CSS样式、跳转页面的标题、跳转页面的描述等。
Base64加密：使用Base64加密算法对地址栏URL进行加密，以保护用户隐私。
控制台信息显示：在控制台输出调试信息，方便开发者调试，当点击一个链接时，控制台会输出”Opening external link: “。
兼容性：兼容Twikoo评论区，防止恶意链接。
智能性：会自动检测本站URL，如果用户点击本站URL，则不会跳转，而是直接打开本站页面。

使用方法

Clone这个仓库的源码valaxy-yun-external-link仓库到本地。
将本仓库内的文件除README.md和node_modules外的所有文件复制到你的Valaxy主题Yun主题的根目录下。
在控制台重新运行pnpm valaxy以加载新增的组件。
进入网站查看组件是否生效。

[!TIP]
如果放入components和layouts文件插件并未加载或进入首页报错,请将components和layouts内的文件删除
将node_modules文件放入Valaxy主题根目录内

文件夹结构

/--
  |-- components/                            # Vue组件文件夹
    |-- LinkInterceptor.vue                  # Vue组件文件
  |-- layouts/                               # Vue布局文件夹
    |-- post.vue                             # 文章发页面的Vue布局文件
  |-- node_modules/                          # Node模块文件夹（如果无报错请不要使用这个文件）
  |-- README.md                              # 帮助文档
  |-- public                                 # 公共资源文件夹
    |-- external-link.html                   # 中转页面的Html文件

修改建议

如果你想要修改中转页面的背景颜色，请修改
public/external-link.html文件中的<body>标签的style属性中的background-color值和
public/external-link.html文件中第171-197行的对应值
对应代码

// 根据模式设置背景颜色、文字颜色和背景线条
if (mode === 'normal') {
  document.body.style.backgroundColor = '#FFFFFF'; // 白色背景
  document.body.style.color = '#000'; // 文字颜色改为黑色

  // 调整按钮样式
  const buttons = document.querySelectorAll('.btn');
  buttons.forEach(button => {
    button.style.backgroundColor = '#333'; // 深色背景
    button.style.color = '#FFF'; // 浅色文字
  });

  // 调整背景线条为灰色
  document.body.style.backgroundImage = `
    linear-gradient(rgba(128, 128, 128, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, 0.1) 1px, transparent 1px)
  `;
} else {
  document.body.style.backgroundColor = '#222'; // 默认黑色模式背景
  document.body.style.color = '#FFF'; // 文字颜色改为白色

  // 恢复默认背景线条
  document.body.style.backgroundImage = `
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
  `;
}

如果你想要修改中转页面的标题和描述，请修改
public/external-link.html文件中第83-95行的对应值
对应代码

<body>
  <div class="main-container">
    <div class="button-group">
      <button id="direct-link" class="btn">直接跳转</button>
      <a href="/" class="btn">返回首页</a>
    </div>
    
    <div class="content-box">
      <h2>即将跳转到外部网站</h2>
      <p>您即将访问: <strong id="external-url"></strong></p>
      <p>将在 <span id="countdown">5</span> 秒后自动跳转...</p>
    </div>
  </div>

[!WARNING]
如果不是个人需求，请不要修改Vue代码，否则可能会导致组件失效。
或者出现重复跳出新标签页的严重Bug

问题反馈

如果有任何问题，请提 issue 或者联系作者邮箱 Mete0r_xsc@hotmail.com，或者在网站中进行提问：https://www.xscnas.top

:::

::: en

valaxy-yun-external-link

valaxy-yun-external-link is a Vue component for security verification, designed to validate whether user-input URLs are safe. It is compatible with Valaxy’s native Yun theme.

Features

Security Verification: Intercepts user clicks on article hyperlinks via Vue components and redirects them to an in-site notification page.
Customizable Configuration: Allows users to customize settings such as CSS styles for the redirect page, page title, and description.
Base64 Encryption: Uses Base64 encryption for URL parameters to protect user privacy.
Console Logging: Outputs debug information in the console for developer convenience (e.g., “Opening external link: “ when a link is clicked).
Compatibility: Works seamlessly with Twikoo comments to prevent malicious links.
Smart Detection: Automatically detects internal site URLs. If a user clicks an internal link, it directly opens the page without redirection.

Usage

Clone the valaxy-yun-external-link repository to your local machine.
Copy all files (except README.md and node_modules) to the root directory of your Valaxy Yun theme.
Restart pnpm valaxy in the terminal to load the new component.
Check if the component works by visiting your site.

[!TIP]
If the component fails to load or causes errors on the homepage, delete the files in the components and layouts folders.
If issues persist, place the node_modules folder in the root directory of your Valaxy theme.

Folder Structure

/--  
  |-- components/                            # Vue components folder  
    |-- LinkInterceptor.vue                  # Vue component file  
  |-- layouts/                               # Vue layouts folder  
    |-- post.vue                             # Vue layout file for article pages  
  |-- node_modules/                          # Node modules folder (use only if errors occur)  
  |-- README.md                              # Documentation  
  |-- public                                 # Public resources folder  
    |-- external-link.html                   # Redirect page HTML file

Customization Suggestions

To modify the background color of the redirect page, edit:

The background-color value in the <body> tag’s style attribute in public/external-link.html.
The corresponding values in lines 171-197 of public/external-link.html.

Relevant code:

// Set background color, text color, and background lines based on mode  
if (mode === 'normal') {  
  document.body.style.backgroundColor = '#FFFFFF'; // White background  
  document.body.style.color = '#000'; // Black text  

  // Adjust button styles  
  const buttons = document.querySelectorAll('.btn');  
  buttons.forEach(button => {  
    button.style.backgroundColor = '#333'; // Dark background  
    button.style.color = '#FFF'; // Light text  
  });  

  // Set background lines to gray  
  document.body.style.backgroundImage = `  
    linear-gradient(rgba(128, 128, 128, 0.1) 1px, transparent 1px),  
    linear-gradient(90deg, rgba(128, 128, 128, 0.1) 1px, transparent 1px)  
  `;  
} else {  
  document.body.style.backgroundColor = '#222'; // Default dark mode background  
  document.body.style.color = '#FFF'; // White text  

  // Restore default background lines  
  document.body.style.backgroundImage = `  
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),  
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)  
  `;  
}

To modify the title and description of the redirect page, edit lines 83-95 in public/external-link.html.

Relevant code:

<body>  
  <div class="main-container">  
    <div class="button-group">  
      <button id="direct-link" class="btn">Proceed</button>  
      <a href="/" class="btn">Return Home</a>  
    </div>  
    
    <div class="content-box">  
      <h2>You are leaving for an external site</h2>  
      <p>You are about to visit: <strong id="external-url"></strong></p>  
      <p>Redirecting in <span id="countdown">5</span> seconds...</p>  
    </div>  
  </div>

[!WARNING]
Avoid modifying the Vue code unless necessary, as it may cause the component to malfunction or trigger repeated tab-opening bugs.

Issue Reporting
For any issues, please submit an issue or contact the author via email: Mete0r_xsc@hotmail.com.
Alternatively, visit the website for support: https://www.xscnas.top.

[!WARNING]
This content is translated from Chinese by a machine and may contain unrealistic information

:::