Hxsyzl blog

加群向导&其他问题

Wed, 23 Jul 2025 00:00:00 GMT

加入群聊

QQ 群号：118098857
点击链接加入群聊【LG kernel release channel】：https://qm.qq.com/q/Yp6hbIQ0WO

常见问题

EdgeOne CDN 相关

Q: 内测时间截至到哪？

A: “方法 1” 的截止日期为 2025 年 7 月 25 日 23:59:59 (UTC+8)。“方法 2” 和 “方法 3” 将在 7 月 15 日之后继续。我们目前处于有限测试阶段。详情请参阅：EdgeOne 兑换活动规则第五条。

Q: 国内外兑换码通用吗？

A: 通用。但如果您需要同时使用国内和国际站，则需要两个独立的兑换码。

Q: 国内外站有什么区别？

A: 国际站如果需要使用中国大陆节点，必须进行实名认证，但不支持使用中国大陆身份证。国内站则无此限制。

Q: 国际站绑卡有什么要求？是否必须为外币卡？授权费多少？

A: 支持银联卡。CVC 安全码请填写卡号背面的后三位数字。会有一笔 1 美元的授权费用，该费用在验证后会退还。

Q: 回源到 Cloudflare 站点后报错 “423 Locked” 怎么办？

A: 将回源 HOST 设置为您的源站地址。

Q: 如何套上家里的服务器（“家里云”）？

A: “家里云” 需使用 IPv6 和 DDNS。在 EdgeOne 中，将回源地址设置为您的 v6 域名及相应端口即可。

Q: 免费套餐限速吗？

A: 单线程下载速度限制为 512KB/s。在多线程环境下，我个人的测试速度最高可达 72MB/s。

内网穿透相关

Q: 我怎么判断自己的网络环境是不是 NAT1？

A: 可以安装 Lucky 等工具，尝试通过 STUN 服务进行打洞测试。如果成功，则通常意味着您的网络类型为 NAT1。

Q: 如何尽力将我的网络优化成 NAT1？

A: 推荐配置：将光猫设置为桥接模式，使用路由器进行 PPPoE 拨号，并开启 UPnP 功能。如果需要，也可以设置 DMZ，将其指向您希望获得 NAT1 体验的设备 IP 地址。

博客侧边栏美化：集成一个智能天气卡片

Mon, 18 Aug 2025 00:00:00 GMT

前言 📝

一个个性化的博客，除了内容优质，一些有趣的小部件也能极大地提升访客体验。
天气卡片就是一个常见但非常实用的小功能，它能让访客在浏览您的博客时，顺便了解当地的天气情况，增加页面的互动性和趣味性。
本教程将展示如何为博客添加一个智能天气卡片。它不仅会自动根据访客的 IP 地址显示天气，还提供了一个“精确定位”按钮，让用户可以获取更准确的天气信息。我们还会用漂亮的图标和渐变色来美化它。

方案概述 🗺️ 我们的天气卡片是一个独立的 Svelte 组件，它负责处理所有与天气相关的功能：

IP 定位 📍：组件加载时，会首先通过 ipapi.co 服务获取访客的大致位置（城市）。
天气查询 🌦️：根据获取到的经纬度，调用 Open-Meteo 的免费 API 来获取实时天气数据。
精确定位（可选） 🛰️：用户可以点击一个按钮，授权浏览器使用更高精度的地理位置（如 GPS），并通过 Nominatim 服务将经纬度反向解析成城市名称，从而获得更准确的天气。
UI 展示 ✨：使用 Svelte 来动态展示天气信息，包括温度、风速，并根据天气代码显示不同的 Emoji 图标，同时卡片拥有现代化的渐变背景和布局。

实现步骤 ⚙️

整个实现过程都封装在一个 Svelte 组件中，非常便于集成。

创建 Svelte 组件 我们在 src/components/widget/ 目录下创建了 Weather.svelte 文件。这是所有逻辑的核心。
编写组件代码 组件的 <script> 部分包含了所有功能逻辑：
- onMount：组件挂载后，立即开始 IP 定位和天气查询流程。
- fetchWeather：一个专门的函数，负责根据经纬度调用天气 API。
- getCityFromCoords：当使用精确定位时，这个函数负责将经纬度转换成城市名。
- usePreciseLocation：处理“精确定位”按钮的点击事件，调用浏览器 Geolocation API。
- getWeatherIcon：一个辅助函数，根据 Open-Meteo 返回的天气代码（weathercode）匹配一个合适的 Emoji 图标，让界面更生动。
集成到侧边栏 最后，我们只需要在侧边栏组件 src/components/widget/SideBar.astro 中引入并使用这个新的天气组件即可。
```
---
import Weather from "./Weather.svelte";
---
<Weather client:load />
```
client:load 指令告诉 Astro，这个组件需要在客户端加载和渲染，因为它的功能依赖于浏览器环境（如 fetch 和 navigator.geolocation）。

结束 🎉 通过这个小小的天气卡片，我们的博客侧边栏变得更加生动和实用。这个功能不仅展示了 Svelte 在构建交互式组件方面的强大能力，也体现了通过组合多个第三方 API 来实现复杂功能的灵活性。希望这个小教程能给你的博客带来一点新的色彩。如果你有任何问题或改进建议，欢迎随时提出！

附录：最终配置文件

天气卡片组件: src/components/widget/Weather.svelte

<script lang="ts">
  import { onMount } from 'svelte';

  let weather: any = null;
  let city: string = '';
  let error: string = '';
  let loading: boolean = true;

  // Weather code to SVG icon mapping
  function getWeatherIcon(code: number): string {
    if (code === 0) return '☀️'; // Clear sky
    if (code >= 1 && code <= 3) return '☁️'; // Mainly clear, partly cloudy, overcast
    if (code >= 45 && code <= 48) return '🌫️'; // Fog
    if (code >= 51 && code <= 65) return '🌧️'; // Drizzle, Rain
    if (code >= 80 && code <= 82) return '🌦️'; // Rain showers
    if (code >= 95 && code <= 99) return '⛈️'; // Thunderstorm
    return '-';
  }

  async function fetchWeather(latitude: number, longitude: number) {
    const weatherResponse = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`);
    if (!weatherResponse.ok) {
      throw new Error('获取天气信息失败');
    }
    const weatherData = await weatherResponse.json();
    weather = weatherData.current_weather;
  }

  async function getCityFromCoords(latitude: number, longitude: number) {
    try {
      const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&accept-language=zh-CN`);
      if (!response.ok) return '当前位置';
      const data = await response.json();
      return data.address.city || data.address.town || data.address.village || '当前位置';
    } catch (e) {
      console.error("Reverse geocoding failed", e);
      return '当前位置';
    }
  }

  async function usePreciseLocation() {
    loading = true;
    error = '';
    if (!navigator.geolocation) {
      error = '您的浏览器不支持精确定位。';
      loading = false;
      return;
    }
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        city = await getCityFromCoords(latitude, longitude);
        await fetchWeather(latitude, longitude);
        loading = false;
      },
      (err) => {
        error = err.code === err.PERMISSION_DENIED ? '您已拒绝位置权限，无法使用精确定位。' : '无法获取精确定位。';
        loading = false;
      }
    );
  }

  onMount(async () => {
    try {
      const ipResponse = await fetch('https://ipapi.co/json/');
      if (!ipResponse.ok) throw new Error('获取IP信息失败');
      const ipData = await ipResponse.json();
      city = ipData.city || '未知位置';
      const { latitude, longitude } = ipData;
      if (!latitude || !longitude) throw new Error('无法通过IP确定位置');
      await fetchWeather(latitude, longitude);
    } catch (e: any) {
      error = e.message;
      console.error(e);
    } finally {
      loading = false;
    }
  });
</script>

