iTxGo🍃 - xBlog ☼ ☽

edge 控制台测试帧率

// 在控制台执行，查看帧率
(function() {
  let frameCount = 0;
  let lastTime = performance.now();
  
  function countFrames() {
    frameCount++;
    const now = performance.now();
    if (now - lastTime >= 1000) {
      console.log(`FPS: ${frameCount}`);
      frameCount = 0;
      lastTime = now;
    }
    requestAnimationFrame(countFrames);
  }
  
  countFrames();
})();

// 简约精致版 - 只显示数字
(function() {
  const oldDisplay = document.getElementById('fps-console-display');
  if (oldDisplay) oldDisplay.remove();

  const fpsDisplay = document.createElement('div');
  fpsDisplay.id = 'fps-console-display';
  fpsDisplay.style.cssText = `
    position: fixed;
    top: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-family: -apple-system, 'Segoe UI', sans-serif;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 999999;
    user-select: none;
    pointer-events: none;
    min-width: 80px;
    text-align: center;
  `;
  document.body.appendChild(fpsDisplay);

  let frameCount = 0;
  let lastTime = performance.now();
  let fps = 0;

  function updateFPS() {
    frameCount++;
    const now = performance.now();
    const delta = now - lastTime;
    
    if (delta >= 1000) {
      fps = Math.round((frameCount * 1000) / delta);
      
      const color = fps >= 55 ? '#4ade80' : fps >= 30 ? '#fbbf24' : '#f87171';
      fpsDisplay.innerHTML = `
        <div style="font-size: 32px; font-weight: 600; color: ${color}; line-height: 1;">${fps}</div>
        <div style="font-size: 11px; color: rgba(255,255,255,0.3); letter-spacing: 2px; margin-top: 2px;">FPS</div>
      `;
      
      frameCount = 0;
      lastTime = now;
    }
    
    requestAnimationFrame(updateFPS);
  }

  updateFPS();
  console.log('✨ FPS 监控已启动！');
})();

edge 控制台编辑页面

document.body.contentEditable = true

Mac OS OrbStack 1Panel 面板 共享文件权限

sudo chmod -R 777 /opt/1panel/www/sites/xblog

鼠标指针样式 不同 cursor 值对比

内联样式：style="cursor: default;"

esbuild 压缩 CSS JS 工具

esbuild 是一个免费的命令行小工具。它能自动做三件事：去掉注释、去掉多余空格和换行、把局部变量名缩短。它是按规则处理代码，不会像人手改或 AI 改那样出错。

--minify          # 启用代码压缩/最小化，减小产物体积
--sourcemap       # 生成源码映射文件（.map），将压缩代码映射回原始源码以便调试
--outfile         # 将打包结果输出到指定的单个文件

完整命令

这条命令是在你自己的电脑上运行，不是在服务器上。需要先装好 Node.js，装好后依次执行：

npm install -g esbuild

压缩 JS

esbuild script.js --minify --outfile=script.min.js

压缩 CSS

esbuild style.css --minify --outfile=style.min.css

运行后会生成一个 script.min.js、style.min.css，就是压缩后的精简版。

脚本运行：

Windows 新建 build.bat （保存为 ANSI 格式），内容如下：

示例：

@echo off
echo 正在压缩 CSS...
call esbuild style-light.css --minify --outfile=style-light.min.css
echo 正在压缩 JS...
call esbuild script.js --minify --outfile=script.min.js
echo 全部完成
pause

生产备份版：

@echo off
setlocal enabledelayedexpansion

echo 正在遍历压缩当前目录下的 CSS 和 JS 文件...
echo.

if not exist "备份" mkdir "备份"

for %%F in (*.css) do (
    echo 正在压缩 CSS: %%F
    copy /y "%%F" "备份\%%F" >nul
    call esbuild "%%F" --minify --outfile="%%F" --allow-overwrite
)

for %%F in (*.js) do (
    echo 正在压缩 JS: %%F
    copy /y "%%F" "备份\%%F" >nul
    call esbuild "%%F" --minify --outfile="%%F" --allow-overwrite
)

echo.
echo 全部完成（原文件已备份到 备份\ 目录）
pause

Mac 或 Linux 新建 build.sh ，内容如下：

#!/bin/sh
esbuild style-light.css --minify --outfile=style-light.min.css
esbuild script.js --minify --outfile=script.min.js
echo 完成

grep 常用参数用列表说明：

递归与文件匹配

• -r：递归搜索子目录（最常用，全局查找必备）。
• -R：递归搜索，并跟随符号链接（一般用 -r 即可）。
• --include="*.php"：只搜索匹配的文件，例如只查 PHP 文件：--include="*.php"。
• --exclude="*.log"：排除匹配的文件。
• --exclude-dir=cache：排除指定目录，可写多个或用大括号：--exclude-dir={cache,logs,runtime}。

输出内容控制

