ZSXの小站

为博客添加外链安全跳转中转页

ZSXの小站 — Sun, 14 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/go-safe/

import Info from "@/components/mdx/Info.astro";

下列文章来自AI

外链安全跳转中转页的实现

　　在浏览博客时，经常会点击到外部链接。为了提高用户体验和安全性，我决定为博客添加一个外链安全跳转中转页。这个功能参考了hexo-safego项目，但进行了适当的适配以符合我的博客风格。

功能设计

外链安全跳转功能的主要需求：

中转提示：当用户点击外部链接时，显示一个友好的中转页面，告知用户即将离开当前网站
目标URL展示：清晰显示用户即将访问的URL，方便用户确认
操作选择：提供"继续访问"和"返回上页"两个选项
自动跳转：添加5秒倒计时自动跳转功能
白名单机制：对常用服务（如GitHub等）不触发中转，直接跳转

实现步骤

1. 创建中转页面

首先创建/src/pages/go.astro文件作为中转页面：

---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { Icon } from "astro-icon/components";

// 安全地获取目标链接
let targetUrl = '/';
try {
  const url = Astro.url;
  if (url && url.searchParams) {
    targetUrl = url.searchParams.get('url') || '/';
  }
} catch (e) {
  console.error('获取URL参数失败:', e);
}

// 定义可信任的域名白名单
const trustedDomains = [
  'boke.zsx815.top',
  'mcyzsx.top',
  'github.com',
  'gitee.com',
  'cdn.jsdelivr.net',
  'unpkg.com'
];

// 检查URL是否在白名单中
function isTrustedDomain(url: string): boolean {
  try {
    const urlObj = new URL(url);
    return trustedDomains.some(domain => urlObj.hostname.includes(domain));
  } catch (e) {
    return false;
  }
}

// 直接跳转到白名单域名
if (targetUrl !== '/' && isTrustedDomain(targetUrl)) {
  try {
    return Astro.redirect(targetUrl);
  } catch (e) {
    console.error('重定向失败:', e);
  }
}
---

<BaseLayout title="外链跳转提示">
  <div class="container mx-auto px-4 py-16 max-w-2xl">
    <div class="bg-base-100 rounded-xl shadow-lg p-8 text-center">
      <div class="mb-6">
        <Icon name="lucide:external-link" class="w-16 h-16 mx-auto text-warning" />
      </div>
      
      <h1 class="text-3xl font-bold mb-4">即将离开本站</h1>
      
      <p class="text-lg mb-6 text-base-content/80">
        您即将访问外部网站，本站不对该网站内容负责。
      </p>
      
      <div class="bg-base-200 rounded-lg p-4 mb-8 text-left break-all">
        <p class="text-sm text-base-content/60 mb-2">目标网址:</p>
        <p class="text-base-content font-medium">{targetUrl}</p>
      </div>
      
      <!-- 倒计时提示 -->
      <div class="flex justify-center mb-4">
        <p id="countdownText" class="text-sm text-base-content/60"></p>
      </div>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button id="continueButton" class="btn btn-primary">
          <Icon name="lucide:external-link" class="w-4 h-4 mr-2" />
          继续访问
        </button>
        
        <button onclick="history.back()" class="btn btn-outline">
          <Icon name="lucide:arrow-left" class="w-4 h-4 mr-2" />
          返回上页
        </button>
      </div>
      
      <div class="mt-8 pt-6 border-t border-base-300">
        <p class="text-sm text-base-content/60">
          <Icon name="lucide:info" class="w-4 h-4 inline mr-1" />
          为了您的上网安全，请注意辨别网站真伪，保护个人信息。
        </p>
      </div>
    </div>
  </div>

  <script is:inline>
    // 添加5秒后自动跳转选项
    let countdown = 5;
    let countdownInterval;
    
    document.addEventListener('DOMContentLoaded', () => {
      // 安全地获取URL参数
      let targetUrl = '/';
      try {
        const urlParams = new URLSearchParams(window.location.search);
        targetUrl = urlParams.get('url') || '/';
      } catch (e) {
        console.error('获取URL参数失败:', e);
      }
      
      // 直接获取倒计时元素
      const countdownElement = document.getElementById('countdownText');
      if (!countdownElement) {
        console.error('找不到倒计时元素');
        return;
      }
      
      // 跳转到目标URL的函数
      function redirectToTarget() {
        clearInterval(countdownInterval);
        // 使用window.location.href代替window.open，确保跳转成功
        window.location.href = targetUrl;
      }
      
      function updateCountdown() {
        if (countdown > 0) {
          countdownElement.textContent = `${countdown} 秒后自动跳转...`;
          countdown--;
        } else {
          redirectToTarget();
        }
      }
      
      // 为继续访问按钮添加点击事件
      const continueButton = document.getElementById('continueButton');
      if (continueButton) {
        continueButton.addEventListener('click', redirectToTarget);
      }
      
      // 如果用户点击了返回按钮，停止倒计时
      const backButton = document.querySelector('button[onclick="history.back()"]');
      if (backButton) {
        backButton.addEventListener('click', () => {
          clearInterval(countdownInterval);
        });
      }
      
      updateCountdown();
      countdownInterval = setInterval(updateCountdown, 1000);
    });
  </script>
</BaseLayout>

2. 创建外链处理脚本

在/src/layouts/BaseLayout.astro中添加外链处理脚本：

<script is:inline>
// @ts-nocheck
/**
 * 外链安全跳转脚本
 * 将所有外部链接重定向到中转页面
 */

// 可信任的域名白名单
const trustedDomains = [
  'boke.zsx815.top',
  'mcyzsx.top',
  'localhost',
  '127.0.0.1',
  'github.com',
  'gitee.com',
  'cdn.jsdelivr.net',
  'unpkg.com'
];

// 检查URL是否在白名单中
function isTrustedDomain(url) {
  try {
    const urlObj = new URL(url);
    // 检查是否是同域名或白名单域名
    if (window.location.hostname === urlObj.hostname) {
      return true;
    }
    return trustedDomains.some(domain => urlObj.hostname.includes(domain));
  } catch (e) {
    return false;
  }
}

// 处理链接点击
function handleLinkClick(event) {
  const link = event.target.closest('a');
  if (!link) return;
  
  const href = link.getAttribute('href');
  if (!href) return;
  
  // 跳过特殊链接
  if (
    href.startsWith('#') ||           // 锚点
    href.startsWith('javascript:') ||  // JavaScript
    href.startsWith('mailto:') ||      // 邮件
    href.startsWith('tel:') ||         // 电话
    href.startsWith('data:')           // Data URI
  ) {
    return;
  }
  
  try {
    const urlObj = new URL(href, window.location.href);
    // 如果是外部链接且不在白名单中
    if (urlObj.hostname !== window.location.hostname && !isTrustedDomain(urlObj.href)) {
      event.preventDefault();
      // 跳转到中转页
      window.location.href = `/go?url=${encodeURIComponent(urlObj.href)}`;
    }
  } catch (e) {
    console.error('Safego: 处理链接时出错', e);
  }
}

// 初始化函数
function initSafeGo() {
  // 监听整个文档的点击事件
  document.addEventListener('click', handleLinkClick);
  
  // 处理已经存在的链接
  document.querySelectorAll('a[href]').forEach(link => {
    const href = link.getAttribute('href');
    if (!href) return;
    
    try {
      const urlObj = new URL(href, window.location.href);
      // 如果是外部链接且不在白名单中，不做额外标记
      if (urlObj.hostname !== window.location.hostname && !isTrustedDomain(urlObj.href)) {
        // 外部链接不添加图标，保持简洁
      }
    } catch (e) {
      // URL解析失败，可能是相对路径，忽略
    }
  });
}

// 当DOM加载完成后初始化
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initSafeGo);
} else {
  initSafeGo();
}

// 添加到全局作用域，方便调试
window.SafeGo = {
  isTrustedDomain,
  handleLinkClick,
  init: initSafeGo
};

// 确保在页面导航后重新初始化
document.addEventListener('astro:page-load', initSafeGo);
</script>

3. 中转页面UI设计

中转页面的UI设计要点：

清晰提示：显示"即将离开本站"的提示
URL展示：以醒目方式显示目标URL
操作按钮：提供"继续访问"和"返回上页"两个选项
倒计时：在按钮上方显示倒计时，5秒后自动跳转