<div class="weather-widget p-4 rounded-lg shadow-md bg-gradient-to-br from-blue-200 to-cyan-200 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200">
  <div class="flex justify-between items-center mb-3">
    <h2 class="text-lg font-bold">{city} 天气</h2>
    <button on:click={usePreciseLocation} class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:outline-none">
      精确定位
    </button>
  </div>
  {#if loading}
    <div class="flex items-center justify-center h-24">
      <p>正在加载天气...</p>
    </div>
  {:else if weather && !error}
    <div class="flex items-center justify-around text-center">
      <div class="text-5xl">
        {getWeatherIcon(weather.weathercode)}
      </div>
      <div class="pl-4">
        <div class="text-2xl font-bold">{weather.temperature}°C</div>
        <div class="text-sm mt-1">
          <span title="风速">🌬️</span> {weather.windspeed} km/h
        </div>
      </div>
    </div>
  {:else if error}
    <div class="flex items-center justify-center h-24">
      <p class="text-red-500">{error}</p>
    </div>
  {/if}
</div>

解放生产力：通过 GitHub Action 与 Cloudflare Worker 实现博客文章自动提交至必应

Tue, 12 Aug 2025 00:00:00 GMT

前言 📝

对于我们这些博主来说，写完一篇文章后，最重要的事情之一就是让搜索引擎尽快收录它。
每次都手动去必应站长平台提交新文章的 URL，不仅繁琐，而且容易忘记，久而久之就成了个麻烦事 😩。
本教程将带你设置一个“无服务器”的全自动化流程：当你用 git push 推送新文章到 GitHub 仓库时，它会自动将文章链接提交给必应。一次配置，永久省心 ✅。
本教程需要你有一个域名托管在 Cloudflare，并且对 GitHub Actions 有最基本的了解。

方案概述 🗺️ 整个自动化流程分为两个核心部分：

Cloudflare Worker ☁️：一个轻量级的无服务器脚本，它接收一个文件名列表，然后负责调用必应的 API 来提交最终的 URL。
GitHub Action 🚀：一个在你的仓库中运行的工作流，它会在你每次推送代码时被触发，找出新添加的文章，然后通知上面的 Cloudflare Worker 来干活。

听起来很简单，对吧我们这就开始。

第一部分：配置 Cloudflare Worker ⚙️

我们的 Worker 是一个独立的 TypeScript 项目，专门用来处理来自 GitHub 的请求。

创建 Worker 目录 首先，在你的项目根目录创建一个新文件夹，比如 bing-submit-worker。
编写 Worker 代码 (index.ts) 这是 Worker 的核心逻辑。它会监听 POST 请求，解析请求中包含的文件名，拼接成完整的 URL，然后发送给必应。
配置 Worker (wrangler.toml) 这个文件告诉 Cloudflare 如何部署你的 Worker。我们在这里明确了它的名称、入口文件以及最重要的——构建方式和模块格式，以避免一些常见的部署错误。
项目依赖 (package.json 和 tsconfig.json) 这两个文件用于管理项目依赖和 TypeScript 编译选项，确保我们的代码能在本地被正确识别，并且能成功构建。

第二部分：配置 GitHub Action 🔗

这是连接代码仓库和 Cloudflare Worker 的桥梁。

创建工作流文件 在你的仓库中，创建 .github/workflows/bing-submit.yml 文件。
编写工作流脚本 这个脚本会在每次向 src/content/posts/ 目录推送新 .md 文件时触发。它使用 git diff --name-only --diff-filter=A 命令来精确地找出那些新添加的文件，忽略对旧文件的修改。然后，它通过 curl 命令，将这些新文件名发送给我们刚刚部署的 Cloudflare Worker。

环境变量配置 🔑 为了让整个流程正常工作，我们需要配置两个关键的“秘密”变量。这可以确保我们的 API 密钥等敏感信息不会被硬编码在代码里。

BING_API_KEY (用于 Cloudflare Worker)
- 作用：这是你的必应站长工具 API 密钥，Worker 需要用它来获得向必应提交 URL 的授权。
- 获取方式：登录必应网站管理员工具，生成并复制你的 API 密钥。
- 配置方法：在你的终端里，进入 bing-submit-worker 目录，然后运行以下命令。它会提示你输入密钥，粘贴进去回车即可。
```
npx wrangler secret put BING_API_KEY
```
BING_SUBMIT_WORKER_URL (用于 GitHub Action)
- 作用：这是你部署成功后的 Cloudflare Worker 的访问 URL。GitHub Action 需要知道这个地址，才能把新文件名发送给它。
- 获取方式：当你成功运行 npx wrangler deploy 后，终端会输出你的 Worker URL，通常格式是 https://bing-submit-worker.your-account.workers.dev。
- 配置方法：
  1. 打开你的 GitHub 仓库页面，进入 Settings > Secrets and variables > Actions。
  2. 点击 New repository secret。
  3. Name: BING_SUBMIT_WORKER_URL
  4. Secret: 粘贴你获取到的 Worker URL。

结束 🎉 希望这篇教程能帮助你搭建起自己的自动化 SEO 流程，把时间花在更有创造力的事情上，而不是重复性的手动提交。配置完成后，你就可以完全忘记“提交 URL”这件事了，因为系统会为你处理好一切。如果你觉得这个方案不错，也可以根据这个思路，扩展到其他需要自动化的场景中去。祝大家折腾愉快！😋

附录：最终配置文件

本次修改涉及的核心文件的最终代码。

1. Cloudflare Worker: bing-submit-worker/index.ts

export interface Env {
	BING_API_KEY: string;
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
		if (request.method !== 'POST') {
			return new Response('Expected POST request', { status: 405 });
		}

		const { files } = await request.json<{ files: string[] }>();

		if (!files || !Array.isArray(files)) {
			return new Response('Missing "files" in request body', { status: 400 });
		}

		const siteUrl = 'https://www.497995.xyz';
		const urls = files.map(file => `${siteUrl}/posts/${file.replace(/\.md$/, '')}/`);

		try {
			const response = await fetch(`https://ssl.bing.com/webmaster/api.svc/json/SubmitUrlbatch?apikey=${env.BING_API_KEY}`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json; charset=utf-8',
				},
				body: JSON.stringify({
					siteUrl,
					urlList: urls,
				}),
			});

			const responseData = await response.json();

			if (response.ok) {
				console.log('Successfully submitted URLs to Bing:', responseData);
				return new Response(JSON.stringify({ success: true, submittedUrls: urls, bingResponse: responseData }), {
					headers: { 'Content-Type': 'application/json' },
				});
			} else {
				console.error('Error submitting URLs to Bing:', responseData);
				return new Response(JSON.stringify({ success: false, error: responseData }), {
					status: response.status,
					headers: { 'Content-Type': 'application/json' },
				});
			}
		} catch (error) {
			console.error('Failed to submit URLs to Bing:', error);
			return new Response(JSON.stringify({ success: false, error: (error as Error).message }), {
				status: 500,
				headers: { 'Content-Type': 'application/json' },
			});
		}
	},
};

2. Cloudflare Worker 配置: bing-submit-worker/wrangler.toml

name = "bing-submit-worker"
main = "index.ts"
compatibility_date = "2024-04-05"

[build]
command = "pnpm exec tsc"

[build.upload]
format = "modules"

[vars]
# You need to create a secret for your Bing API key:
# wrangler secret put BING_API_KEY

3. GitHub Action 工作流: .github/workflows/bing-submit.yml

name: Submit New Posts to Bing

on:
  push:
    branches:
      - main # Or your default branch
    paths:
      - 'src/content/posts/**.md'

jobs:
  submit-to-bing:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2 # Fetches the last 2 commits to compare HEAD with the previous commit

      - name: Get new files
        id: get_new_files
        run: |
          # Handle the case where before commit might be all zeroes (initial commit)
          if [ "${{ github.event.before }}" = "0000000000000000000000000000000000000000" ]; then
            # For initial commit, get all markdown files in posts directory
            NEW_FILES=$(find src/content/posts -name "*.md" -type f | sed 's#src/content/posts/##' | jq -R . | jq -s .)
          else
            # Get the list of added files in the push
            NEW_FILES=$(git diff --name-only --diff-filter=A ${{ github.event.before }} ${{ github.event.after }} | grep '^src/content/posts/.*\.md$' | sed 's#src/content/posts/##' | jq -R . | jq -s .)
          fi
          
          echo "New files detected: $NEW_FILES"
          echo "files=$NEW_FILES" >> $GITHUB_OUTPUT
          
          # Save to file for debugging
          echo "$NEW_FILES" > new_files.json

      - name: Show files to be submitted
        run: |
          echo "Files that will be submitted:"
          cat new_files.json
          
      - name: Trigger Bing Submission Worker
        if: steps.get_new_files.outputs.files != '[]' && steps.get_new_files.outputs.files != '' && steps.get_new_files.outputs.files != 'null'
        run: |
          echo "Sending files to Bing Submission Worker: ${{ steps.get_new_files.outputs.files }}"
          curl -X POST "${{ secrets.BING_SUBMIT_WORKER_URL }}" \
          -H "Content-Type: application/json" \
          -d "{\"files\": ${{ steps.get_new_files.outputs.files }} }"