• -n：显示匹配行的行号。
• -H：显示文件名（递归时默认会显示，单文件时可强制显示）。
• -h：不显示文件名，只显示匹配内容。
• -l：只列出包含匹配的文件名，不显示具体行。
• -L：只列出不包含匹配的文件名。
• -c：只输出每个文件的匹配行数，不显示具体内容。
• -o：只输出匹配到的部分，而不是整行。
• -q：静默模式，找到即返回退出码，不输出内容（适合脚本判断）。
• -m N：每个文件最多匹配 N 行后停止。

匹配规则

• -i：忽略大小写。
• -w：只匹配完整单词（避免 cat 匹配到 category）。
• -v：反向匹配，输出不包含关键字的行。
• -F：把关键字当固定字符串，不解析正则（关键字含 . * [ 等特殊字符时很有用）。
• -E：使用扩展正则表达式（等价于 egrep）。
• -P：使用 Perl 兼容正则（PCRE）。
• -e "模式"：指定多个模式，可重复使用：-e "foo" -e "bar"。

上下文显示

• -A N：显示匹配行后 N 行（after）。
• -B N：显示匹配行前 N 行（before）。
• -C N：显示匹配行前后各 N 行（context），等价于 -A N -B N。

其他实用参数

• --color=auto：高亮匹配内容（很多系统默认已开启）。
• --binary-files=without-match：跳过二进制文件，避免输出乱码。
• -a：把二进制文件当文本处理（一般不推荐）。
• -s：抑制不存在或无权限文件的错误提示。

组合示例

# 全局查关键字，显示行号，忽略大小写，只查 php 文件，排除缓存/日志目录
grep -rni "关键字" /路径/ --include="*.php" --exclude-dir={cache,logs,runtime}

# 只列出包含关键字的文件名
grep -rl "关键字" /路径/

# 显示匹配行前后各 2 行
grep -rn -C 2 "关键字" /路径/

# 关键字含特殊字符，按固定字符串匹配
grep -rnF "a.b[c]" /路径/

PHP 容器中查找关键字：

grep -rn "关键字" sites/xblog/index/ --exclude-dir={cache,logs,runtime}

xdpack 使用文档

简介

xdpack 是一个针对传统 HTML/PHP 网站项目的命令行构建工具。它能安全地解析 .php 文件中的 HTML 部分，压缩 HTML、CSS、JS，并给静态资源加上哈希指纹、自动重写引用链接，适合没有复杂前端构建流程的博客或传统站点一键优化上线。

⚠️ 注意：xdpack 不会压缩 PHP 代码本身，只处理 PHP 文件中的 HTML 部分及前端资源。

环境要求

• 已安装 Node.js（自带 npm）
• Windows 下使用 CMD 或 PowerShell

安装

全局安装：

npm install -g xdpack

不想全局安装时，可用 npx 临时运行（把下文命令中的 xdpack 换成 npx xdpack 即可）。

基本使用

1. 进入项目目录

cd /d D:\blog

/d 参数用于同时切换盘符和目录。

2. 运行压缩

xdpack

默认在当前目录下生成 dist/ 文件夹，存放压缩后的成品。

3. 自定义输出目录名

xdpack blog-dist

成品输出到 D:\blog\blog-dist。

交互选项：文件名哈希格式

运行时会出现提示：

? Choose filename format ...
> original-hash.ext
  original.hash.ext

这是选择带哈希指纹的文件名格式（用于强制浏览器更新缓存）：

选完后，xdpack 会自动改写 HTML/PHP 中引用这些文件的链接。

运行过程输出说明

√ Scanning project...     扫描项目文件
ℹ Found ...               列出识别到的文件数量
ℹ Building...             开始构建
√ Minifying...            压缩 HTML/CSS/JS
√ Copying...              复制资源到输出目录
√ Rewriting...            重写资源引用链接
√ Done                    完成

构建完成后会显示输出目录、各类文件数量和耗时。

验证结果

1. 检查 dist/ 里的 CSS/JS：内容应已压缩（空白、注释被去除），文件名带哈希。

2. 检查 dist/ 里的 PHP 文件：PHP 代码本身不变，但引用的 CSS/JS/图片链接应已变成带哈希的新文件名。

3. 本地测试：

   cd /d D:\blog\dist
   php -S localhost:8080
   

   浏览器访问 http://localhost:8080，确认页面、样式、图片、JS 均正常。

注意事项

• 先备份原项目，或先在副本上试跑，确认无误再替换上线。
• 不要直接在 C 盘根目录等系统盘根目录运行，避免误扫描系统文件；建议把项目放在独立目录（如 D:\blog）。
• xdpack 不压缩 PHP 代码本身。如需减小 PHP 体积，可另用 php-minify、php-compressor 等工具，但收益有限（有 OPcache），且需注意兼容风险。
• 若提示 xdpack 不是内部或外部命令，说明全局安装未生效或 npm 全局路径未加入 PATH，可改用 npx xdpack。

常用命令速查