<div class="bg-base-100 rounded-xl shadow-lg p-8 text-center">
  <div class="mb-6">
    <Icon name="lucide:external-link" class="w-16 h-16 mx-auto text-warning" />
  </div>
  
  <h1 class="text-3xl font-bold mb-4">即将离开本站</h1>
  
  <p class="text-lg mb-6 text-base-content/80">
    您即将访问外部网站，本站不对该网站内容负责。
  </p>
  
  <div class="bg-base-200 rounded-lg p-4 mb-8 text-left break-all">
    <p class="text-sm text-base-content/60 mb-2">目标网址:</p>
    <p class="text-base-content font-medium">{targetUrl}</p>
  </div>
  
  <!-- 倒计时提示 -->
  <div class="flex justify-center mb-4">
    <p id="countdownText" class="text-sm text-base-content/60"></p>
  </div>
  
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
    <button id="continueButton" class="btn btn-primary">
      <Icon name="lucide:external-link" class="w-4 h-4 mr-2" />
      继续访问
    </button>
    
    <button onclick="history.back()" class="btn btn-outline">
      <Icon name="lucide:arrow-left" class="w-4 h-4 mr-2" />
      返回上页
    </button>
  </div>
</div>

4. 倒计时脚本

添加倒计时功能，在用户不操作时自动跳转：

<script is:inline>
  // @ts-nocheck
  // 添加5秒后自动跳转选项
  let countdown = 5;
  let countdownInterval;
  
  document.addEventListener('DOMContentLoaded', () => {
    // 安全地获取URL参数
    let targetUrl = '/';
    try {
      const urlParams = new URLSearchParams(window.location.search);
      targetUrl = urlParams.get('url') || '/';
    } catch (e) {
      console.error('获取URL参数失败:', e);
    }
    
    // 直接获取倒计时元素
    const countdownElement = document.getElementById('countdownText');
    if (!countdownElement) {
      console.error('找不到倒计时元素');
      return;
    }
    
    // 跳转到目标URL的函数
    function redirectToTarget() {
      clearInterval(countdownInterval);
      // 使用window.location.href代替window.open，确保跳转成功
      window.location.href = targetUrl;
    }
    
    function updateCountdown() {
      if (countdown > 0) {
        countdownElement.textContent = `${countdown} 秒后自动跳转...`;
        countdown--;
      } else {
        redirectToTarget();
      }
    }
    
    // 为继续访问按钮添加点击事件
    const continueButton = document.getElementById('continueButton');
    if (continueButton) {
      continueButton.addEventListener('click', redirectToTarget);
    }
    
    // 如果用户点击了返回按钮，停止倒计时
    const backButton = document.querySelector('button[onclick="history.back()"]');
    if (backButton) {
      backButton.addEventListener('click', () => {
        clearInterval(countdownInterval);
      });
    }
    
    updateCountdown();
    countdownInterval = setInterval(updateCountdown, 1000);
  });
</script>

遇到的问题及解决方案

1. Astro.url 未定义错误

在实现初期，遇到了"Cannot read properties of undefined (reading 'searchParams')"错误，这是因为Astro.url在某些情况下可能是未定义的。

解决方案：

let targetUrl = '/';
try {
  const url = Astro.url;
  if (url && url.searchParams) {
    targetUrl = url.searchParams.get('url') || '/';
  }
} catch (e) {
  console.error('获取URL参数失败:', e);
}

2. "继续访问"按钮跳转失败

用户点击"继续访问"按钮时，只刷新了页面而没有跳转到目标网站。

解决方案：

将链接从<a>标签改为<button>标签
使用window.location.href代替window.open()
创建统一的redirectToTarget()函数处理跳转

function redirectToTarget() {
  clearInterval(countdownInterval);
  window.location.href = targetUrl;
}

3. 倒计时位置和样式调整

最初倒计时显示在按钮下方，用户希望它显示在按钮上方并居中。

解决方案：

<!-- 倒计时提示 -->
<div class="flex justify-center mb-4">
  <p id="countdownText" class="text-sm text-base-content/60"></p>
</div>

4. 脚本类型和 Astro 脚本处理问题

在 Astro 组件中使用脚本时，需要注意脚本标签的类型和处理方式。Astro 默认将脚本标签视为普通 JavaScript，而不是 TypeScript，这会导致类型注解错误。

解决方案：

对于需要在客户端执行的脚本，使用 is:inline 指令
移除 TypeScript 类型注解，改用纯 JavaScript 语法
如果仍然需要避免 TypeScript 检查，可以添加 // @ts-nocheck 注释

<!-- 正确的方式 -->
<script is:inline>
  // @ts-nocheck
  (window).__openQR = function(src) {
    // JavaScript 代码，不含类型注解
  };
</script>

5. MDX代码块格式问题

在MDX中，所有代码块必须正确地标记为代码，否则MDX解析器会尝试执行它们作为JavaScript。

解决方案：

确保所有代码块使用正确的语法高亮标识符（astro、js）
确保代码块使用三个反引号包裹
避免在MDX中直接使用非导入/导出的JavaScript语句

效果展示

最终实现的外链安全跳转功能具有以下特点：

安全性：提醒用户即将离开当前网站，提高安全意识
透明度：清晰显示目标URL，避免钓鱼网站风险
用户体验：提供多种操作选择，包括自动跳转和手动控制
兼容性：对白名单域名直接跳转，不影响正常使用体验
视觉一致性：中转页面设计与博客整体风格保持一致

总结

通过这次实现，我为博客添加了外链安全跳转功能，提高了用户的外链访问体验和安全性。这个功能借鉴了hexo-safego项目的设计思路，但根据Astro框架的特点和我的博客风格进行了适配和优化。

实现过程中遇到的一些问题，如Astro.url未定义、跳转失败、MDX格式问题等，都通过适当的错误处理和代码调整得到了解决。最终的实现既满足了功能需求，又保持了良好的用户体验。

关于github-issues当做动态的想法

ZSXの小站 — Wed, 24 Sep 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/github-issues-moment/

起源于在不同博客游览间，看到了一篇文章，感觉很有搞头，然后到了博主的GitHub仓库，然后有了些感受。

优点

有不少的博客基于github-issues，包括etheral、Gmeek等等，当然，除了当博客，你也可以使用其来搞博客。

很好的一种博客写作方式，理论上GitHub不倒，这个方式可以一直使用。

手机上有GitHub的APP，你可以比较简单地在手机上发布动态。

这种方式可以被用来在各种博客里使用，包括Hugo、astro等等。

大致的工作流如下:

// .github/workflows/issue.yml

name: Trigger Empty Commit on Issue Update

on:
  issue_comment:
    types: [created, edited]
  workflow_dispatch:  # 手动触发入口

jobs:
  trigger-empty-commit:
    runs-on: ubuntu-latest
    steps:
      - name: Check trigger type and prepare commit message
        id: check-trigger
        run: |
          # 处理手动触发
          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
            echo "should_trigger=true" >> $GITHUB_OUTPUT
            echo "commit_msg='[Manual] Trigger update from moments/issues/1'" >> $GITHUB_OUTPUT
          # 处理issue评论事件
          elif [ "${{ github.event.issue.number }}" -eq 1 ]; then
            echo "should_trigger=true" >> $GITHUB_OUTPUT
            echo "commit_msg='Trigger update from moments/issues/1'" >> $GITHUB_OUTPUT
          else
            echo "should_trigger=false" >> $GITHUB_OUTPUT
            echo "commit_msg=''" >> $GITHUB_OUTPUT
          fi

      - name: Trigger empty commit in lawtee.github.io
        if: steps.check-trigger.outputs.should_trigger == 'true'
        uses: actions/github-script@v6
        env:
          PAT: ${{ secrets.PAT }}
        with:
          script: |
            const { execSync } = require('child_process');
            const repo = 'h2dcc/lawtee.github.io';
            const token = process.env.PAT;
      
            // 从步骤输出获取提交信息
            const commitMsg = `${{ steps.check-trigger.outputs.commit_msg }}`;

            try {
              const repoUrl = `https://x-access-token:${token}@github.com/${repo}.git`;
              execSync(`git clone ${repoUrl}`, { stdio: 'inherit' });
              process.chdir('lawtee.github.io');

              execSync('git config user.name "github-actions[bot]"', { stdio: 'inherit' });
              execSync('git config user.email "41898282+github-actions[bot]@users.noreply.github.com"', { stdio: 'inherit' });

              // 安全执行空提交
              execSync(`git commit --allow-empty -m "${commitMsg.replace(/"/g, '\\"')}"`, { stdio: 'inherit' });
              execSync(`git push ${repoUrl} master`, { stdio: 'inherit' });
              console.log('✅ Empty commit pushed successfully!');
            } catch (error) {
              console.error('❌ Error:', error.message);
              process.exit(1);
            }