给博客添加一个私有化的 AI 对话功能

Sun, 10 Aug 2025 00:00:00 GMT

最近我一直在琢磨，怎么能让我的博客更有趣一点。除了写文章，还能不能提供一些更具互动性的功能？很自然地，我想到了现在大火的 AI 对话。

市面上有很多现成的第三方聊天插件，但它们或多或少都有一些问题：要么是界面样式丑陋且难以定制，要么是需要将访客数据交给第三方，再或者就是价格不菲。作为一个喜欢折腾的开发者，我更倾向于一个能完全由自己掌控的解决方案。

于是，我花了点时间，为我的博客打造了一个私有化的 AI 对话功能。它主要由两部分组成：

一个部署在 Cloudflare Workers 上的通用 AI 代理。
一个用 Svelte 编写的、功能丰富的聊天前端组件。

这个组合的好处是显而易见的：

隐私和控制：API Key 和聊天记录完全由用户浏览器端掌控，不经过我的服务器。
高度灵活：它支持任何与 OpenAI API 格式兼容的 AI 服务，无论是 OpenAI 官方、Azure、Google Gemini，还是自建的本地模型，只要 API 接口兼容，就能无缝切换。
界面美观：前端组件完全自定义，可以深度融入博客的整体风格。

接下来，我将详细介绍如何将这个功能集成到你自己的网站中。

后端：一个解决 CORS 的通用 AI 代理

如果你尝试过直接在前端（浏览器）调用 AI 服务的 API，你大概率会遇到一个经典问题：CORS (跨域资源共享) 错误。出于安全考虑，浏览器会阻止你的网站向一个不同的域名（比如 api.openai.com）发送请求。

为了解决这个问题，我编写了一个非常简单的 Cloudflare Worker，它的作用就像一个中间人或代理，前端将请求发送给这个 Worker，Worker 再把请求转发给真正的 AI API。因为 Worker 运行在云端服务器上，所以它不受浏览器同源策略的限制。

这个 Worker 的设计非常纯粹和无状态（stateless），它本身不存储任何 API Key 或配置。所有的配置都由前端在每次请求时动态提供。

如何使用这个 Worker？

部署：将 ai-worker/index.ts 的代码部署到你自己的 Cloudflare Workers 服务上，你会得到一个唯一的 Worker URL，例如 https://my-ai-proxy.workers.dev。
配置请求头：当你的前端应用调用这个 Worker 时，必须在请求头（Headers）中包含两个关键信息：
- Authorization: 你的 AI 服务提供商的 API Key。格式为 Bearer <YOUR_API_KEY>。
- X-API-URL: 你想要调用的目标 AI API 的完整地址。例如 https://api.openai.com/v1/chat/completions。

这个 Worker 会原封不动地将你的请求体（包含模型名称、消息历史等）和 Authorization 头转发给 X-API-URL 指定的地址，并将收到的响应以流式（Streaming）的方式传回给前端。

前端：功能强大的 Svelte 聊天组件

前端部分是一个独立的 Svelte 组件 (src/components/Chat.svelte)，它负责渲染整个聊天界面和处理用户交互。

它包含了很多实用的功能：

配置面板：一个可展开的调试/配置面板，用于设置 Worker 地址和 AI 参数。
本地存储：所有配置都会自动保存在浏览器的 localStorage 中，用户只需配置一次。
Markdown & 代码高亮：AI 的回复会被解析为 Markdown，代码块也能正确高亮。
图片粘贴：支持直接从剪贴板粘贴图片并发送给支持多模态输入的模型。
流式响应：逐字显示 AI 的回复，带来流畅的打字机效果。

如何使用这个组件？

创建页面：首先，你需要一个页面来承载这个聊天组件。在 Astro 项目中，可以创建一个 src/pages/chat.astro 文件。

---
import Layout from '@/layouts/Layout.astro';
import Chat from '@/components/Chat.svelte';
---
<Layout seo={{ title: 'AI Chat' }}>
  <div class="chat-container-wrapper">
    <Chat client:load />
  </div>
</Layout>
<style is:global>
  /* 确保聊天界面占满整个屏幕 */
  html, body, #__astro, .main-content {
    height: 100%;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .chat-container-wrapper {
    height: 100%;
    overflow: hidden;
  }
</style>

安装依赖：这个组件依赖 marked 和 dompurify 来处理和净化 AI 的 Markdown 回复。
```
pnpm install marked dompurify
```
配置和使用：当用户第一次访问聊天页面时，界面会提示他们进行配置。
- 点击右上角的 “显示调试” 按钮，展开配置面板。
- Worker URL：填入上一步你部署好的 Cloudflare Worker 的地址。
- API Key：填入你的 AI 服务提供商的 API Key。这个 Key 只会存在你的浏览器本地，非常安全。
- API Endpoint：填入目标 API 地址。
- Model：指定要使用的模型名称，例如 gpt-4o 或 glm-4.5。
- System Prompt：可选，可以设置一个系统提示来定义 AI 的角色和行为。
完成配置后，就可以开始对话了。

总结

通过“Cloudflare Worker 代理 + Svelte 前端组件”这个组合，我成功地为网站添加了一个功能完善、高度可控且注重隐私的 AI 对话功能。它不仅解决了跨域调用的技术难题，还提供了远超第三方插件的灵活性和定制性。

文件内容

直接给你抄作业😡😋

src/pages/chat.astro
---
import Layout from '@/layouts/Layout.astro';
import Chat from '@/components/Chat.svelte';

const seo = {
  title: 'AI Chat',
  description: 'An interactive chat interface powered by AI.',
};
---

<Layout {seo}>
  <div class="page-wrapper">
    <header class="page-header">
      <a href="https://www.497995.xyz" class="home-link">
        &larr; 返回主页
      </a>
    </header>
    <div class="chat-container-wrapper">
      <Chat client:load />
    </div>
  </div>
</Layout>
<style is:global>
  /* Ensure body and container are full height */
  html, body, #__astro {
    height: 100%;
  }
  /* Override layout padding for this page */
  .main-content {
    padding: 0 !important;
    max-width: 100% !important;
    height: 100%;
  }
  .page-wrapper {
    position: relative; /* Needed for the ::before pseudo-element */
    z-index: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: transparent;
  }
  .page-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/197/197-bigskin-6.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
  }
  .page-wrapper.bg-loaded::before {
    opacity: 0.15;
  }
  .page-header {
    padding: 0.75rem 1.5rem;
    /* Make header transparent to see the background */
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    flex-shrink: 0;
    position: relative; /* Ensure header is above the ::before pseudo-element */
    z-index: 1;
  }
  .home-link {
    text-decoration: none;
    color: #374151;
    font-weight: 500;
  }
  .home-link:hover {
    color: #3b82f6;
  }
  .chat-container-wrapper {
    flex-grow: 1;
    overflow: hidden;
    position: relative; /* Ensure chat content is above the ::before pseudo-element */
    z-index: 1;
  }
</style>

<script>
  document.addEventListener('astro:page-load', () => {
    const bgUrl = 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/197/197-bigskin-6.jpg';
    const pageWrapper = document.querySelector('.page-wrapper') as HTMLElement;

    if (pageWrapper) {
      const img = new Image();
      img.onload = () => {
        pageWrapper.classList.add('bg-loaded');
      };
      img.src = bgUrl;
    }
  });