你需要的，是搞个公开的仓库(私有仓库不能使用非远程图片)，然后准备上述的工作流，然后在 Github 账号设置 Personal access tokens 中添加一个 token , 勾选 repo 权限，复制到说说仓库 secrets and variables - action 中，名称为 PAT 。

发布说说

这一步需要的是开启一个issue，然后在这个issue里面不断发布评论来当做动态，然后就是把这个issue的链接如https://github.com/h2dcc/moments/issues/1，改为类似https://api.github.com/repos/microsoft/vscode/issues/519/comments，如果你要在前端展示，你需要一个密钥，要有repo权限，你才能正常使用，否则会有较大的限制。关于这个，我觉得要在cloudflare里搞个worker然后再worker的环境变量里添加上面的密钥，大致worker代码如下：

// CF Worker 入口
export default {
  async fetch(req, env) {
    return await handle(req, env);
  }
};

async function handle(req, env) {
  const url = new URL(req.url);

  // 只代理 /api/comments
  if (url.pathname !== '/api/comments') {
    return new Response('Not Found', { status: 404 });
  }

  const upstream = 'https://api.github.com/repos/microsoft/vscode/issues/519/comments';

  const res = await fetch(upstream, {
    headers: {
      'Authorization': 'token ' + env.GH_TOKEN, // ✅ 正确读取环境变量
      'User-Agent': 'CF-Worker-Giscus-Proxy'
    }
  });

  const headers = new Headers(res.headers);
  headers.set('Access-Control-Allow-Origin', '*');

  return new Response(res.body, {
    status: res.status,
    statusText: res.statusText,
    headers
  });
}

然后再搞个自定义域名，然后在后面加后缀/api/comments，你就能比较不受限制的观看动态了，

前端

接下来就是我自己搞的一个html的简单前端，靠着AI完善了一下，可以参考参考:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" type="image/png"
    href="https://img.314926.xyz/images/2025/09/20/zsx-avatar.webp " 
    sizes="32x32">
    <meta charset="UTF-8">
    <title>钟神秀的瞬间</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --bg: #f5f5f5;
            --fg: #333333;
            --card: #ffffff;
            --link: #576b95;
            --border: #e1e1e1;
            --avatar-border: #f0f0f0;
            --time-color: #888888;
            --like-color: #ff2442;
            --comment-bg: #f7f7f7;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            --active-page-bg: #576b95;
            --active-page-fg: #ffffff;
            --action-btn-color: #7d7d7d;
            --divider-color: #f0f0f0;
            --header-image-height: 180px;
            --content-max-width: 600px;
        }
        [data-theme="dark"] {
            --bg: #1a1a1a;
            --fg: #e6e6e6;
            --card: #242424;
            --link: #7d9fd3;
            --border: #3a3a3a;
            --avatar-border: #3a3a3a;
            --time-color: #a0a0a0;
            --like-color: #ff5c7a;
            --comment-bg: #2d2d2d;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            --active-page-bg: #7d9fd3;
            --active-page-fg: #ffffff;
            --action-btn-color: #a0a0a0;
            --divider-color: #3a3a3a;
            --header-image-height: 200px;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--fg);
            line-height: 1.6;
            transition: background .3s, color .3s;
            padding-bottom: 40px;
        }
        a {
            color: var(--link);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }
        .nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 18px;
        }
        .icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        #theme-toggle {
            cursor: pointer;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg);
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .header-image {
            width: 100%;
            max-width: var(--content-max-width);
            height: var(--header-image-height);
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            position: relative;
            overflow: hidden;
            margin: 0 auto 15px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .header-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://img.314926.xyz/images/2025/09/22/20250922193025414.webp ') center/cover;
            opacity: 0.9;
        }
        .header-title {
            position: absolute;
            left: 20px;
            bottom: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            z-index: 2;
        }
        .header-info {
            position: absolute;
            right: 20px;
            bottom: 20px;
            color: white;
            z-index: 2;
            cursor: pointer;
            font-size: 20px;
        }
        @media (max-width: 640px) {
            .header-image {
                border-radius: 0;
                margin-bottom: 10px;
            }
            :root {
                --header-image-height: 160px;
            }
            [data-theme="dark"] {
                --header-image-height: 180px;
            }
        }
        .info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .info-content {
            background: var(--card);
            padding: 20px;
            border-radius: 12px;
            max-width: 80%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
        }
        main {
            max-width: var(--content-max-width);
            margin: 0 auto;
            padding: 0 10px;
            width: 100%;
        }
        .moment-article {
            background: var(--card);
            border-radius: 12px;
            padding: 0;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        .article-header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            border: 2px solid var(--avatar-border);
            object-fit: cover;
        }
        .user-info {
            flex: 1;
        }
        .user-name {
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 2px;
        }
        .post-time {
            font-size: 12px;
            color: var(--time-color);
        }
        .moment-content {
            padding: 0 15px 15px 15px;
            margin-left: 52px;
            margin-top: -10px;
            font-size: 15px;
            line-height: 1.5;
        }
        .moment-content p {
            margin-bottom: 10px;
        }
        .moment-content pre {
            background: var(--bg);
            padding: 12px;
            border-radius: 6px;
            overflow: auto;
            font-size: 14px;
            margin: 10px 0;
        }
        .moment-content blockquote {
            border-left: 3px solid var(--border);
            padding-left: 12px;
            margin: 10px 0;
            color: var(--fg);
            opacity: .8;
            font-size: 14px;
            background: var(--comment-bg);
            border-radius: 0 6px 6px 0;
            padding: 8px 12px;
        }
        .moment-content code {
            background-color: var(--bg);
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 14px;
        }
        .moment-content img {
            max-width: 100%;
            border-radius: 6px;
            margin: 8px 0;
        }
        .error, .no-content {
            text-align: center;
            margin-top: 40px;
            font-size: 16px;
            color: var(--time-color);
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            gap: 8px;
        }
        .page-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--fg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .page-btn:hover {
            background: var(--bg);
        }
        .page-btn.active {
            background: var(--active-page-bg);
            color: var(--active-page-fg);
            border-color: var(--active-page-bg);
        }
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .giscus-container {
            max-width: var(--content-max-width);
            margin: 30px auto 0 auto;
            padding: 0 10px;
        }
        .loading {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid var(--border);
            border-top-color: var(--link);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        /* 右下角编辑按钮 */
        .edit-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card);
            color: var(--fg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all .3s;
            z-index: 999;
        }
        .edit-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
        }
        /* 手机端缩小一点 */
        @media (max-width: 640px) {
            .edit-btn {
                width: 44px;
                height: 44px;
                font-size: 18px;
                right: 16px;
                bottom: 16px;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-left">
            <svg class="icon" viewBox="0 0 16 16">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
                         0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
                         1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
                         0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0
                         1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0
                         3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
            <span>钟神秀的瞬间</span>
        </div>
        <button id="theme-toggle" aria-label="切换主题">
            <span id="theme-icon">🌙</span>
            <span>切换主题</span>
        </button>
    </nav>

    <div class="header-image">
        <div class="header-title">即刻短文</div>
        <div class="header-info" id="info-button">❗</div>
    </div>

    <div class="info-modal" id="info-modal">
        <div class="info-content">
            <div class="close-modal" id="close-modal">×</div>
            <h3>钟神秀的瞬间记录</h3>
            <p>这里收录了我的生活随笔、技术思考和灵感闪现。每一段文字都是时光的切片，记录当下的真实感受。</p>
        </div>
    </div>

    <main id="main-container">
        <div class="loading">
            <div class="loading-spinner"></div>
        </div>
    </main>

    <div id="pagination-container" style="display: none;"></div>

    <div class="giscus-container"></div>

    <a href="https://github.com/zsxjun/github-issues-moments/issues/1" target="_blank" class="edit-btn" title="添加/编辑说说">✏️</a>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js "></script>
    <script>
        /* ---------- 主题切换 + Giscus 重载 ---------- */
        const toggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;

        function loadGiscus(theme) {
            const container = document.querySelector('.giscus-container');
            container.innerHTML = '';
            const script = document.createElement('script');
            script.src = 'https://giscus.app/client.js ';
            script.async = true;
            script.setAttribute('crossorigin', 'anonymous');
            script.setAttribute('data-repo', 'zsxjun/github-issues-moments');
            script.setAttribute('data-repo-id', 'R_kgDOP0jWOA');
            script.setAttribute('data-category', 'Announcements');
            script.setAttribute('data-category-id', 'DIC_kwDOP0jWOM4Cvv6S');
            script.setAttribute('data-mapping', 'pathname');
            script.setAttribute('data-strict', '0');
            script.setAttribute('data-reactions-enabled', '1');
            script.setAttribute('data-emit-metadata', '0');
            script.setAttribute('data-input-position', 'top');
            script.setAttribute('data-lang', 'zh-CN');
            script.setAttribute('data-theme', theme);
            container.appendChild(script);
        }

        (function initTheme() {
            const saved = localStorage.getItem('theme');
            const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const initialTheme = (saved === 'dark' || (!saved && preferDark)) ? 'dark' : 'light';
            html.setAttribute('data-theme', initialTheme);
            themeIcon.textContent = initialTheme === 'dark' ? '☀️' : '🌙';
            loadGiscus(initialTheme);
        })();

        toggle.addEventListener('click', () => {
            const current = html.getAttribute('data-theme');
            const next = current === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
            themeIcon.textContent = next === 'dark' ? '☀️' : '🌙';
            loadGiscus(next);
        });

        /* ---------- 信息模态框 ---------- */
        const infoButton = document.getElementById('info-button');
        const infoModal = document.getElementById('info-modal');
        const closeModal = document.getElementById('close-modal');
        infoButton.addEventListener('click', () => infoModal.style.display = 'flex');
        closeModal.addEventListener('click', () => infoModal.style.display = 'none');
        infoModal.addEventListener('click', e => {
            if (e.target === infoModal) infoModal.style.display = 'none';
        });

        /* ---------- 数据加载 & 分页 ---------- */
        const container = document.getElementById('main-container');
        const paginationContainer = document.getElementById('pagination-container');
        const url = 'https://example.com/api/comments '; /* 替换为你的 API URL */
        let allComments = [];
        let currentPage = 1;
        const itemsPerPage = 10;

        const headers = new Headers();
        headers.append('Accept', 'application/vnd.github.v3+json');
        headers.append('User-Agent', 'Hugo Static Site Generator');

        fetch(url, { headers })
            .then(r => {
                if (!r.ok) throw new Error('网络错误 ' + r.status);
                return r.json();
            })
            .then(list => {
                if (!Array.isArray(list) || list.length === 0) {
                    container.innerHTML = '<p class="no-content">暂无动态</p>';
                    return;
                }
                allComments = list.reverse();
                initPagination(allComments.length);
                displayPage(1);
            })
            .catch(err => {
                container.innerHTML = `<p class="error">⚠️ 无法获取动态：${err.message}</p>`;
            });

        function initPagination(totalItems) {
            const totalPages = Math.ceil(totalItems / itemsPerPage);
            if (totalPages <= 1) {
                paginationContainer.style.display = 'none';
                return;
            }
            let html = `
                <div class="pagination">
                    <button class="page-btn prev-btn" onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>
            `;
            const max = 5, half = Math.floor(max / 2);
            let start, end;
            if (totalPages <= max) { start = 1; end = totalPages; }
            else if (currentPage <= half + 1) { start = 1; end = max; }
            else if (currentPage >= totalPages - half) { start = totalPages - max + 1; end = totalPages; }
            else { start = currentPage - half; end = currentPage + half; }
            for (let i = start; i <= end; i++) {
                html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
            }
            html += `<button class="page-btn next-btn" onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button></div>`;
            paginationContainer.innerHTML = html;
            paginationContainer.style.display = 'block';
        }

        function displayPage(page) {
            const start = (page - 1) * itemsPerPage, end = Math.min(start + itemsPerPage, allComments.length);
            const html = allComments.slice(start, end).map(c => `
                <article class="moment-article">
                    <header class="article-header">
                        <img class="avatar" src="${c.user.avatar_url}" alt="${c.user.login}" onerror="this.src='https://avatars.githubusercontent.com/u/0?s=80&v=4 '">
                        <div class="user-info">
                            <div class="user-name">钟神秀@zsxjun</div>
                            <div class="post-time">${formatTime(c.created_at)}</div>
                        </div>
                    </header>
                    <section class="moment-content">${marked.parse(c.body)}</section>
                </article>
            `).join('');
            container.innerHTML = `<div class="moments-feed">${html}</div>`;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        window.changePage = function (page) {
            const total = Math.ceil(allComments.length / itemsPerPage);
            if (page < 1 || page > total || page === currentPage) return;
            currentPage = page;
            displayPage(page);
            initPagination(allComments.length);
        };

        function formatTime(dateStr) {
            const date = new Date(dateStr), now = new Date(), diff = (now - date) / 1000;
            if (diff < 60) return '刚刚';
            if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
            if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
            if (diff < 2592000) return `${Math.floor(diff / 86400)}天前`;
            return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
        }
    </script>
</body>
</html>

大致就是这样了，以上就是我肤浅的理解，希望能帮到你~

Hexo备忘

ZSXの小站 — Sat, 16 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/hexo-beiwang/

Hexo 备忘

我的配置

Hexo 版本: hexo-cli: 4.3.2, hexo: 7.3.0(当前最新)
Node.js 版本: 22.16.0
Git 版本: 2.47.0.sindows.2
PNPM 版本: 10.12.4
Windows 版本: 11

安装 Node.js

在官网安装 LTS 版本，电脑一般来说内存足够直接在 C 盘即可，当然，换路径也可以，我反正正常下载换路径，没什么问题。
安装完成后，检查是否安装成功。在键盘按下 win + R 键，输入 CMD，然后回车，打开 CMD 窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

安装 Git

在官网安装最新版本的 64-bit Git for Windows Setup 安装包。

安装完成后，在命令行输入 git --version，如果显示版本号，则说明安装成功。

常用命令

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

配置 Git 用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

安装包管理器

安装 npm 为一切的基石，一般来说，你安装了 node，也相当于你安装了 npm，通过一下命令来验证：

npm -v
node -v

修改 npm 源。npm 下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像。打开 CMD 窗口，运行如下命令:

npm config set registry https://registry.npm.taobao.org

安装 pnpm

pnpm 是一个快速、节省磁盘空间的包管理器，类似于 npm 和 yarn。安装 pnpm 可以通过以下命令：

npm install -g pnpm

为什么选择 pnpm？因为它的安装速度快，依赖管理更高效，且相对于 npm，我使用 npm 容易失败且慢，pnpm 给我的体验更好。

安装 Hexo

在 Git BASH 输入如下命令安装 Hexo：

pnpm install -g hexo-cli

安装完后输入 hexo -v 验证是否安装成功。

Github配置

上述操作是前提，接下来是配置 Github。

创建仓库

登录 GitHub，点击右上角的 + 号，选择 New repository。
填写仓库名称，建议使用 <username>.github.io 格式（例如：yourusername.github.io），这样可以直接作为个人主页。

这里我不准备直接使用常规的 hexo deploy 命令来部署到 GitHub Pages，因为当你的文章一多，生成时间就会繁琐，这里的建议是使用 Github Actions 来自动部署。

这一部分的教程是源于店长的文章，但是有点老旧了，于是我做了点更改（这里的图片来源于安知鱼）：

首先要创建一个放置源码的私有仓库，以下称之为 hexo-source，
然后要生成一个 Github 密钥：

访问 Github-> 头像（右上角）-> Settings-> Developer Settings-> Personal access tokens-> generate new token, 创建的 Token 名称随意，但必须勾选 repo 项和 workflows 项。

点击链接前往生成

[!NOTE]

!!! token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

在 hexo-source 仓库中的设置里点击设置 -> action -> General -> 工作流程权限
- 勾选 Read and write permissions，并且勾选 Allow <span style="background:#FF0000;"></span>all actions and reusable workflows。
在设置里 -> Secrets and variables -> Actions -> New repository secret 添加

GITHUBTOKEN：放置你刚才生成的 Token。

上述是前置条件，接下来要先部署 hexo，你才好继续下一步。

初始化 Hexo

在本地新建一个文件夹，例如 hexo-solitude。
这里我是用的是 vscode 打开该文件夹，然后在终端输入以下命令来初始化 Hexo：

hexo init (项目名称)

我一般都不填，直接在文件下下就可以开始，如果你添加了项目名称，那么下一步就是：

cd (项目名称)

安装依赖包：

pnpm install

然后就是选择你想要的主题，这里我使用的是Solitude，具体的配置不细讲，我只讲一部分：

首先就是基本的安装，这里还是选择git clone没有别的原因，主要还是会改点源码，不想改的直接pnpm下载即可：

// git安装
git clone -b dev https://github.com/everfu/hexo-theme-solitude.git themes/solitude

// pnpm 安装
pnpm i hexo-theme-solitude

然后在_config.yml里修改成：

theme: solitude

配置

下列代码是我的备忘：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 喵落阁
subtitle: '克喵的博客'
description: '愿你看清一切真相后，依旧热爱你的家人和朋友。'
keywords: 克喵,kemiao,博客
author: 克喵爱吃卤面
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: # 填网站地址
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include: []
exclude: []
ignore: []

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: solitude

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com-xx:kemiaofxjun/kemiaofxjun.github.io.git
  branch: main

# RSS Feed 配置
feed:
  type: atom          # 生成 atom.xml
  path: atom.xml      # 输出文件名
  limit: 20           # 最多显示文章数 (0=全部)
  hub:                # PubSubHubbub 中心 (可选)
  content: true       # 是否包含全文内容 (true=是, false=仅摘要)
  content_limit: 140  # 摘要长度（当 content=false 时生效）
  content_limit_delim: ' '  # 截断分隔符
  order_by: -date     # 按日期倒序排列
  autodiscovery: true # 在 HTML 头部添加自动发现标签

# 数学公式渲染配置
markdown:
  preset: 'default' # 使用的 MD 语法，默认使用的 GFM
  render:
    html: true # 渲染 html
    xhtmlOut: false
    langPrefix: 'language-' # 在代码块的类名中添加前缀（指定语言时）。
    breaks: true
    linkify: true # 如果你写了一个链接而不是 [name](link) 方式，会自动识别为链接并渲染。
    typographer: true # 将替换常见的印刷元素。
    quotes: '“”‘’' # 替换文章张的 "" '' 号
  enable_rules:
  disable_rules:
  plugins: # 使用插件
  anchors:
    level: 2 # 渲染标题的级别（h1,h2,h3）
    collisionSuffix: ''
    permalink: true
    permalinkClass: 'headerlink'
    permalinkSide: 'left'
    permalinkSymbol: ''
    case: 0
    separator: '-'
  images: # 图片的一些编译
    lazyload: true # 是否需要渲染 lazyload
    prepend_root: false
    post_asset: false
  inline: false

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true

algolia:
  appId: ""
  apiKey: ""
  adminApiKey: ""
  chunkSize: 5000
  indexName: "index-name"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面

  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'

  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径

  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "kemeow.top"
      - "kemiaosw.top"
      - "050815.xyz"
      - "314926.xyz"
      - "051531.xyz"

  # 页面外观设置
  appearance:
    avatar: https://img.314926.xyz/images/2025/08/13/no-background-kemiaofxjun.webp   # 跳转页面头像路径
    title: "喵洛阁"            # 跳转页面标题
    subtitle: "安全中心"         # 跳转页面副标题
    darkmode: auto              # 是否启用深色模式
    countdowntime: 4            # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转

  # 调试设置
  debug:
    enable: false               # 启用调试模式

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  source: bili
  path: 
  vmid: 3546643173477234
  title: "追番列表"
  quote: "生命不息，追番不止！"
  show: 1
  lazyload: false
  loading:
  showMyComment: true
  pagination: false
  extra_options:
    top_img: false
    lazyload:
      enable: false

博客的其他修改基本就是来自教程和一些博主的网站。

插件

基础依赖 hexo-renderer-pug

pnpm i hexo-renderer-pug

字数统计 hexo-wordcount

pnpm i hexo-wordcount

配置里修改：

# --------------------------- start ---------------------------
# Word count
# 字数统计
# warning: Please install the hexo-wordcount plugin first.
# 警告: 请先安装 hexo-wordcount 插件。
wordcount: false
# --------------------------- end ---------------------------

数学公式 卸载 hexo-render-marked

npm un hexo-renderer-marked

安装 hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

配置里修改

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: false
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: false
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

添加以下内容到 _config.yml

markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

开启配置项

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: true
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: true
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

PWA 安装 hexo-swpp 和 swpp-backends 插件

在博客根目录执行

pnpm i hexo-swpp 

pnpm i swpp-backends

开启配置

# 大约在773行
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#006a73" # Theme color
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------

在_config.yml里添加swpp配置

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

在 source 目录中创建 manifest.json 文件

{
    "name": "网站名称",
    "short_name": "网站名称缩写",
    "theme_color": "#006a73",
    "background_color": "#006a73",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/",
    "id": "/",
    "icons": [
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
    "splash_pages": null
}

在博客根目录创建一个 sw-rules.js 文件

module.exports.config = {
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    escape: 1,
    cacheName: 'SolitudeCache',
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () =>
      console.error(
        'Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'
      ),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
            <script>
                (() => {
                    const sw = navigator.serviceWorker;
                    const error = ${onerror && onerror.toString()};
                    if (!sw?.register('${new URL(root).pathname}sw.js')
                        ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
                        ?.catch(error)
                    ) error()
                })()
            </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches
        .match('https://id.v3/')
        .then((res) => {
          if (res)
            res.json().then((json) => {
              utils &&
                utils.snackbarShow(
                  `已刷新缓存，更新为${json.escape + '.' + json.global + '.' + json.local
                  }版本最新内容`,
                  false,
                  2500
                );
            });
          else console.info('未找到缓存');
        })
        .catch((error) => console.error('缓存匹配出错', error));
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    /** @type {number} */
    maxHtml: 15,
    /** @type {number} */
    charLimit: 1024,
    /** @type {string[]} */
    merge: [],
    exclude: {
      /** @type {RegExp[]} */
      localhost: [],
      /** @type {RegExp[]} */
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    /** @type {number} */
    timeout: 5000,
    /** 拉取文件时地并发限制 */
    concurrencyLimit: 100,
    /** @type {({head: string, tail: string}|function(string):string[])[]} */
    js: [],
    /** @type {RegExp[]} */
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
        const pathname = new URL(srcUrl).pathname;
        return [
          srcUrl,
          `https://cdn.cbd.int/${pathname}`,
          `https://npm.elemecdn.com/${pathname}`,
          `https://fastly.jsdelivr.net/npm/${pathname}`,
        ];
      } else {
        return srcUrl;
      }
    },
  },
};

module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) =>
      url.host === $eject.domain && ['/404.html'].includes(url.pathname),
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        'cdn.cbd.int',
        'lf26-cdn-tos.bytecdntp.com',
        'lf6-cdn-tos.bytecdntp.com',
        'lf3-cdn-tos.bytecdntp.com',
        'lf9-cdn-tos.bytecdntp.com',
        'cdn.staticfile.org',
        'npm.elemecdn.com',
      ].includes(url.host) &&
      url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
};