</script>
```


（bgUrl替换成自己的背景）
index.js
````astro
export default {
  async fetch(request) {
    // Handle CORS preflight requests sent by browsers.
    if (request.method === 'OPTIONS') {
      return handleOptions(request);
    }

    if (request.method !== 'POST') {
      return new Response(JSON.stringify({ error: 'Method Not Allowed' }), {
        status: 405,
        headers: corsHeaders(),
      });
    }

    // 1. Extract required headers from the client's request.
    const apiKey = request.headers.get('Authorization');
    const apiUrl = request.headers.get('X-API-URL');

    // 2. Validate that the required headers are present.
    if (!apiKey) {
      return new Response(JSON.stringify({ error: 'Request missing Authorization header' }), {
        status: 400,
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
      });
    }

    if (!apiUrl) {
      return new Response(JSON.stringify({ error: 'Request missing X-API-URL header' }), {
        status: 400,
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
      });
    }

    // 3. Forward the request to the target AI service.
    // The request body from the client is passed through directly.
    const proxyRequest = new Request(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': apiKey,
      },
      body: request.body,
      // @ts-ignore
      duplex: 'half', // Necessary for streaming request bodies.
    });

    try {
      const response = await fetch(proxyRequest);

      // 4. Stream the response back to the client.
      // This handles both successful streaming responses and error responses from the target API.
      const { readable, writable } = new TransformStream();
      response.body?.pipeTo(writable);

      const responseHeaders = corsHeaders({
        'Content-Type': response.headers.get('Content-Type') || 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
      });

      return new Response(readable, {
        status: response.status,
        statusText: response.statusText,
        headers: responseHeaders,
      });

    } catch (error) {
      console.error('Failed to connect to the target API:', error);
      return new Response(JSON.stringify({ error: 'Failed to connect to the target API.' }), {
        status: 502, // Bad Gateway
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
      });
    }
  },
};

// Utility to generate common CORS headers for responses.
const corsHeaders = (additionalHeaders = {}) => {
  return new Headers({
    'Access-Control-Allow-Origin': '*', // Allow any origin to call this proxy
    'Access-Control-Allow-Methods': 'POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-URL',
    ...additionalHeaders,
  });
};

// Handles CORS preflight (OPTIONS) requests.
function handleOptions(request) {
  const requestHeaders = request.headers;
  if (
    requestHeaders.get('Origin') !== null &&
    requestHeaders.get('Access-Control-Request-Method') !== null &&
    requestHeaders.get('Access-Control-Request-Headers') !== null
  ) {
    // Standard CORS preflight response.
    return new Response(null, {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-URL',
        'Access-Control-Max-Age': '86400', // Cache preflight response for 24 hours
      },
    });
  } else {
    // Standard OPTIONS response.
    return new Response(null, {
      headers: {
        Allow: 'POST, OPTIONS',
      },
    });
  }
}

个人博客的技术性 SEO 实践：标题、描述与 HTML 语义优化

Fri, 01 Aug 2025 00:00:00 GMT

背景

搜索引擎优化（SEO）对于个人博客来说，意味着让分享的技术和见解能被更多志同道合的人发现。在提交 5d819d4b980ade52073a0907a2dc993432b70881 中，博客进行了一系列技术性 SEO 调整，旨在让搜索引擎更好地理解和收录博客的内容。

优化实践

本次优化主要涵盖了三个方面：

1. 调整网站标题 (`<title>`)

网站的全局标题是搜索引擎识别博客主题的首要信息。

变更: 在 src/config.ts 文件中，将网站标题从 '或许是一只龙的博客' 修改为 'Hxsyzl blog'。

理由: 使用一个更简洁、统一的标识 (Hxsyzl) 作为网站标题，有助于让搜索引擎和访客快速识别这是谁的博客。对于一个技术博客来说，一个稳定且易于记忆的标识符比一个较长的中文昵称更利于传播和索引。

2. 丰富页面元描述 (`meta description`)

元描述会作为摘要显示在搜索结果中，它就像一本书的简介，直接影响读者是否愿意“翻开”看看。

变更: 在文章 src/content/posts/chat.md 的 frontmatter 中，description 字段被扩充，提供了更详细的信息。

理由: 一个内容详实、准确概括页面内容的描述，能够帮助潜在的读者在搜索结果中快速判断这篇文章是否是他们想要的，从而吸引到更精准的流量。

3. 强化 HTML 语义：使用 `<h1>` 标签

在 HTML 中，使用正确的语义化标签是与搜索引擎进行高效沟通的基础。<h1> 标签告诉搜索引擎：“这是这个页面的主标题，是最重要的内容”。

变更: 在文章页面模板 src/pages/posts/[...slug].astro 中，原先用于包裹文章标题的 <div> 标签被替换为了 <h1> 标签。

// 之前
<div class="...">{entry.data.title}</div>

// 之后
<h1 class="...">{entry.data.title}</h1>

理由: 将 <div> 更换为 <h1>，是向搜索引擎明确地标示出页面的核心主题。这能帮助搜索引擎准确地理解文章结构，是页面级 SEO 中一个基础但至关重要的步骤。

结论

技术性 SEO 并不复杂。通过对网站标题、元描述和 HTML 结构这些基础元素进行简单的调整，就能显著改善个人博客对搜索引擎的友好度，让精心撰写的内容更容易被需要它的人找到。

通过邮件混淆技术增强博客隐私

Fri, 01 Aug 2025 00:00:00 GMT

背景

在网页上直接暴露电子邮件地址，会使其极易受到垃圾邮件机器人的自动抓取。为了解决这一隐私和安全问题，可以采用邮件地址混淆技术。

在提交 0cc6194f35b3ff4ab53718fd98022b17ac522303 中，项目引入了 rehype-email-protection 插件来应对此问题。

技术方案：`rehype-email-protection`

rehype-email-protection 是一个 Rehype 插件，它能在网站内容处理流程中自动识别并混淆电子邮件地址。

配置实现

该功能通过在 astro.config.mjs 文件中进行配置来启用。

首先，导入插件模块：

import rehypeEmailProtection from "./src/plugins/rehype-email-protection.mjs";

然后，在 Astro 配置的 rehypePlugins 数组中添加该插件，并指定 base64 作为混淆方法。

markdown: {
  rehypePlugins: [
    // ... 其他插件
    [rehypeEmailProtection, { method: "base64" }],
    // ... 其他插件
  ],
},

工作机制

配置生效后，内容中所有标准的电子邮件地址（如 user@example.com）在网站构建过程中，都会被转换为 Base64 编码的字符串，并通过客户端 JavaScript 进行解码。

对于普通用户，浏览器会执行脚本将编码还原为可交互的 mailto: 链接，功能体验不变。而对于无法执行 JavaScript 的网络爬虫，它们只能获取到编码后的无意义字符串，从而达到了保护电子邮件地址不被轻易收集的目的。

结论

集成 rehype-email-protection 插件是一种简单而有效的隐私增强手段。它以极低的配置成本，显著降低了因在公开网页上暴露电子邮件地址而导致的安全风险，是静态网站开发中值得推荐的一个实践。

在 Astro 中实现全自动响应式图像：结合 Rehype 与 astro:assets

Fri, 01 Aug 2025 00:00:00 GMT

背景

在 70c1a207a437b3a7ca74faf16563f7a8abf2dcfe 这次提交中，博客的图像处理能力得到了质的飞跃。其核心目标是：在不改变 Markdown 写作习惯（即仍然使用 ![alt](src) 语法）的前提下，自动将标准图片转换为功能强大的响应式图像。

这解决了传统 <img> 标签的几个痛点：无法根据设备尺寸提供不同大小的图片、无法自动转换为 WebP 等现代格式、以及需要手动添加懒加载等。

实现方案

该方案巧妙地结合了 Astro 的构建时转换能力和组件化能力，主要分为两步：

1. 使用 Rehype 插件拦截图像

第一步是在内容处理流程中，找到所有的 <img> 标签并将其替换为一个自定义的 Astro 组件。这通过一个自定义的 Rehype 插件 rehype-figure.mjs 来实现。

它的工作流程如下：

遍历 AST：插件遍历由 Markdown 生成的 HTML 抽象语法树（AST）。
定位 <img>：找到所有标签名为 img 的节点。
创建新节点：提取出原 <img> 标签的 src 和 alt 属性。
替换节点：使用这些属性创建一个新的 <markdown-image> 组件节点，并用它替换掉原来的 <img> 节点。

// src/plugins/rehype-figure.mjs
import { visit } from 'unist-util-visit';
import { h } from 'hastscript';

export default function rehypeFigure() {
  return (tree) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName !== 'img') return;

      const src = node.properties?.src;
      const alt = node.properties?.alt;
      if (!src) return;

      // 创建 <markdown-image> 组件节点
      const markdownImageNode = h('markdown-image', { src, alt: alt || '' });

      // 替换
      if (parent && typeof index === 'number') {
        parent.children[index] = markdownImageNode;
      }
    });
  };
}

2. 创建强大的响应式图像组件

第二步是实现 <markdown-image> 标签对应的 Astro 组件——MarkdownImage.astro。这个组件是所有响应式魔法发生的地方，它利用了 Astro 内置的 astro:assets 功能。

---
// src/components/misc/MarkdownImage.astro
import { Image } from "astro:assets";

interface Props { src: string; alt: string; }
const { src, alt } = Astro.props;
const isRemote = src.startsWith("http");
---

<figure class="flex flex-col items-center">
  {
    isRemote ? (
      <img {src} {alt} class="rounded-lg" />
    ) : (
      <Image
        src={/* ...动态导入本地图片的逻辑... */}
        {alt}
        class="rounded-lg"
        widths={[400, 800, 1200]}
        sizes="(max-width: 800px) 100vw, 800px"
        format="webp"
      />
    )
  }
  {alt && <figcaption class="mt-2 text-center text-sm">{alt}</figcaption>}
</figure>

这个组件的核心逻辑是：

区分来源：判断图片是远程链接还是本地文件。
处理本地图片：对于本地图片，使用 Astro 的 <Image> 组件。
- widths 和 sizes 属性让 Astro 自动生成不同尺寸的图片，并告诉浏览器如何根据屏幕大小选择最合适的版本。
- format="webp" 会自动将图片转换为高效的 WebP 格式。
- Astro 的 <Image> 组件还内置了懒加载 (loading="lazy") 和其他性能优化。
处理远程图片：对于远程图片，则回退到使用标准的 <img> 标签，不进行优化处理。
语义化包裹：最后，使用 <figure> 和 <figcaption> 为图片提供正确的 HTML 语义。

结论

通过“Rehype 插件拦截替换” + “Astro Assets 组件实现优化”的组合拳，博客实现了一套全自动、高性能且对内容创作者完全透明的响应式图像解决方案。这不仅极大地提升了网站的加载速度和用户体验，也展示了 Astro 在内容处理和性能优化方面的强大灵活性。

Twikoo 评论系统升级：性能优化与样式深度定制

Fri, 01 Aug 2025 00:00:00 GMT

背景

在 6fab5477f745f4858c14a5da83ca1b451fbd50ea 这次提交中，博客的 Twikoo 评论系统得到了一次全面的功能与视觉升级。本次更新主要聚焦于两个核心目标：提升页面加载性能，以及让评论区的外观与网站的整体设计风格无缝对接。

性能优化：事件驱动的延迟加载

旧的实现方式会在每个包含评论区的页面加载时，立即下载并执行 Twikoo 的主脚本。这虽然能保证评论区立即可用，但对于那些只阅读文章而不参与评论的用户来说，却造成了不必要的带宽和性能开销。

为了解决这个问题，新的实现采用了事件驱动的延迟加载机制。

1. 更新 `Twikoo.astro` 组件

评论组件本身被修改为监听一个自定义事件 loadComment。只有当这个事件被触发时，组件才会动态创建 <script> 标签来加载 Twikoo 的资源。

// src/components/Twikoo.astro

// ...
<script define:vars={{ config }}>
  function loadTwikoo() {
    const script = document.createElement("script");
    script.src = "https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js";
    script.defer = true;
    script.onload = () => {
      twikoo.init(config);
    };
    document.body.appendChild(script);
  }
  // 关键：监听自定义事件，且只执行一次
  document.addEventListener("loadComment", loadTwikoo, { once: true });
</script>

2. 在布局中触发事件

事件的触发逻辑被放置在全局布局文件 src/layouts/Layout.astro 中。通过一个 initCommentComponent 函数来创建并分发 loadComment 事件。

// src/layouts/Layout.astro

function initCommentComponent() {
  const event = new Event("loadComment");
  document.dispatchEvent(event);
}

function init() {
  // ... 其他初始化函数
  initCommentComponent();
}

// 确保在使用 Swup 进行页面切换后，评论区也能被正确加载
window.swup.hooks.on("content:replace", () => {
  initCustomScrollbar();
  initCommentComponent();
});

通过这种方式，评论区的加载被推迟到必要时刻，有效地优化了页面的初始加载性能。

样式深度定制

除了性能优化，本次更新还通过一个全新的样式文件 src/styles/twikoo.css 对评论区的外观进行了深度定制。

该文件包含了一系列针对 Twikoo 组件元素的 CSS 规则，旨在：

统一颜色方案：确保评论区的文本、背景、按钮等颜色与博客的浅色及深色模式主题保持一致。
统一设计语言：调整了输入框、按钮的圆角、边框和间距，使其符合网站的整体视觉风格。
提升细节体验：对头像、链接、代码块等元素的样式进行了微调，提供了更和谐的视觉感受。

例如，下面的 CSS 规则统一了评论卡片的样式：

/* src/styles/twikoo.css */

.tk-comment {
  @apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;        
  .tk-action-icon svg {
    @apply fill-[var(--primary)];
  }
}

结论

这次对 Twikoo 评论系统的升级，是一次典型的在第三方集成中寻求性能与视觉平衡的实践。通过延迟加载优化了用户访问速度，通过自定义样式提升了品牌一致性和视觉体验，最终为读者提供了一个更快、更美观的交流环境。

我的世界【RLCraft】整合包开服联机教程

Wed, 23 Jul 2025 00:00:00 GMT

📦 什么是整合包？

Minecraft 的整合包是一种包含了多个模组（mod）和配置文件（config）的游戏版本，可以让玩家体验不同的游戏风格和内容。整合包通常由社区的玩家或团队制作和发布，有些也是官方或合作方推出的。整合包的种类很多，有科技类、魔法类、冒险类、生存类等等，每种整合包都有自己的特色和玩法。

🎮《RLCraft》整合包简介

RLCraft 整合包，全称为 Real Life or Realism Craft ，是一款基于《Minecraft》打造的高沉浸感生存冒险模组包。它以“现实生活/现实主义”为核心设计理念，通过对数十款模组的精心筛选与深度调整，搭配自定义合成表、机制重构等设计，将“硬核生存+开放冒险+RPG成长”的体验熔于一炉，重新定义MC的游玩逻辑。

在 RLCraft 的世界里，你能体验到：

真实感拉满的生存挑战：饥饿、口渴、体温等维度的生存压力，让资源规划与环境互动成为生存必修课；
高自由度的开放冒险：遗迹暗藏机关、地牢盘踞Boss、世界随机生成奇遇，探索过程充满未知与惊喜；
RPG式的成长脉络：通过战斗、采集、制作获取经验，解锁技能树，让角色养成与世界探索深度绑定；
多元玩法的自由选择：既可以扎进深渊遗迹挑战怪物、挖掘秘宝，也能回归“慢节奏”——规划基地布局、研究复杂合成链，甚至搭建幻想风格的建筑。

从“挣扎求生”到“掌控世界”，RLCraft 用模组的巧妙融合，让“在MC里体验现实生活的多样可能”成为触手可及的游戏体验。

官方下载地址：CurseForge - RLCraft

📥 下载整合包

首先需要下载好《RLCraft》的服务端和客户端。您可以从官方 CurseForge 下载，也可以使用我下方提供的已集成汉化补丁的版本。

我提供的服务端内置了 Windows 版的 JDK8，在 Windows 服务器上双击 run.bat 即可直接运行。
客户端则包含了 JDK8 和 PCL2 启动器，下载后解压即可开始游戏。

RLCraft 汉化版客户端和服务端下载链接：

百度网盘: https://pan.baidu.com/s/1noDIKen6_ML6AkhnW9kLRA?pwd=yiu9 (提取码: yiu9)
123云盘 (免登陆高速下载): https://www.123684.com/s/2Y9Djv-fIVvH

📝 注意：服务端压缩包文件名为 RLCraft_Server_2.9.3.zip，客户端压缩包文件名为 RLCraft_2.9.3_Client.zip。（文件取自网络）

🚀 云应用一键部署

✨ 福利：雨云云应用目前新用户可免费试用15天（免费的总资源限制为8核8G），也就是可以免费开服15天！

☁️ 云应用简介

云应用（RCA，Rain Cloud Apps） 是雨云基于 Kubernetes 开发的容器应用平台，为用户开发、部署和使用容器应用提供了全新的平台，产品经过精心设计，具有高可用、高灵活性、易用的特点。云应用内置提供App、网站、数据库三大板块，并且提供内置的应用商店，首批上架数百款App，并且适配1Panel等第三方商店，让您可以在不买服务器的情况下快速部署包括Alist、Cloudreve等数百种热门应用，对应用的更新、文件管理、设置等方便快捷，一键生效。

简单来说，它就是一个按小时计费、可弹性增减配置、随时删除项目的 Docker 容器出租/托管平台。

☸️ Kubernetes 简介

Kubernetes（简称 K8s） 是由谷歌开源、云原生计算基金会（CNCF）托管的容器编排平台，旨在解决容器化应用的部署、管理和扩展难题。作为云原生技术栈的核心，它通过自动化机制实现应用的高效运行，支持从单节点到跨多云环境的大规模集群管理。

其核心能力包括：

自动化部署与滚动更新
弹性伸缩
服务发现与负载均衡
故障自愈机制

凭借模块化架构和开放生态，Kubernetes 成为微服务、CI/CD、边缘计算等场景的首选方案，助力企业实现应用的快速迭代与高可用性。

🌧️ 雨云简介

雨云成立于2018年，是具有自主知识产权的国产云计算服务提供商。雨云为广大用户提供简单易用、便宜实惠、可信赖的云产品。主营包括云服务器、裸金属服务器、虚拟主机、游戏云、对象存储、云应用、CDN内容分发等广受好评的云服务产品。

持有国家工信部颁发的《增值电信业务经营许可证》ISP证、IDC证、CDN证。
支持7天内无理由退款（每个账号限3次）。
云服务器/游戏云产品可1元试用一天。

优惠地址：https://www.rainyun.com/NTY0MDUy_?s=blog

优惠码：NTY0MDUy

使用优惠码注册后绑定微信可获得5折优惠券！

🛠️ 创建项目 & 一键开服

注册雨云账号后，在控制台点击 云产品 -> 云应用。
点击 我的项目 -> 创建。
项目名称自己定一个，磁盘大小 3GB 基本够用（不够可随时扩容），然后点击 创建项目。
访问此链接直接跳转到 RLCraft 服务端应用的安装页面：点击这里，或在应用商店中搜索并点击 立即安装。
资源配置建议选 2核4G，如果10人以上同时在线玩建议选 4核8G。一般选 使用共享IP 即可。服务端默认端口是 25565，但共享IP的这个端口可能已被占用，可以随便输入一个端口（或使用随机生成的）。如果你购买了独立IP，则可以直接使用 25565。最后点击 安装应用。
在项目管理页面的 应用管理 中可以看到刚安装的应用。点击卡片进入管理页面。如果显示 运行中，表示服务端安装已完成。
点击日志，选择 安装时容器，可以查看安装过程的日志。
切换到 运行时容器 可以看到服务端运行日志。如果日志基本不再滚动，表示服务端已启动完成，可以进入游戏了。
在 应用管理 页面点击端口号即可复制服务器的 IP和端口。

🎉 进入游戏

打开整合包客户端（可从上方的下载链接获取）。
点击 多人游戏 -> 添加服务器。
输入你服务器的 IP地址和端口，例如 110.42.45.225:5956。
点击完成，然后 加入服务器 即可开始你的 RLCraft 之旅！

💡 提示：如果你使用的是默认端口 25565，则可以省略端口号，直接输入 IP 地址即可连接。

Xiaomi HyperOS2.0.3.0.UGGCNXM 安卓14 R1 For Redmi Note 8 Pro发布

Sat, 15 Feb 2025 00:00:00 GMT

[稳定版]Xiaomi HyperOS2.0.3.0.UGGCNXM 安卓14 R1 For Redmi Note 8 Pro发布

基于Redmi K60E移植

发布时间：20250208

更新内容

[内核]切换到kernelSU Next分支

[系统]优化系统稳定性

特别说明

○本ROM需要扩容system分区，请按照要求的教程进行刷入，教程在酷安（wuxin）帖子里面

○在上一个版本的(OS1.0.23)，可以直接更新

○不会刷的，第一次刷的，可以参考第一条的后半段教程

○本ROM刷机包大于4GB，请以各种方法把ROM传到手机（adb push或者搞机助手都可以）

○本ROM自带ksu next，需要使用root和模块的请自己安装即可使用(与ROM同个目录)

○需要转换格式才可以正常开机（升级不需要）

如何转换格式？

1.刷完刷机包之后，正常流程格式化data分区，这时不要重启系统，直接返回，选择高级清除勾选

data，点下方的更改/修改文件系统，选择右下角的更改文件系统，选择F2FS即可重启系统

注: 如果不小心格式化了，就得再转一次

○如果遇到相册日历应用出问题，请覆盖安装该应用即可

○如需使用SUS-FS，请安装模块即可使用(与ROM同目录)

注意：当前susfs存在不稳定性，如遇到模块使用异常，请及时关闭susfs

○如果NFC不能用，重启系统即可

○Bug与1.0一致

几分钟，让Deepseek接入QQ！

Tue, 04 Feb 2025 00:00:00 GMT

介绍

ChatLuna 是一款强大的语言模型聊天服务插件，基于 LangChain 开发，目前作为 Koishi 上的插件存在。ChatLuna 支持与多种主流大语言模型进行交互，如 OpenAI、Google Gemini 和 Claude 等。

ChatLuna 不仅为用户提供了模型聊天功能，还为其他 Koishi 插件开发者提供了便捷的 LangChain Model 接口，方便他们与大语言模型进行交互和扩展开发

安装插件

在使用 ChatLuna 之前，你需要安装 Koishi。

按照 Koishi 官方文档来安装 Koishi。

社区成员为 Windows 和 Linux 提供了一键安装脚本，该脚本可以一键自动安装 Koishi 以及 ChatLuna。项目地址：https://github.com/hxsyzl/chatluna-install-auto

数据库服务

ChatLuna 需要 database 服务，用于存储会话信息等持久化数据。

我们推荐使用 database-sqlite，它自带在大部分 Koishi 环境里，已被默认安装并启用。

你也可以安装并配置其他在 Koishi 插件市场上的数据库插件，如 MySQL、MongoDB 等。

可选服务

这些服务是为了 ChatLuna 的某些功能而额外需要的服务。你可以根据需要选择安装。

censor 服务：用于回复内容过滤。注意，有的插件不审核文本信息，请注意识别。
vits 服务：用于渲染模型回复，生成语音。

DeepSeek

DeepSeek 是一家专注于通用人工智能底层模型与技术研究的公司，成立于2023年，由知名私募巨头幻方量化创立。公司致力于探索人工智能的本质，发布了多个开源大模型，包括 DeepSeek-LLM 通用大语言模型和 DeepSeek-Coder 代码大模型等。

我们可以安装 openai-deepseek-adapter 适配器来使用该公司提供的模型。

安装

前往插件市场，搜索 chatluna-deepseek-adapter，安装即可。

如果无法正常搜索到 chatluna-deepseek-adapter，则说明官方插件源没有正常更新。前往 market 插件设置为其他源即可：

以下是推荐的一些插件源：

配置

在配置之前，请先前往 DeepSeek 获取 API key。

获取到 API key 后，转到 deepseek-adapter 的配置页面。。当然，你也可以更改你喜欢的其他平台名。

完成后在请求设置里填入你的 API key 和请求地址。请求地址应为 https://api.deepseek.com/v1。

记得点击右上角的保存按钮。

使用

在适配器的配置页面，点击运行按钮，如无误，你应该看不到任何错误 log，那即可转到 ChatLuna 的主插件页面。

在主插件页面，下划到模版房间选项，查看 defaultModel 的选项里是否含有 DeepSeek 模型，如果有，则说明你已经成功地接入了 DeepSeek 平台

安装NapCat

NapCat有着众多启动方式，每种方式各有优点：

Shell 版本：具有低内存、服务器部署简单的特点。
Framework 版本：具有方便人机交互、便于窥屏的特点

(在这里Framework不做介绍，感兴趣的可以自行搜搜)

Shell 启动/安装方式

NapCat.Shell - Win手动启动教程

前往 NapCatQQ 的 release 页面下载NapCat.Shell.zip解压
确保QQ版本安装且最新
双击目录下launcher.bat即可启动如果是win10 则使用launcher-win10.bat

<mark>如果需要快速登录将 QQ 号传入参数即可</mark>

launcher.bat 123456

launcher-win10.bat 123456

NapCat.Win.一键版本

特殊说明: 一键版仅适用 Windows.AMD64 无需安装QQ和NapCat 已内置

前往 NapCatQQ 的 release 页面下载无头绿色版本解压
启动对应BAT即可

<mark>如果需要快速启动新建Bat文件写入如下例子</mark>

NapCatWinBootMain.exe 10001

NapCat.Installer - Linux一键使用脚本(支持Ubuntu 20+/Debian 10+/Centos9)

curl -o napcat.sh https://nclatest.znin.net/NapNeko/NapCat-Installer/main/script/install.sh && sudo bash napcat.sh

curl -o napcat.sh https://nclatest.znin.net/NapNeko/NapCat-Installer/main/script/install.sh && sudo bash napcat.sh --tui

curl -o napcat.sh https://nclatest.znin.net/NapNeko/NapCat-Installer/main/script/install.sh && sudo bash napcat.sh --docker y --qq "123456789" --mode ws --proxy 1 --confirm

curl -o napcat.sh https://nclatest.znin.net/NapNeko/NapCat-Installer/main/script/install.sh && sudo bash napcat.sh --docker n --cli n --proxy 0 --force

0. --tui: 使用tui可视化交互安装

1. --docker [y/n]: --docker y 为使用docker安装反之为shell安装

2. --qq "123456789": 传入docker安装时的QQ号

3. --mode [ws|reverse_ws|reverse_http]: 传入docker安装时的运行模式

4. --confirm: 传入docker安装时的是否确认执行安装

5. --proxy [0|1|2|3|4|5|6]: 传入代理, 0为不使用代理, 1为使用内置的第一个,不支持自定义, docker安装可选0-7, shell安装可选0-5

6. --cli [y/n]: shell安装时是否安装cli

7. --force: 传入则执行shell强制重装

</details>

仓库地址: NapCat.installer

NapCat.Docker - Linux容器化部署

仓库地址: NapCat.Docker

安装OneBot插件

前往Koishi的插件市场搜搜adapter-onebot下载安装即可

在QQ号那一栏填写QQ号，最后开启即可

通过 WebUI 配置OneBot服务（NapCat)

如果你已经启动了 NapCat，并且有多于 1 个开放端口，则可以通过 WebUI 进行配置。

默认地址为 0.0.0.0，即监听所有地址。当配置了不可用的地址时 WebUI 将被禁用。

默认端口为 6099。

当端口被设置为 0 时将禁用 WebUI。

当端口被占用时，会自动对端口 +1，直到找到可用端口（最多尝试100次，失败则会禁用 WebUI），端口号会在启动日志中显示。

启动后可在启动日志中看到形如 [WebUi] WebUi Local Panel Url: http://127.0.0.1:6099/webui?token=xxxx 的token信息。

也可打开 webui.json 文件，在其中找到token

{

    "host": "0.0.0.0", // WebUI 监听地址

    "port": 6099, // WebUI 端口

    "token": "xxxx", //登录密钥，默认是自动生成的随机登录密码

    "loginRate": 3, //每分钟登录次数限制

}

访问 http://ip:port/webui/，然后进行以下操作：

进入 QQ 登录，点击 QRCode 进行二维码登录。
登录成功后，即可进入网络配置。
配置完成后，点击保存，重启即可生效。

最后你的Koishi右下角会变成这样

去QQ找你的机器人对话就好了

有疑问可以进入282381753

插头露娜（chatluna）的官方交流群

不畏黑砖-MTK解救黑砖完整教程

Wed, 22 Jan 2025 00:00:00 GMT

前言

该教程仅支持发布于2021年5月以及之前的SOC（也就是天坤920之前的CPU）
以红米note8Pro为例，其他mtk机型可以参考参考
系统建议使用win10可避免一些问题
如果您的系统已经扩容了或修改了分区表。请在最后一步刷机的时候把仅下载切换至固件升级即可正常刷机（红米Notre8Pro测试通过，不会掉IMEI和基带）

准备工作

一部已经黑砖不开机的手机
一根数据线和一台正常的电脑（网吧不建议)
一双手和一个正常的脑子
一个良好的网络环境

需要的文件

MTK驱动压缩包
VCOM驱动压缩包
libusb-win32安装程序
AuthBypassTool v11（MTK Client Tool也可以，仅支持win10）
flashtool,压缩包
MIUI完整线刷包（下载地址：XiaomiROM.com）

说明：以上资源均可在下载站找到并下载，路径：首页→通用手机刷机资源→电脑工具→联发科救黑砖全套

教程开始

安装MTK驱动。把下载好的mtk驱动解压开来。会得到两个文件夹（如图）。选择第一个文件夹进去。之后选择win10
双击打开MediaTek Devices Installer.bat（如图）

来到这个界面。直接一路回车，直到窗口关闭就行（如图）

安装vcom驱动

1. 下载好vcom驱动压缩包解压开来。之后右击cdc-acm.inf这个文件。选择安装。等待弹出安装完成（如图）

说明：如果是win11，点击安装后会没有反应，请无视即可

安装libusb-win32

1. 双击打开libusb-win32安装程序，一直下一步就可以了

2. 出现下图这个界面，就可以直接关掉了，不用管他

进行联发科跳免授权

1. 打开AuthBypassTool v11这个软件（如图）

2. 点击左下角的disable auth。这时候会有一个进度条在走。也就是倒计时。走完了就得重新点一下。之后手机按住音量+和电源键连接上电脑。如果出现下图所示，则表示成功并松开。不能拔掉数据线（如图）

如果出现了下图显示（也就是报错）。可重新来一次。一般来讲就可以成功了

成功之后关闭该工具。进行下一步刷机

最后的刷机

1. 先把线刷包解压成一个文件夹（如果解好了，可以跳过）。把刚下载好的flashtool压缩包解压开来。得到很多文件。我们主要打开flash_tool.exe这个程序

2. 打开之后，有一个报错窗口（如下图）。不要管他，直接点确定

3. 来到主界面（如下图）。第一个下载DA。点击后面的浏览

4. 选择倒数第二个（如下图）

5. 选择完之后。来到第二个。选择线刷包位置。之后点第一个文件夹进去（如图）

6. 选择倒数第二个的txt配置文件（如图）

7. 之后点确定会开始加载镜像文件。等待加载完成（如图）

检查端口

先别着急点下载。先检查一下连接里面的端口是否和驱动用的端口一致。点左上角选项进去。切换到连接选项卡。看看后面的串口，看一下是不是和设备管理器里面的MTK端口一致。如果一致。就可以关掉窗口，点下载刷机了
举个例子。如果设备管理器显示的端口是com4。那么连接这边后面的串口也得是com4。如果不一样。是可以改过来的。最后一样，就可以刷机了（如图）

说明：如果UART没有正确显示MTK端口，但设备管理器已经显示了，请切换到USB通道再进行尝试刷机

开始刷机

如果端口确定好没错的话。就可以开始刷机了。点主界面的下载。会开始跑进度条。等待下载完成（如图）

再次说明：如果您的系统已经扩容了或修改了分区表。请在这一步的时候把仅下载切换至固件升级即可正常刷机（红米Notre8Pro测试通过，不会掉IMEI和基带）

2. 刷机完成之后，会出现一个绿色的大√。则表示刷机成功。手机长按电源键十秒。一般来说，这时候手机已经救活了。如果跳到官方rec。请清除所有数据之后即可开机（如下图

3. 致此手机已经完全救活过来了

说明：如果刷机过程中出现某个分区刷入报错，请在该分区名的前面取消勾选它，随后再次尝试刷机

结束

希望写了这么久的图文教程。能够帮助到大家。也希望小白们也不要去花钱刷机了。看到这篇教程自己学会了。也可以帮助到别人的。避免花冤枉钱。有什么问题请点击底部的发信息即可问我。如果你觉得还不错的话。可以赞赏我。自愿赞赏。不强迫。最后，祝大家刷机愉快

小白教程-联发科强制解bl锁完整教程

Wed, 22 Jan 2025 00:00:00 GMT

前言

该教程仅支持发布于2021年5月以及之前的SOC（也就是天坤920之前的CPU）

以红米note8Pro为例，其他mtk机型可以参考参考

系统建议使用win10可避免一些问题

准备工作

一部未解除BL锁的手机
一根数据线和一台正常的电脑（网吧不建议)
一双手和一个正常的脑子
一个良好的网络环境

需要的文件

mtkclientgui压缩包
USB DK（一般用X64版本）

说明：以上资源均可在下载站找到并下载，路径：首页→通用手机刷机资源→电脑工具→联发科强解bl锁工具

教程开始

首先下载这个工具和USBDK，下载完之后，把这个zip包解压下来，放桌面方便一些
首先安装USBDK，双击msi程序会自动进行安装
之后打开文件夹，找到最后一个Start.bat双击打开（如图）

5. 输入y确定下一步

6. 此时手机关机状态下按住音量+和电源键连接电脑，听到连接声音响了就立马松开，如果跟我一样，弹出以下界面，那么恭喜你。bl锁解开成功（如图）

7. 最后长按电源键10妙重启手机查看结果，红米note8pro已测试通过，其他联发科机型可以试试（如图）

说明：如果连接没反应，请手动安装MTK驱动

结束

（国内首发）MTK IMEI 修复教程 For Redmi Note 8 Pro

Tue, 21 Jan 2025 00:00:00 GMT

前言

经过漫长的时间等待，IMEI修复教程总算是来了（麻麻再也不用担心丢了IMEI而烦恼），不需要复杂的手段，就可以将你的手机修好IMEI，最后还是感谢这位老外Tim Josten。不墨迹，直接接下来的内容

一. 准备工作

1.一部丢了IMEI的n8p（解锁状态）
2.电脑和数据线（尽量windows 10及以上）
3.本文所提到的文件都需要
4.第三方内核/ROM（kernel或ROM）

二. 开始制作专属修复imei卡刷包

1.下载好这个压缩包。下载链接；查看链接
2.解压后有以下文件（图1）

3.打开config.txt（如图2-3）

4.解释一下各参数的用途吧
①cpidid=设备芯片的ID，每个手机的芯片ID都不一样，所以要如实填写（不要老想着用别人的，出问题了就不能怪自己）
问；如何获取芯片ID？
第一步，下载并打开termux（酷安或者百度都可以）
第二步；输入getprop ro.boot.chipid回车
第三步；出现图片中的结果就表示获取成功

本次教程就到这里，该说的我已经说了，要是还不会的话，那我没办法（解锁和刷入第三方twrp应该都会了吧）强制解锁教程可以参考我；查看链接 TWRP资源可以去我站点下载如果有其他问题，请在评论区底下进行交流，不懂的我看到了一般会回复，教程结束

②第二和第三就不用说了，自己填（可以是自己的原机imei，也可以像我一样随便填MIUI系统
第一步，打开设置→我的设备→全部参数
第二步，找到状态信息→就可以查看这两个MAC地址的详细信息，也是把它复制出来，填到这个配置文件就可以
操作流程如下（图）

问；为什么会显示无法获取？
就是因为没有打开WIFI和蓝牙功能，打开之后就可以正常获取了
原生系统
操作流程跟MIUI差不多，我这里就不发图片了
5.配置文件全部填完之后保存
6.直接双击打开mtk_imei.cmd，显示图片中的结果就是制作完成（图）

7.完成之后关闭窗口，你会得到一个修补好的卡刷包，使用twrp刷入即可

8.最后就会看到你修复好的IMEI

三. 其他重要说明

1.本修复教程适用所有基于ROSS的ROM（包括MIUI12.5所有版本，基于这个底层的第三方ROM和类原生）
2.不适用基于QOSS及以下的ROM（包括miui10.miui11.miui12和基于这个底层的第三方ROM以及类原生）
3.不适用基于cfw底包的原生系统使用
4.如果你的WINDOWS缺少Visual C++ Redistributable for Visual Studio 2015(x64)，请点击下方链接下载并安装（如果有了请忽略）
下载链接；X64；查看链接
X86；查看链接
5.切换ROM时，请确保在刷入ROM后立即刷入“imei_repair.zip”文件，然后再进行第一次开机。这是必要的，因为删除系统分区将需要你再次刷入修复包
6.官方内核可能会不工作，请使用第三方内核（我的内核已经集成了，到时候再编译一遍不带root的供你们使用）
7.本教程仅适用Redmi Note 8 Pro，其他机型能不能用我不清楚（自己试试就可以了）

要求就是内核版本必须是4.14的，而且集成了这个模块
链接；查看链接

四.目前状态
小米账号与小米云服务已正常使用（包括查找手机），其他的就留给你们测试了

五.修复成功截图

本次教程就到这里，该说的我已经说了，要是还不会的话，那我没办法（解锁和刷入第三方twrp应该都会了吧）
强制解锁教程可以参考我；查看链接
TWRP资源可以去我站点下载
如果有其他问题，请在评论区底下进行交流，不懂的我看到了一般会回复，教程结束

Hxsyzl blog

加群向导&其他问题

加入群聊

常见问题

EdgeOne CDN 相关

内网穿透相关

博客侧边栏美化：集成一个智能天气卡片

附录：最终配置文件

解放生产力：通过 GitHub Action 与 Cloudflare Worker 实现博客文章自动提交至必应

附录：最终配置文件

给博客添加一个私有化的 AI 对话功能

后端：一个解决 CORS 的通用 AI 代理

如何使用这个 Worker？

前端：功能强大的 Svelte 聊天组件

如何使用这个组件？

总结

文件内容

个人博客的技术性 SEO 实践：标题、描述与 HTML 语义优化

背景

优化实践

1. 调整网站标题 (<title>)

2. 丰富页面元描述 (meta description)

3. 强化 HTML 语义：使用 <h1> 标签

结论

通过邮件混淆技术增强博客隐私

背景

技术方案：rehype-email-protection

配置实现

工作机制

结论

在 Astro 中实现全自动响应式图像：结合 Rehype 与 astro:assets

背景

实现方案

1. 使用 Rehype 插件拦截图像

2. 创建强大的响应式图像组件

结论

Twikoo 评论系统升级：性能优化与样式深度定制

背景

性能优化：事件驱动的延迟加载

1. 更新 Twikoo.astro 组件

2. 在布局中触发事件

样式深度定制

结论

我的世界【RLCraft】整合包开服联机教程

📦 什么是整合包？

🎮《RLCraft》整合包简介

📥 下载整合包

🚀 云应用一键部署

☁️ 云应用简介

☸️ Kubernetes 简介

🌧️ 雨云简介

🛠️ 创建项目 & 一键开服

🎉 进入游戏

Xiaomi HyperOS2.0.3.0.UGGCNXM 安卓14 R1 For Redmi Note 8 Pro发布

几分钟，让Deepseek接入QQ！

介绍​

安装插件

数据库服务

可选服务

DeepSeek​

安装

配置

使用

安装NapCat

Shell 启动/安装方式

NapCat.Shell - Win手动启动教程

NapCat.Win.一键版本

NapCat.Installer - Linux一键使用脚本(支持Ubuntu 20+/Debian 10+/Centos9)

NapCat.Docker - Linux容器化部署

安装OneBot插件

通过 WebUI 配置OneBot服务（NapCat)

不畏黑砖-MTK解救黑砖完整教程

小白教程-联发科强制解bl锁完整教程

（国内首发）MTK IMEI 修复教程 For Redmi Note 8 Pro

1. 调整网站标题 (`<title>`)

2. 丰富页面元描述 (`meta description`)

3. 强化 HTML 语义：使用 `<h1>` 标签

技术方案：`rehype-email-protection`

1. 更新 `Twikoo.astro` 组件

介绍

DeepSeek