module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: 'const',
      value: new URL(hexo.config.url).host,
    },
  };
};

module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');

hexo-deploy-git 提交到git的插件

pnpm i hexo-deploy-git --save

hexo-generator-feed hexo的rss插件

pnpm i hexo-generator-feed --save

hexo 的短链接: hexo-abbrlink

pnpm i hexo-abbrlink --save

在_config.yml里修改：

permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

添加:

# abbrlink config
abbrlink:
  alg: crc32      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: hex        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)

博客的sitemap : hexo-generator-sitemap

pnpm i hexo-generator-sitemap --save

在_config.yml里添加配置：

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

使用algolia搜索 : hexo-algoliasearch

注册algolia：

注册地址：dashboard.algolia.com/users/sign_up

创建应用：

注册成功后创建应用：dashboard.algolia.com/account/plan/create?from=dashboard

search -> configure -> index添加index_name即可

在博客执行命令：

pnpm i hexo-algoliasearch --save

_config.yml里添加

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "my-hexo-blog"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

[!NOTE]

!!!配置完成后记得运行 hexo clean

在hexo g 后实行下列代码：

hexo algolia

**hexo-safego**安全跳转插件

使用该插件之前，需要先安装 cheerio，cheerio 是一个轻量级的库，用于在服务器端快速、灵活地实现 jQuery 核心功能。在 hexo-safego 插件中，cheerio 被用来解析和操作生成的静态 HTML 内容，类似于在浏览器中使用 jQuery 处理 DOM 元素。这使得插件能够在生成静态页面时，处理和替换外部链接，增强博客的安全性，而不需要在客户端引入 jQuery。Hexo 一般都有这个插件，可以在 node_modules 查看，如果没有，请先执行：

pnpm i cheerio --save

然后即可安装该插件：

pnpm i hexo-safego --save

在hexo根目录的_config.yml文件中添加以下配置：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 打开新窗口
  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 属性
      - 'data-fancybox'
  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径
  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名
      - "qyliu.top"
      - "liushen.fun"
  # 页面外观设置
  appearance:
    avatar: /info/avatar.ico    # 头像路径
    title: "清羽飞扬"            # 页面标题
    subtitle: "安全中心"         # 页面副标题
    darkmode: true              # 是否启用深色模式
    countdowntime: -1           # 倒计时秒数
  # 调试设置
  debug:
    enable: false               # 启用调试模式

hexo的追番页面：hexo-bilibili-bangumi

pnpm i hexo-bilibili-bangumi --save

在_config.yml配置：

bangumi: # 追番设置
  enable: true           # 是否启用
  source: bili          # 数据源
  path: bangumis/index.html  # 页面路径
  vmid:                 # 用户ID
  title: '追番列表'      # 页面标题
  quote: '生命不息，追番不止！' # 页面引言
  show: 1              # 初始显示页面: 0=想看, 1=在看, 2=看过
  lazyload: true       # 是否启用图片懒加载
  metaColor:           # meta 信息字体颜色
  color:               # 简介字体颜色
  webp: true          # 是否使用 webp 格式图片
  progress: true      # 是否显示进度条

cinema: # 追剧设置
  enable: true           # 是否启用
  source: bili

game: # 游戏设置，仅支持source: bgmv0
  enable: true           # 是否启用
  source: bgmv0

还在更新中。。。

Github action配置

承接段落的继续吧，未来会在出水一期。

接下来就是创建一个私有仓库，根据大佬的文章，是为了保护Token，见仁见智。

这个私有仓库的建立是存储Hexo博客代码，如果你要使用Qexo

，这也是必不可少的！

创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处虽然 SSH 和 HTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况。请自主选择。

[!TIP]

这里之所以是私有仓库，是因为在接下来的配置中会用到 Token，如果 Token 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。

配置 Github Action

在[Blogroot]新建.github文件夹,注意开头是有个.的。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml,在[Blogroot]/.github/workflows/autodeploy.yml 里面输入

# 当有改动推送到 main 分支时，启动 Action
name: 自动部署

on:
  push:
    branches:
      - main # 自选分支

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v4
        with:
          ref: main # 自选分支

      - name: 安装 Node
        uses: actions/setup-node@v4
        with:
          node-version: "22.x" # node版本

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g
          npm install yamljs --save

      - name: 缓存 Hexo
        uses: actions/cache@v4
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save
          npm install hexo-algoliasearch --save
          npm install hexo-bilibili-bangumi --save

      - name: 生成静态文件
        run: |
          node ./link.js
          hexo clean
          hexo generate
          hexo bangumi -u
          hexo algolia

      - name: 部署
        run: |
          cd ./public
          git init -b main
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated by GitHub Actions"
          git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main

上述代码是来自店长的修改自用，为什么不用安知鱼的？

首先把Token直接放在仓库的文件里还是不太好。
像我这种在本地搞的，推不到仓库里，因为这里的token不能直接上传，所以改成环境变量来引入，但是依旧有各种问题，相反使用了店长的代码后，就大差不差，询问AI后就得到目前的代码，也就可以正式上传了。（无拉踩的意思）
之后需要自己到仓库的 Settings->Secrets->actions 下添加环境变量，变量名参考脚本中出现的，依次添加。

重新设置远程仓库和分支

🍼第一次使用git管理博客源码

删除或者先把[Blogroot]/themes/solitude/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。
在博客根目录[Blogroot]路径下运行指令:

git init #初始化
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致

添加屏蔽项

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。 4. 之后再运行 git 提交指令，将博客源码提交到 github 上。

git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

此时你的主题文件夹若已经被正常上传，并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git放回来，用作以后升级。（不禁怀疑真的有人会去用这个方式来升级吗）

🍾曾经做过git管理源码的操作

添加屏蔽项

因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。打开[Blogroot]/.gitignore,输入以下内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

提交源码到私有仓库[SourceRepo] 在博客根目录[Blogroot]下启动终端，使用 git 指令重设仓库地址。这样在新建仓库，我们仍旧可以保留珍贵的 commit history，便于版本回滚。

git remote rm origin # 删除原有仓库链接
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为新的存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致
git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

可能遇到的 bug 因为 solitude 主题文件夹下的.git 文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来，再 commit 一次。

[!IMPORTANT]

要是还不行，那就删了 solitude 主题文件夹下的.git 文件夹，然后再重复上述的 commit 操作。

挖坑

大致写到这，未来或许会有~~下一章~~挖坑？但是目前通用的就到这，然后后续会写Qexo的简单使用方法、solitude的一些配置更改和我踩坑经历吧。

Markdown 强调语法

ZSXの小站 — Thu, 17 Jul 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/markdown-qiangdiaoyufa/

原文链接: https://markdown.com.cn/basic-syntax/emphasis.html

Markdown 强调语法

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法	HTML	预览效果
`I just love bold text.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`I just love __bold text__.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`Loveisbold`	`Love<strong>is</strong>bold`	Love is bold

粗体（Bold）用法最佳实践

Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请使用星号（asterisks）。

✅ Do this	❌ Don't do this
`Loveisbold`	`Love__is__bold`

斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法	HTML	预览效果
`This text is *really important*.`	`This text is <strong><em>really important</em></strong>.`	This text is really important.
`This text is ___really important___.`	`This text is <strong><em>really important</em></strong>.`	This text is really important.
`This text is __really important__.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is _really important_.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This is really*very*important text.`	`This is really<strong><em>very</em></strong>important text.`	This is really very important text.

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

✅ Do this	❌ Don't do this
`This is really*very*important text.`	`This is really___very___important text.`

Markdown 换行语法

ZSXの小站 — Sat, 28 Jun 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/markdowm-huanhang/

原文链接: https://markdown.com.cn/basic-syntax/line-breaks.html

Markdown 换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)。

Markdown语法	HTML	预览效果
`This is the first line.` `And this is the second line.`	`This is the first line.<br>` `And this is the second line.`	This is the first line. And this is the second line.

换行（Line Break）用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的 <br /> 标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

✅ Do this	❌ Don't do this
`First line with two spaces after.` `And the next line.`	`First line with a backslash after.\` `And the next line.`
`First line with the HTML tag after.<br>` `And the next line.`	`First line with nothing after.` `And the next line.`

资源分享：涂鹿Toolooz

ZSXの小站 — Mon, 19 May 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/zyfx-toolooz/

涂鹿Toolooz：曲线文字绘制设计工具，轻松创建沿任意路径排布的精美文字

　　涂鹿Toolooz，在线曲线文字绘制工具，可使文字沿任意路径排列，打造独特视觉效果。为您的徽标、标题、艺术作品赋予生命力与创意。

　　支持自定义画布尺寸、文本内容、字体、间距、颜色、描边等，还支持多个绘图工具和选择文本是否重复，可导出为 PNG、WebP 和 SVG 格式，免费使用，无需注册。

网站介绍

截图

特色

自由绘制路径

　　使用鼠标或触控笔自由绘制路径，或选择预设形状如圆形、方形、椭圆等，轻松创建文字轨迹。

文本样式丰富

　　自定义字体、大小、颜色、间距等属性，支持文本背景带，打造丰富多样的文字效果。

交互式编辑

　　直观的选择、移动、缩放和旋转功能，让您精确控制每个文字路径的位置和外观。

灵活配置

　　自定义画布尺寸、背景色、缩放级别等，适应各种设计场景和需求。

多格式导出

　　将设计导出为PNG、SVG或WEBP格式，可自定义分辨率和尺寸，轻松应用于各种场景。

模板库

　　内置多种精美模板，一键应用，快速开始您的创意设计项目

应用场景

　　涂鹿曲线文字绘制设计工具适用于多种创意设计

　　创建独特的环形或自定义形状品牌徽标，增强品牌视觉识别度。#社交媒体 #创意设计

　　为社交媒体平台设计吸引眼球的曲线文字图片，提高内容吸引力。创意海报设计

　　创建个性化海报和宣传材料，为活动和产品增添创意元素。

网站链接

　　https://toolooz.com

原文链接

　　https://www.appmiao.com/836/

来将 Telegram 当音乐播放器吧！

ZSXの小站 — Thu, 15 May 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/telegram-music/

来将 Telegram 当音乐播放器吧！（寻找音乐、即时歌词、无损音乐不失真压缩）

步骤一：到 @music_v1bot 下载歌曲，并找到歌词

　　输入指令： /search （你想要的歌名）

步骤二：下载 MT 管理器（点我）

开启：下载好的歌词文件

步骤三：最右上角、搜索>勾选正则化，替换（全部替换）

输入：[(\d{2}:\d{2}).\d+]

替换：$1

注意："$1"后面要加一个空格(英文)。

代码作者：Aric

　　并将选取好的歌词，粘贴到音乐文件就完成了。

（我是范例-点我查看）

须知

使用：“.FLAC“格式的音乐文件，有时候不能正常显示歌词时间轴，是正常的，所以你可能要转换特定的格式，如.mp3，或是.ogg 或.m4a 的歌曲。

　　→ 如果你对音乐品质有极致追求，也有电脑 🖥️，我个人极度推荐使用 dBpowerAMP 这类型工具，将无损音乐格式转换成 m4a （水果的算法：QAAC 编码的音乐），目前可以算是当今世界上最好的压缩算法，在通讯界享有盛名，且压缩后可以到接近百分之百还原。（甚至连对音乐/声学研究的职业工作者都讚叹不已）笔者强烈推荐，只叹手机没有类似的软件。专门转成 QAAC 编码的。

🖥️ 电脑版 dBpowerAMP 下载/教学请点我

拓展

　　以上是原文内容，如果你改了音乐格式失去了原本的封面，歌手等等东西，一般来说是不妨碍什么的，如果你一定要改的话，可以使用音乐标签。具体使用很简单，我不多赘述，给个视频你就大致明白了：

　　同时，如果你想更换音乐格式，有很多种方法，以下给一个网站。

原文链接

　　https://telegra.ph/Telegram-Real-Time-sync-lyrics-05-14

　　‍

DROP：便捷大文件分享与托管网站，免费享10GB空间免费部署

ZSXの小站 — Fri, 09 May 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/drop/

网站简介

DROP 是一个便捷的文件分享与托管平台，云存储工具，提供免费10GB的存储空间，支持大文件的快速上传与分享。

支持上传图片、视频、压缩文件和PDF，选择适合文件的文档后，点击拷贝链接即可直接获得分享链接。采用AI驱动技术，确保文件传输的高效性和安全性，同时提供简洁直观的用户界面，方便用户管理和分享文件。DROP 适用于个人用户和创作者，可轻松展示和分发作品

截图

功能特色

免费10GB存储：新用户可免费享受10GB的存储空间，满足日常文件分享需求。
大文件支持：支持大文件的快速上传与分享，适合分享高清视频、大型文档等。
AI驱动：采用AI技术优化文件传输和管理，提升用户体验。
隐私保护：提供文件访问控制，保护用户隐私和数据安全。
简洁界面：直观的用户界面，易于上手，方便文件管理。
多平台支持：支持多种设备和操作系统，方便随时随地访问文件。

网站地址

https://drop.space/

原文链接: https://www.appmiu.com/31115.html

tgtalk免费部署

ZSXの小站 — Sun, 04 May 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/tgtalk-deploy/

部署 API

访问 Gist 并获取其中所有代码

需要注意，本 API Worker 脚本基于 ChenYFan 修改，包含了本项目需要使用的功能，请勿随意更改脚本内容 TGTalker-Frontend V2 的 API 不兼容 V1

进入 Cloudflare 仪表盘

选择创建应用程序 -> 创建 Worker -> 修改名称（部署）-> 编辑代码

在其中粘贴你复制的所有代码，并且修改 ChannelName 为你的频道名称，部署并访问 Worker 查看是否能正确返回内容

接着你可以为你的 Worker 绑定一个域名

保存，然后将你绑定的域名填入配置中的 api 项即可。

Waline评论在Vercel部署

ZSXの小站 — Mon, 14 Apr 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/waline-deploy-vercel/

使用Waline评论我喜欢使用的部署方法(个人认为最简便)

所需账号

一个Github账号
一个Vercel账号
一个leancloud账号(最好是国际服的，你有了Github难道还用大陆的吗？大陆的要备案，故在这里不阐述，末尾放原文链接)

在 leancloud 里创建数据库

登录或注册 LeanCloud 国际版 并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版):
进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

在 Vercel 部署

点击上方按钮，跳转至 Vercel 进行 Server 端部署。

::: note

如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。

:::
输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。
点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。
环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

绑定域名 (可选)

点击顶部的 Settings - Domains 进入域名配置页
输入需要绑定的域名并点击 Add
在域名服务器商处添加新的 CNAME 解析记录

Type Name Value

CNAME example cname.vercel-dns.com(国区的可用 cname-china.vercel-dns.com)
等待生效，你可以通过自己的域名来访问了:tada:
- 评论系统：example.yourdomain.com
- 评论管理：example.yourdomain.com/ui

Type	Name	Value
CNAME	example	cname.vercel-dns.com(国区的可用 cname-china.vercel-dns.com)

HTML 引入 (客户端)

在你的网页中进行如下设置:

导入 Waline 样式 https://unpkg.com/@waline/client@v3/dist/waline.css。

创建 <script> 标签使用来自 https://unpkg.com/@waline/client@v3/dist/waline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。

el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
serverURL 是服务端的地址，即上一步获取到的值。

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

评论服务此时就会在你的网站上成功运行 :tada:

评论管理 (管理端)

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

视频教程

以下是热心用户制作的视频教程，以上操作不清楚的也可以参考一二。

Waline 部署教程（快速上手）

UP 主：rickroll 摇

使用 Vercel 简单地部署 Waline 评论系统

UP 主：岚天呀

以上为部分修改原文

原文链接: https://waline.js.org/guide/get-started/

Umami博客访问统计Vercel+Cloudflare Wokers部署

ZSXの小站 — Mon, 07 Apr 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/umami-free-deploy/

第一部分：Vercel+Umami

第一步 1.1 Forkumami到自己的Github仓库

1.2 创建项目

index.mdx 2. 第二步

　2.1 创建Vercel账号，这里我就省略了，因为GitHub可以直接进行授权即可。

2.2 在你授权以后，首先创建Postgres数据库，直接一路下一步，创建好就行，可以给下面的连接复制出来

　　点击Copy Snippet,就可以，记住在粘贴的时候是我画线里面的部分，双引号都不需要，因为要设置环境变量。

　　 2.3 在创建好数据库以后，回到主页面的Overview，然后右上角有一个Add New选择添加Project，选择你Fork的umami，添加即可。 2.4 设置环境变量，DATABASE_URL和HASH_SALT和TRACKER_SCRIPT_NAME，其中DATABASE_URL的值就是上面划线的部分，其他的两个环境变量都是对应的值是String自己可以随意定义。　　 2.5 设置好以后点击Deploy，等待大约两分钟左右，自动部署完成，部署完成以后可以通过下图种面板上面给的链接可以直接访问。

　　 2.6 打开以后会跳出登录地址，默认的登录密码是adminumami，登录进去以后，设置给自己密码修改了，然后就是设置里面添加网站，给你要统计的网站添加进去，到此，别人访问你的网站你可以通过面板看到统计数据了。

第二部分：Umami+Cloudflare worker

这一部分主要是让你的博客上面能展示的访问数据，效果如下：

　　部署以后，进去点击编辑代码，将里面的代码进行替换：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // 替换你的刚才部署的umami的域名
const TOKEN = 'your_token'; // 获取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加网站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　但是里面有几个比较重要的参数需要修改API_BASE_URL、TOKEN、WEBSITE_ID其中API_BASE_URL和WEBSITE_ID已经是有的，WEBSITE_ID在umami中的设置，选择你已经添加好的网站，点击编辑，会出现网站的WEBSITE_ID：

　　 2.2 获取token，在想api测试网站，hoppscotch，跳转到这个页面以后，如下图所示

　　 2.2.1 请求方式选择post，链接填写方式是：

https://你的umami域名或者是链接/api/auth/login

　　 2.2.2 请求体选择Body参数格式选择application/json

{
 "username":"用户名",
 "password":"密码"
}

　　 2.2.3 返回结果中token里面的内容就是需要的token

{
  "token": "你的token", # 你需要记录下来的内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　到这里，你部署api所需要的所有参数内容都已经有了，给替换进去即可。

　　 2.3 测试在你部署好以后，会有一个链接，当然你如果是用cloudflare代理你的域名，可以直接进行关联。

　　然后点击或则是复制粘贴到浏览器，请求以后会出来下面的结果：

　　如果没有结果，建议你先去你部署的umami面板里面看看有没有数据，有数据的情况下，这里请求都会有数据的，清理浏览器缓存开代理在测试。

第三部分：添加博客统计

　　将数据添加到about页面

tj: # 统计
  provider: custom # custom
  url: 你的数据接口地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

　　配置完成~

　　感谢starsharbor大佬博客的指导，原文

作者原文

作者: Couture 链接: https://www.coutures.top/posts/27233.html 来源: Couture 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Git 同步上游仓库的更新

ZSXの小站 — Fri, 04 Apr 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/git-tongbu/

Git 同步上游仓库的更新

　　使用一个 Github Template 创建了我自己的仓库，需要同步一下补丁更新，总不能自己手抄一遍吧，搜了一下解决方案。

　　记录一下。

添加上游仓库

　　给上游仓库取个名字，如果将命名为 upstream ，可以在本地仓库中运行以下命令：

git remote add upstream https://github.com/$<upstream-repo>.git

获取上游仓库的更改

　　运行以下命令以获取上游仓库中的所有分支和提交：

git fetch upstream

合并上游更改

　　现在，将上游 main 分支的更改合并到您的本地 main 分支：

git merge upstream/main --allow-unrelated-histories

　　如果只需要合并特定的 commit ：

git cherry-pick <commit-hash>

　　也可以使用

gcp <commit-hash>

　　commit-hash 可以直接从 github 网页上复制。

　　这时 commit 的作者是源仓库的作者， Vercel 提示我 Build 失败，需要升级到 Pro，可以再修改一个文件，自己添加一条 commit 。

　　当然这很不优雅，可以使用下面的命令获取更改到文件，但是不会提交 commit ，

git cherry-pick <commit-hash> --no-commit

　　然后手动提交一下

git commit -m "commit information"

解决冲突

　　如何自己已经修改过源代码，在合并过程中可能发生冲突，需要手动解决。
Git 也会进行提示，手动编辑冲突文件并保存，然后再提交更改。

批量提交

git cherry-pick <起始提交>^..<结束提交>

　　如果有冲突会按照顺序处理，然后执行， continue 直到结束

git cherry-pick --continue

<起始提交>：范围的开始点（不包含此提交，除非用 <起始提交>~ 或 <起始提交>^）。
<结束提交>：范围的结束点（包含此提交）。
^ 是 Git 的语法，用于指定“之前的提交”。
.. 表示范围。

推送

git push origin main

　　当然默认来说，并不会推送到新加入的 upstream ，直接 git push 即可

　　如果不再需要同步，可以删除上游的仓库

git remote remove upstream

Markdown 段落语法

ZSXの小站 — Thu, 13 Feb 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/markdown-duanluo/

原文位置: https://markdown.com.cn/basic-syntax/paragraphs.html

Markdown 段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法	HTML	预览效果
`I really like using Markdown.`	`<p>I really like using Markdown.</p>`	I really like using Markdown.
`I think I'll use it to format all of my documents from now on.`	`<p>I think I'll use it to format all of my documents from now on.</p>`	I think I'll use it to format all of my documents from now on.

段落（Paragraph）用法的最佳实践

不要用空格（spaces）或制表符（ tabs）缩进段落。

✅ Do this	❌ Don't do this
`Don't put tabs or spaces in front of your paragraphs.`	`This can result in unexpected formatting problems.`
`Keep lines left-aligned like this.`	`Don't add tabs or spaces in front of paragraphs.`

Markdown-标题语法 | 技术分享

ZSXの小站 — Wed, 12 Feb 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/markdown-biaotiyufa/

原文位置: https://markdown.com.cn/basic-syntax/headings.html

Markdown 标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法	HTML	预览效果
`# Heading level 1`	<h1>Heading level 1</h1>	Heading level 1
`## Heading level 2`	<h2>Heading level 1</h2>	Heading level 2
`### Heading level 3`	<h3>Heading level 1</h3>	Heading level 3
`#### Heading level 4`	<h4>Heading level 1</h4>	Heading level 4
`##### Heading level 5`	<h5>Heading level 1</h5>	Heading level 5
`###### Heading level 6`	<h6>Heading level 1</h6>	Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法	HTML	预览效果
`Heading level 1` `===============`	<h1>Heading level 1</h1>	Heading level 1
`Heading level 2` `---------------`	<h2>Heading level 2</h2>	Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

✅ Do this	❌ Don't do this
`# Here's a Heading`	`#Here's a Heading`

Markdown-速查表

ZSXの小站 — Tue, 11 Feb 2025 00:00:00 GMT

This rendering was automatically generated by Ryuchan Feed and may have formatting issues. For the best experience, please visit: https://boke.zsx815.top/post/markdown-suchabiao/

原文位置: https://markdown.com.cn/cheat-sheet.html#%E6%80%BB%E8%A7%88

总览

Markdown 速查表提供了所有 Markdown 语法元素的基本解释。如果你想了解某些语法元素的更多信息，请参阅更详细的 基本语法 和 扩展语法.

基本语法

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
标题（Heading）	\ # H1 一级标题 \ ## H2 二级标题 \ ### H3 三级标题
粗体（Bold）	bold text
斜体（Italic）	italicized text
引用块（Blockquote）	> blockquote
有序列表（Ordered List）	1. First item 2. Second item 3. Third item
无序列表（Unordered List）	- First item - Second item - Third item
代码（Code）	`code`
分隔线（Horizontal Rule）	—
链接（Link）	[title](https://www.example.com)
图片（Image）	![alt text](image.jpg)

扩展语法

这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
表格（Table）	`\| Syntax \| Description \|` `\| ----------- \| ----------- \|` `\| Header \| Title \|` `\| Paragraph \| Text \|`
代码块（Fenced Code Block）	``` `{` `"firstName": "John",` `"lastName": "Smith",` `"age": 25` `}` ```
脚注（Footnote）	Here’s a sentence with a footnote.`[^1]` `[^1]`: This is the footnote.
标题编号（Heading ID）	\ ### My Great Heading{#custom-id}
定义列表（Definition List）	term : definition
任务列表（Task List）	`- [x] Write the press release` `- [ ] Update the website` `- [ ] Contact the media`

ZSXの小站

为博客添加外链安全跳转中转页

外链安全跳转中转页的实现

功能设计

实现步骤

1. 创建中转页面

2. 创建外链处理脚本

3. 中转页面UI设计

4. 倒计时脚本

遇到的问题及解决方案

1. Astro.url 未定义错误

2. "继续访问"按钮跳转失败

3. 倒计时位置和样式调整

4. 脚本类型和 Astro 脚本处理问题

5. MDX代码块格式问题

效果展示

总结

关于github-issues当做动态的想法

优点

发布说说

前端

Hexo备忘

Hexo 备忘

我的配置

安装 Node.js

安装 Git

常用命令

配置 Git 用户名和邮箱

安装 包管理器

安装 pnpm

安装 Hexo

Github配置

创建仓库

上述是前置条件，接下来要先部署 hexo，你才好继续下一步。

初始化 Hexo

配置

插件

Github action配置

配置 Github Action

重新设置远程仓库和分支

挖坑

Markdown 强调语法

Markdown 强调语法

粗体（Bold）

粗体（Bold）用法最佳实践

斜体（Italic）

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 换行语法

Markdown 换行语法

换行（Line Break）用法的最佳实践

资源分享：涂鹿Toolooz

涂鹿Toolooz：曲线文字绘制设计工具，轻松创建沿任意路径排布的精美文字

网站介绍

截图

特色

自由绘制路径

文本样式丰富

交互式编辑

灵活配置

多格式导出

模板库

应用场景

网站链接

原文链接

来将 Telegram 当音乐播放器吧！

来将 Telegram 当音乐播放器吧！（寻找音乐、即时歌词、无损音乐不失真压缩）

步骤一：到 @music_v1bot 下载歌曲，并找到歌词

步骤二：下载 MT 管理器（点我）

步骤三：最右上角、搜索>勾选正则化，替换（全部替换）

（我是范例-点我查看）

🖥️ 电脑版 dBpowerAMP 下载/教学请点我

拓展

原文链接

DROP：便捷大文件分享与托管网站，免费享10GB空间免费部署

网站简介

截图

功能特色

网站地址

tgtalk免费部署

部署 API

安装包管理器