鸣心Hexohttps://b.wihi.top/img/avatar.pnghttps://b.wihi.top/All rights reserved 2026, 鸣心欢迎访问笔搁纸鸯笔搁纸鸯2026-04-04T12:43:48.000Z鸣心在Hexo-fluid的分类页中增加说明(2)--注入法

之前发过一篇文章：在Hexo-fluid的分类页中增加说明，实现在分类页面增加说明介绍分类，是通过修改主题模板文件实习的，如果后期主题更新还需要手动再次修改，不太方便，这次实现不修改主题源码，数据驱动的内容注入

背景

在使用 Hexo + Fluid 主题时，我需要在分类页（/categories/）顶部添加一个“专栏说明”板块，用于展示不同分类的介绍、图标和自定义颜色。要求：

· 不修改主题源文件（便于后续升级）
· 内容通过配置文件管理（无需改动代码）
· 位置精确（位于分类列表之前）

经过探索，最终采用 Hexo 官方的 after_render:html 过滤器实现。下面分享完整的实现过程。

最终效果参见本站的分类页

一、整体思路

  1. 监听生成事件：使用 after_render:html 过滤器，在每个 HTML 文件生成后执行。
  2. 识别目标页面：判断当前文件路径是否为 categories/index.html。
  3. 注入样式：在 前插入专栏卡片所需的 CSS。
  4. 读取数据：从 source/_data/ 目录下的 YAML 文件中读取专栏配置。
  5. 生成 HTML：遍历数据，生成与主题结构兼容的卡片 HTML。
  6. 插入到正确位置：通过正则匹配分类列表容器（<div class="category-list">），将卡片 HTML 插入其前面。
  7. 返回修改后的内容。

二、具体实现

1. 引入 Font Awesome（可选）

本方案使用 Font Awesome 免费图标库。请确保你的主题已引入 Font Awesome CSS，例如在主题配置或全局布局中添加：

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

如果未引入，也可以在注入脚本中一并注入（见下文脚本注释）。

  1. 创建数据文件

在 source/_data/ 目录下新建：
column_descriptions.yml

1
2
3
4
5
6
7
8
9
10
11
columns:
  - name: "技术随笔"
    subtitle: "编程与开发心得"
    icon: "fas fa-code"
    description: "分享前端、后端、DevOps 等技术实践。"
    color: "#1890ff"
  - name: "生活杂谈"
    subtitle: "日常思考与感悟"
    icon: "fas fa-pen-fancy"
    description: "记录生活中的点滴与读书笔记。"
    color: "#f5222d"

· icon 字段直接填写 Font Awesome 的完整类名（如 fas fa-code）。
· color 用于卡片边框、图标和高亮颜色。

注：name、subtitle、icon、description、color 请根据需求自行调整

  1. 编写注入脚本

在博客根目录创建 scripts/ 文件夹（如果没有），然后新建：
categories-inject.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// scripts/categories-inject.js
const fs = require('fs');
const path = require('path');
const yaml = require('js-yaml');

hexo.extend.filter.register('after_render:html', function(str, data) {
  // 仅处理分类页
  if (data.path !== 'categories/index.html') return str;

  // 1. 注入自定义 CSS
  if (!str.includes('/css/column-cards.css')) {
    str = str.replace('</head>', '<link rel="stylesheet" href="/css/column-cards.css"></head>');
  }

  // 可选：如果主题没有引入 Font Awesome，可以在这里注入
  if (!str.includes('font-awesome')) {
    str = str.replace('</head>', '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"></head>');
  }

  // 2. 读取专栏数据
  const dataPath = path.join(hexo.source_dir, '_data', 'column_descriptions.yml');
  let columns = [];
  if (fs.existsSync(dataPath)) {
    try {
      const content = fs.readFileSync(dataPath, 'utf8');
      const yamlData = yaml.load(content);
      columns = yamlData && yamlData.columns ? yamlData.columns : [];
    } catch (e) {
      console.error('读取专栏数据失败:', e);
    }
  }

  if (!columns.length) return str;

  // 3. 生成专栏卡片 HTML
  const cardsHtml = generateCardsHtml(columns);

  // 4. 插入到分类列表之前（正则匹配 class="category-list" 的 div）
  const categoryListRegex = /<div\s+class="category-list"[^>]*>/i;
  const match = str.match(categoryListRegex);
  if (match) {
    const insertPosition = match.index;
    str = str.slice(0, insertPosition) + cardsHtml + str.slice(insertPosition);
  } else {
    // 回退：插入到 <body> 后
    str = str.replace('<body>', '<body>\n' + cardsHtml);
  }

  return str;
});

// 生成卡片 HTML（适配 Font Awesome）
function generateCardsHtml(columns) {
  let html = '<div class="columns-container">';
  for (const col of columns) {
    const color = col.color || '#1890ff';
    const rgb = hexToRgb(color);
    html += `
      <div class="column-card" style="--column-color: ${color}; --column-color-rgb: ${rgb.join(',')};">
        <div class="card-header">
          <i class="${col.icon || 'fas fa-circle-info'}"></i>
          <div>
            <h3>${escapeHtml(col.name)}专栏</h3>
            ${col.subtitle ? `<p class="subtitle">${escapeHtml(col.subtitle)}</p>` : ''}
          </div>
        </div>
        <div class="card-content">
          <p>${escapeHtml(col.description)}</p>
        </div>
      </div>
    `;
  }
  html += '</div>';
  return html;
}

// 辅助函数：十六进制转RGB
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return [r, g, b];
}

// 辅助函数：HTML转义
function escapeHtml(str) {
  if (!str) return '';
  return str.replace(/[&<>]/g, function(m) {
    if (m === '&') return '&amp;';
    if (m === '<') return '&lt;';
    if (m === '>') return '&gt;';
    return m;
  });
}
  1. 编写卡片样式

在 source/css/ 目录下创建：

column-cards.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* 专栏卡片容器 */
.columns-container {
  display: grid;
  gap: 1.8rem;
  margin: 2rem 0;
}

/* 单个卡片 */
.column-card {
  --column-color: #1890ff;
  --column-color-rgb: 24, 144, 255;
  --hover-color: #40a9ff;

  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid var(--column-color);
  background: linear-gradient(135deg, rgba(var(--column-color-rgb), 0.05), rgba(var(--column-color-rgb), 0.01));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.column-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-left-color: var(--hover-color);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.card-header i {
  font-size: 2rem;
  color: var(--column-color);
}

.card-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--column-color);
}

.subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.card-content p {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

/* 响应式 */
@media (max-width: 768px) {
  .columns-container {
    gap: 1rem;
  }
  .card-header {
    flex-wrap: wrap;
  }
}
  1. 安装依赖

脚本中使用了 js-yaml 解析 YAML 文件，需要安装：

1
npm install js-yaml --save

如果你不想增加依赖，可以将数据文件改为 JSON 格式（column_descriptions.json），然后用 JSON.parse 读取。

  1. 测试
1
hexo clean && hexo generate

打开 public/categories/index.html，检查：

1
2
· <head> 中是否包含 <link rel="stylesheet" href="/css/column-cards.css">
· <div class="category-list"> 之前是否存在 .columns-container 结构

启动本地服务器 hexo server，访问分类页查看效果。

三、总结

通过 after_render:html 过滤器，实现了对 Hexo 主题的完全无侵入式修改：

这种思路不仅适用于 Fluid 主题，也可以推广到任何 Hexo 主题。

附：完整文件结构

1
2
3
4
5
6
7
8
9
your-blog/
├── scripts/
│   └── categories-inject.js      # 注入脚本
├── source/
│   ├── _data/
│   │   └── column_descriptions.yml   # 专栏数据
│   └── css/
│       └── column-cards.css          # 卡片样式
└── (其他Hexo文件)

希望本文可以对你有所帮助

 

鸣心/Write
]]>https://b.wihi.top/posts/2da73f2a.html2026-04-04T12:43:48.000Z本文介绍如何使用注入法在Hexo-fluid的分类页中增加对分类的说明，之后即使主题更新也可以继续使用，如果布局样式无改变无需手动更新在Hexo-fluid的分类页中增加说明(2)--注入法2026-04-04T12:43:48.000Z鸣心通过Cloudflare Workers API部署项目

在cloudflare部署Workers项目的项目的时候，有代码要改动，用那个网页控制台太过于卡顿，非常不方便。但是termux又不支持Wrangler所以考虑使用API

准备

获得账号ID与API的Token：

  1. Account ID：登录 Cloudflare Dashboard → 右侧边栏找到（或者进去某个域，然后下滑就可以看到账号ID了）
  2. API Token：My Profile → API Tokens → Create Token（选择 Edit Cloudflare Workers 模板）

如果实在找不到，可以参考我的这篇文章自动删除Cloudflare域名缓存脚本中关于找到账号ID与生成API的Token的方法。

找到你Works的名称以及相关绑定的名称

  1. 获得完整的Workers名字如xxx-xxx-xxx或者你自己起的什么名字
  2. 如果绑定R2，获得存储桶完整名字
  3. 如果绑定KV，获得KV-ID（注意是ID不是名称）
  4. 如果还有其他绑定请查询官方文档

开始干活

这里绑定只展示同时绑定R2和KV，其他绑定请自行查阅官方文档，当然如果你没任何绑定那么请忽略本提示

准备文件

在一个空目录里面，依次生成如下文件

metadata.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "main_module": "worker.js", //入口文件
  "bindings": [  //配置的绑定，如果没有请设置写为空内容，如"bindings": []
    {
      "type": "kv_namespace",
      "name": "绑定后变量名",
      "namespace_id": "你的KVID"
    },
    {
      "type": "r2_bucket",
      "name": "绑定后变量名",
      "bucket_name": "你的R2存储桶名"
    }
  ]
}

push.sh

1
2
3
4
5
6
7
8
9
10
11
#!/bin/bash
export CF_ACCOUNT_ID="你的ID"
export CF_API_TOKEN="你的Token"
WORKER_NAME="你的Worker名字"
ENTRY_FILE="worker.js"

# 部署
curl -X PUT "https://api.cloudflare.com/client/v4/accounts/$CF_ACCOUNT_ID/workers/scripts/$WORKER_NAME" \
  -H "Authorization: Bearer $CF_API_TOKEN" \
  -F "metadata=@metadata.json;type=application/json" \
  -F "$ENTRY_FILE=@./$ENTRY_FILE;type=application/javascript+module"

worker.js

1
//遵循ES模块规范（EMS格式）的程序

执行

在终端cd进入你放置刚刚那些文件的目录，输入如下内容

1
bash push.sh

等待执行即可，如果成功将会返回类似于如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "result": {
    "created_on": "2026-03-15T01:45:23.343582Z",
    "modified_on": "2026-03-28T23:39:57.342352Z",
    "id": "xxx",
    "tag": "xxx",
    "entry_point": "worker.js",
    "tags": null,
    "deployment_id": "xxx",
    "tail_consumers": null,
    "logpush": false,
    "has_assets": false,
    "has_modules": true,
    "etag": "xxx",
    "handlers": [
      "fetch"
    ],
    "last_deployed_from": "api",
    "usage_model": "standard",
    "startup_time_ms": 0
  },
  "success": true,
  "errors": [],
  "messages": []
}

如果失败请自行根据提示排查问题

结束语

希望这些内容可以帮到你，理论上这些文件名都可以修改，但是修改后注意与变量的修改

 

鸣心/Write
]]>https://b.wihi.top/posts/6ea50ca0.html2026-04-04T11:05:21.000Z本文提供了使用Cloudflare Workers API部署Workers项目的方案，适用于不想在网页部署项目，或者不想/无法使用Wrangler的情况通过Cloudflare Workers API部署项目2026-04-04T11:05:21.000Z鸣心NoMachine客户端 不断创建tray monitor进程解决办法

原因：在使用NoMachine连接香橙派远程客户端的过程中，发现电脑越来越卡顿，打开进程管理器发现，其不断创建了大量tray monitor进程从而占用大量资源导致电脑卡顿。

tray monitor大量占用进程

去NoMahine官网查询找到了解决方案：NoMachine Tray Monitor processes open constantly on Windows （UTF-16 unicode）
 这里进行记录

解决方案

根据NoMachine官方提供的解决方案是启用系统的“Beta: 使用 Unicode UTF-8 提供全球语言支持”功能。

详细步骤如下：

  1. 打开控制面板
    · 在开始菜单中搜索并打开 “控制面板”。
  2. 进入区域设置
    · 在控制面板中，找到并点击 “时钟和区域”。
    · 然后点击 “区域”。
  3. 进入管理选项
    · 在弹出的“区域”窗口中，切换到 “管理” 选项卡。
    · 点击 “更改系统区域设置…” 按钮。
    · 注意：你可能需要提供管理员权限或确认 UAC 提示。
  4. 启用 UTF-8 支持
    · 在“区域设置”窗口中，找到底部的复选框：
    “Beta 版：使用 Unicode UTF-8 提供全球语言支持”。
    · 勾选 此复选框。
    · 点击 “确定”。
  5. 重启计算机
    · 系统会提示你需要 重启计算机 以使更改生效。重启后即可生效

我认为该解决方案的思路是：软件可能不兼容utf-16的环境，导致tray monitor进程无法完成初始化从而不断创建进程，而更改为utf-8环境后，使得初始化可以正常完成。

注意：如此更改可能会导致系统内一些非常老旧的不支持Unicode的程序出现问题

吐槽：根据官方回应，预计在8.x版本修复，可是我使用的是9.x版本，迄今为止仍然出现该问题

另：在寻找解决方案过程中发现也有人遇到了这个问题，发现删除了不断创建该进程的bin文件也可以解决不断创建进程问题，并且远程功能不受影响。我不太清楚其中原理，如果你的系统因为某些原因不支持切换utf-8环境或许可以试试。

 

鸣心/Write
]]>https://b.wihi.top/posts/4f461c7a.html2026-01-17T04:00:00.000Z记录解决在windows10系统下，NoMachine客户端启动后不断创建进程占用系统资源，使得电脑卡顿死机的问题。解决方案为启用系统的使用 Unicode UTF-8 提供全球语言支持功能NoMachine客户端 不断创建tray monitor进程解决办法2026-01-17T04:00:00.000Z鸣心辞旧迎新：再见2025，你好2026

  2026的钟声准时响起，清脆嘹亮。标志着2025的结束与2026年的开始。在这里，我将要总结2025年的收获，发出对2026年的展望。
  2025年，迎来了人生中多个第一次：人生中第一次具有重要意义的考试；启动了人生中第一块开发板；点亮了人生中第一个由自己控制的灯带...那一个个或忐忑，或迷茫，或激动的瞬间，一个个难忘、自豪的瞬间，记忆犹新。它们既是成长的里程碑，也是人生之路上的重要转折点，使我成长，使我得到了新的收获。
  2025年，我收获颇丰，可能因为一次失去，因为对于未来的期待，亦或是青春期带来的独立思考，使我渐渐对未来，对自己，有了更为深入的思考。因为长期不断对未知的探索，使我的技术不断深入与提高，即使提高的是那样微不足道。下面，我将进一步表达我对未来与自己的思考。
  人，一撇一捺。只有那么长，只有那么大，每个都长的一样，没有什么特别。意义，取决于书写一撇一捺时的力度、锋度。一生中可活的时间只有那么多，之后便会化作灰烬，随风飘散。意义，可能就显得有些耀眼，可仅仅如此罢了，也没有什么再过人之处了，只是对自己有了一个交代罢了。我通过不断的思考，我想明白了一点，我追求的意义是有善意的创造，写个程序实现我的想法，设计个网页，让它看起来很酷，从中得来的及时反馈，使我欢呼雀跃，但是那总是不太够。于是我对未来有了一个具体而明确未来目标，去获得更好的资源，做更优秀，更有善意的创造。考大学，考中我想去的专业。为什么我要强调有善意呢，善意代表着温度，可以温暖他人与自我，服务于人。2025年里，我立下了对于未来明确的目标，这是最大的收获。
  2025年我对人的社会也有些思考，众人，多个人组成了一个社会，每个人的书写方式都不完全相同，每个人都独一无二，都有力度，锋度。在城市间穿梭的穿着外卖员制服的人；在每个晨光微露的时刻便开始做早餐的人；坐在办公室盯着电子屏幕的人。都是鲜活而平等的生命，在人格上无高下之分。如果用收入差距去衡量一个人，等同于用尺子衡量风的长度，滑稽且无任何意义。我想要强调的是，在这片土地，尤其是我们所提倡的价值观中，人人本就平等。怎么活，怎么想，取决于自己，不要尝试做一些愚蠢的事情，去做一些滑稽而毫无意义的比量。
  对于人生的意义，每个人都不相同，或许有些人没找到，但那并不意味着失去了什么，反而那也是一种意义。但请不要过于功利，陷入对单一目标的盲目追求。因为那很可能是一个无底的深渊，恳请在追逐岸的同时，仰起头，看看那一颗颗繁星，宇宙浩瀚而博大，繁星或许也是个不错的选择。在当今这个充满功利的社会中，请不要忘记，人生的意义不至于此，不要被一叶所障目。
  2025年，我点亮了人生中第一块灯带——WS2812B，通过编写驱动ESP32的程序代码，指挥ESP32操控它。这个项目，对我而言意味着打通了从虚拟世界到物理世界的通路，让我更为深刻的感受到了创造的快乐与价值。因此，我欢呼雀跃，难以忘却。标志着我的技术路进入了一个新的阶段。
  2026年，像一张白纸，充满希望与未知，每一个符号，每一个笔迹，都取决于脚下的行动。在今年，我将要在如下几个方面进行重点深入发展。

  • 1.知识体系上：针对数学知识进行深入学习，深入了解数学原理，具体知识内容从高中课本到其所对应的应用数学相关内容。深入强化人文素养，提升人文关怀能力，写作能力。加强英语学习，使高中学业英语成绩保持优秀。

  • 2.技术能力上：系统学习并且掌握Python，以及其相关常用模块与的使用，独立完成构建个人编程工具库。入门习TML/CSS/JavaScript开发。落实Linux熟练操作系统与基本了解系统学习计算机系统工作详细机制。

  • 3.在个人方面，坚持锻炼与规律作息，进一步深化对未来的发展目标与行动路线，为高考做准备，努力争取获得优秀社会跳板资格。

  辞旧迎新，2025再见，我收获颇丰。你好2026，我已准备就绪！

 

鸣心/Write
]]>https://b.wihi.top/posts/feaf11ab.html2026-01-01T13:02:00.000ZCarrazll对于2025年的收获与总结，包含有对2025人生思考与成果总结。对于2026年新的展望与未来目标，2026元旦辞旧迎新。辞旧迎新：再见2025，你好20262026-01-01T13:02:00.000Z鸣心二进制学习笔记

引言

二进制是数学的计数法之一,由0与1组成是其基本特征.由于计算机的逻辑门工作方式故该计数法多用于计算机领域,学习二进制,有助于理解字符在计算机中的识别以及存储等

定义

其基本定义为: 满2进1

由0,1组成

基数为2

  • 10转2：
    $$N_{10} \rightarrow \text{除2取余，逆序排列} \rightarrow (d_{k-1}...d_0)_2$$

  • 2转10：
    将二进制数的每一位乘以其对应的位权（$2^n$），然后将所有乘积相加。
    $$N_{10} = d_{n-1} \times 2^{,n-1} + \cdots + d_1 \times 2^{,1} + d_0 \times 2^{,0}$$

举例

示例：将 29 转换为二进制

计算步骤商余数说明
29 ÷ 2141(最低位)
14 ÷ 270
7 ÷ 231
3 ÷ 211
1 ÷ 201(最高位)

逆序排列余数（从下往上读）：11101

示例：将 1101 转换为十进制

二进制位1101
位权 (2^n)2³ = 82² = 42¹ = 22⁰ = 1
计算 (位 × 位权)1 × 8 = 81 × 4 = 40 × 2 = 01 × 1 = 1

求和：8 + 4 + 0 + 1 = 13

在计算机中应用

一个0或1称为1bit,计算机中以8bit为1byte

二进制标识符0b

补充：

2进制多转换为16进制，因为$2^4 =16$，其中二进制与16进制可以相互转换，故计算机中多用16进制表示，例如内存地址中就用16进制标记位置

十六进制与二进制同理，0-9A-F表示10进制的0-15，A-F表示10-15

16进制标志符：0x

 

鸣心/Write
]]>https://b.wihi.top/posts/ba7e9a6a.html2025-11-16T04:00:00.000Z学习二进制基础知识，理解二进制的定义、与十进制的转换方法（含公式与实例），并了解其在计算机中的应用原理。二进制学习笔记2025-11-16T04:00:00.000Z鸣心WS2812B灯带项目

刷B站偶然间看到了用电脑控制WS2812B显示各种图案，对此非常感兴趣，于是通过查资料，AI等实现了本项目，项目化驱动学习。

项目概述

本项目基于ESP32的实现智能WS2812B RGB灯带控制，主要是通过该项目学习电路，单片机等相关知识

设计思路分析

  1. 硬件架构设计思路

安全第一的设计理念

· 采用电平转换器解决3.3V ESP32与5V WS2812B的通信兼容性问题
· 通过220Ω电阻保护数据信号线，防止电流冲击
· 严格的共地(GND)设计，确保信号稳定性
· 外部独立供电方案，避免USB供电不足和潜在风险

模块化连接策略

· 电源模块：5V5A外部电源 → 定制线 → 灯带供电
· 控制模块：ESP32 → 电平转换 → 灯带数据控制
· 信号调理：串联电阻优化信号质量
· 灵活扩展：面包板设计便于调试和扩展

  1. 软件架构设计思路

分层式程序设计

· 底层驱动层：FastLED库提供硬件抽象
· 核心逻辑层：模式管理和动画算法
· 用户交互层：串口命令解析和反馈
· 效果展示层：多种预设灯光模式

状态机设计模式

· 定义8种独立灯光模式，每种模式有专属的状态管理
· 统一的模式切换接口，支持热切换
· 参数持久化设计，保持用户设置

材料准备

  1. WS2812B灯带1条(30灯珠,品牌:btf lighting)

  2. ESP32(WROOM-32E,品牌:源地工作室)

  3. 三种杜邦线若干(共对共,母对母,共对母)

  4. 面包板

  5. 3.3v 5v电平逻辑转换器

  6. 5V5A DC电源(内正外负)

  7. 特殊定制线(一端DC插座,内正外负,一端分为两正负:裸线正负+杜邦公头正负)

  8. 快速接线端子

  9. 220R电阻x1

  10. 一根USB-A to USB-C 数据线

电路连接

电路连接遵循 共地(GND) 原则,并且注意单片机供电不得同时接入多个外部电源输入,否则极有可能烧毁电脑主板，并且在没有连接好的情况下，绝对不可以接电源，否则可能触电！

graph TD    A[开始连接WS2812电路] --> B[材料准备]    B --> C[电源部分连接]    B --> D[面包板线路布置]    B --> E[信号线路连接]    C --> C1[5V5A DC电源]    C1 --> C2[连接定制线<br>DC插座端]    C2 --> C3[定制线裸线端<br>通过快速接线端子<br>连接灯带电源正负]    D --> D1[定制线杜邦头<br>连接面包板正负轨道]    D1 --> D2[正轨道引线到<br>逻辑转换器HV VCC]    D1 --> D3[负轨道三根线分别连接:]    D3 --> D4[ESP32GND]    D3 --> D5[逻辑转换器LV GND]    D3 --> D6[逻辑转换器HV GND]    E --> E1[ESP32 GPIO4<br>连接逻辑转换器A1通道]    E1 --> E2[逻辑转换器B1通道<br>串联220R电阻]    E2 --> E3[连接到灯带数据端<br>3pin中间引脚]    E --> E4[ESP32 USB连接电脑<br>供电和数据通讯]    E4 --> E5[ESP32 3.3V输出<br>连接逻辑转换器LV VCC]    C3 --> F[电路连接完成]    E3 --> F    E5 --> F    F --> G[开始编程控制]    %% 样式定义    classDef power fill:#f9f,stroke:#333,stroke-width:2px;    classDef logic fill:#ccf,stroke:#333,stroke-width:2px;    classDef signal fill:#9f9,stroke:#333,stroke-width:2px;    classDef complete fill:#ff9,stroke:#333,stroke-width:3px;    class C1,C2,C3 power;    class D2,D5,D6,E5 logic;    class E1,E2,E3 signal;    class F complete;

补充

如果你考虑不接电脑,那么可以 拔掉USB与电脑相接的线后,然后在从电源轨道引出一根公对母杜邦线和ESP32的5V的GPIO相连接.

程序烧录

烧录方法

我采用Arduino IDE进行本项目程序编写与烧录

  1. 去Arduino IDE官网下载最新的IDE

  2. 在File-preference中下滑找到语言选项，选择中文（据说此功能仅限2.x版本）

  3. 在文件-首选项中下滑在下面的项目链接，添加：

1
https://jihulab.com/esp-mirror/espressif/arduino-esp32/-/raw/gh-pages/package_esp32_index_cn.json

这个链接是乐鑫官方文档中提供的镜像版本，更多内容可以参考文档，切换该文档可以有效解决安装工具链和库的时候无法访问github无法安装的问题。

  1. 在工具-开发板-开发板管理器顶部输入esp32，找到由 Espressif Systems 提供的 ESP32 项目。建议安装最新版，如果你用的上面的链接，可能还会有-cn版本，建议安装此版本。

  2. 选择开发板：点击 工具 (Tools) > 开发板 (Board)。在弹出的列表中，找到 ESP32 Arduino 分类。这里有很多具体的型号。如果您不确定，一个通用且安全的选择是 ESP32 Dev Module。

  3. 选择端口：将您的 ESP32 通过 USB 线连接到电脑。点击 工具 (Tools) > 端口 (Port)。选择一个新出现的端口。在 Windows 上通常是 COMx（如 COM3），在 Mac 上是 /dev/cu.usbmodem...。

7.然后写入你的代码，然后点击验证，如果编译通过了，然后再点上传即可。（首次编译可能较慢）

  1. 然后重新上电或者摁复位键，ESP32就会开始工作，你的灯带就会亮起来～哦耶

代码分享：

针对30个灯珠并使用GPIO4，WS2812控制代码。这个代码包含多种灯光模式，可以通过串口命令切换。

硬件连接

WS2812 灯带 ESP32 开发板
VCC (5V) 5V 引脚
GND GND 引脚
DIN (数据线) GPIO 4

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
#include <FastLED.h>

// LED配置
#define LED_PIN     4     // 数据线连接到GPIO4
#define NUM_LEDS    30    // 30个灯珠
#define BRIGHTNESS 100    // 初始亮度 (0-255)
#define LED_TYPE    WS2812
#define COLOR_ORDER GRB   // WS2812的颜色顺序

// 定义LED数组
CRGB leds[NUM_LEDS];

// 模式定义
#define MODE_RAINBOW    0
#define MODE_THEATER    1
#define MODE_CONFETTI   2
#define MODE_SOLID      3
#define MODE_BREATH     4
#define MODE_RAIN       5
#define MODE_FIRE       6
#define MODE_COMET      7
#define NUM_MODES       8

// 全局变量
uint8_t currentMode = MODE_RAINBOW;
uint8_t gHue = 0; // 彩虹色调
uint8_t currentBrightness = BRIGHTNESS;
CRGB solidColor = CRGB::Blue; // 纯色模式的默认颜色

void setup() {
  Serial.begin(115200);
  delay(1000); // 等待串口初始化
  
  Serial.println("=== ESP32 WS2812 控制器 ===");
  Serial.println("连接信息:");
  Serial.println("- GPIO: 4");
  Serial.println("- 灯珠数量: 30");
  Serial.println("- 当前模式: 彩虹");
  Serial.println();
  Serial.println("串口命令:");
  Serial.println("0-7: 切换模式 (0=彩虹, 1=跑马灯, 2=五彩纸屑, 3=纯色, 4=呼吸, 5=下雨, 6=火焰, 7=彗星)");
  Serial.println("b100: 设置亮度为100");
  Serial.println("r/g/b: 纯色模式切换颜色");
  Serial.println("----------------------------");

  // 初始化FastLED
  FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
  FastLED.setBrightness(currentBrightness);
  
  // 初始显示一个启动动画
  startupAnimation();
}

void loop() {
  // 检查串口命令
  checkSerialCommands();
  
  // 根据当前模式执行相应的动画
  switch(currentMode) {
    case MODE_RAINBOW:
      rainbow();
      break;
    case MODE_THEATER:
      theaterChase();
      break;
    case MODE_CONFETTI:
      confetti();
      break;
    case MODE_SOLID:
      solid();
      break;
    case MODE_BREATH:
      breath();
      break;
    case MODE_RAIN:
      rain();
      break;
    case MODE_FIRE:
      fire();
      break;
    case MODE_COMET:
      comet();
      break;
  }
  
  FastLED.show();
  // 每种模式有自己的延时控制，这里不需要额外延时
}

// === 模式函数 ===

// 彩虹模式
void rainbow() {
  fill_rainbow(leds, NUM_LEDS, gHue, 7);
  EVERY_N_MILLISECONDS(20) {
    gHue++;
  }
}

// 跑马灯模式
void theaterChase() {
  static uint8_t j = 0;
  
  // 将所有LED设置为暗
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  
  // 每隔3个LED设置一个亮起的LED
  for(int i = 0; i < NUM_LEDS; i = i + 3) {
    leds[(i + j) % NUM_LEDS] = CHSV(gHue, 255, 255);
  }
  
  EVERY_N_MILLISECONDS(100) {
    j = (j + 1) % 3;
    gHue++;
  }
}

// 五彩纸屑模式
void confetti() {
  // 淡出所有LED
  fadeToBlackBy(leds, NUM_LEDS, 10);
  
  // 随机位置添加彩色点
  int pos = random16(NUM_LEDS);
  leds[pos] += CHSV(gHue + random8(64), 200, 255);
  
  EVERY_N_MILLISECONDS(30) {
    gHue++;
  }
}

// 纯色模式
void solid() {
  fill_solid(leds, NUM_LEDS, solidColor);
}

// 呼吸灯模式
void breath() {
  uint8_t breath = (exp(sin(millis() / 2000.0 * PI)) - 0.36787944) * 108.0;
  fill_solid(leds, NUM_LEDS, CHSV(gHue, 255, breath));
  
  EVERY_N_SECONDS(10) {
    gHue += 32;
  }
}

// 下雨模式
void rain() {
  // 所有LED向下移动并淡出
  for(int i = 0; i < NUM_LEDS - 1; i++) {
    leds[i] = leds[i + 1];
    leds[i].fadeToBlackBy(20);
  }
  
  // 随机在顶部添加新的雨滴
  if(random8() < 50) {
    leds[NUM_LEDS - 1] = CHSV(160, 200, 255); // 蓝色雨滴
  } else {
    leds[NUM_LEDS - 1] = CRGB::Black;
  }
  
  delay(50);
}

// 火焰效果
void fire() {
  // 热源在底部
  for(int i = 0; i < NUM_LEDS; i++) {
    // 温度从底部到顶部递减
    int temperature = map(i, 0, NUM_LEDS - 1, 255, 0);
    temperature = qsub8(temperature, random8(0, 80));
    
    // 将温度转换为火焰颜色 (红->黄->白)
    if(temperature > 200) {
      leds[i] = CRGB(255, 255, 255); // 白色核心
    } else if(temperature > 150) {
      leds[i] = CRGB(255, 255, 0);   // 黄色
    } else if(temperature > 100) {
      leds[i] = CRGB(255, 100, 0);   // 橙色
    } else {
      leds[i] = CRGB(255, 0, 0);     // 红色
    }
    
    leds[i].nscale8_video(temperature);
  }
  
  // 随机闪烁
  for(int i = 0; i < 3; i++) {
    int flicker = random8(NUM_LEDS / 3);
    leds[flicker] += CRGB(50, 25, 0);
  }
  
  delay(30);
}

// 彗星效果
void comet() {
  static int cometPosition = 0;
  
  // 淡出所有LED
  fadeToBlackBy(leds, NUM_LEDS, 30);
  
  // 绘制彗星头部 (最亮)
  leds[cometPosition] = CHSV(gHue, 255, 255);
  
  // 绘制彗星尾巴
  for(int i = 1; i < 8; i++) {
    int pos = cometPosition - i;
    if(pos >= 0) {
      leds[pos] = CHSV(gHue, 255, 255 - (i * 32));
    }
  }
  
  EVERY_N_MILLISECONDS(50) {
    cometPosition = (cometPosition + 1) % NUM_LEDS;
    if(cometPosition == 0) {
      gHue += 32; // 每次循环完成改变颜色
    }
  }
}

// === 辅助函数 ===

// 启动动画
void startupAnimation() {
  // 从中间向两边展开
  for(int i = 0; i <= NUM_LEDS / 2; i++) {
    int left = (NUM_LEDS / 2) - i;
    int right = (NUM_LEDS / 2) + i;
    
    if(left >= 0) leds[left] = CRGB::Green;
    if(right < NUM_LEDS) leds[right] = CRGB::Green;
    
    FastLED.show();
    delay(30);
  }
  
  // 彩虹扫描
  for(int i = 0; i < NUM_LEDS; i++) {
    leds[i] = CHSV(i * 8, 255, 255);
    FastLED.show();
    delay(20);
  }
  
  // 清空
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  FastLED.show();
  delay(500);
}

// 检查串口命令
void checkSerialCommands() {
  if(Serial.available() > 0) {
    String command = Serial.readString();
    command.trim();
    
    if(command.length() > 0) {
      char cmd = command.charAt(0);
      
      // 模式切换 (0-7)
      if(cmd >= '0' && cmd <= '7') {
        uint8_t newMode = cmd - '0';
        if(newMode != currentMode) {
          currentMode = newMode;
          Serial.print("切换到模式: ");
          Serial.println(newMode);
          printModeName(newMode);
        }
      }
      // 亮度设置 (b100)
      else if(cmd == 'b' || cmd == 'B') {
        int brightnessValue = command.substring(1).toInt();
        if(brightnessValue >= 0 && brightnessValue <= 255) {
          currentBrightness = brightnessValue;
          FastLED.setBrightness(currentBrightness);
          Serial.print("亮度设置为: ");
          Serial.println(currentBrightness);
        }
      }
      // 纯色模式颜色切换
      else if(currentMode == MODE_SOLID) {
        switch(cmd) {
          case 'r': case 'R':
            solidColor = CRGB::Red;
            Serial.println("颜色: 红色");
            break;
          case 'g': case 'G':
            solidColor = CRGB::Green;
            Serial.println("颜色: 绿色");
            break;
          case 'b': case 'B':
            solidColor = CRGB::Blue;
            Serial.println("颜色: 蓝色");
            break;
          case 'w': case 'W':
            solidColor = CRGB::White;
            Serial.println("颜色: 白色");
            break;
          case 'y': case 'Y':
            solidColor = CRGB::Yellow;
            Serial.println("颜色: 黄色");
            break;
          case 'p': case 'P':
            solidColor = CRGB::Purple;
            Serial.println("颜色: 紫色");
            break;
        }
      }
    }
  }
}

// 打印模式名称
void printModeName(uint8_t mode) {
  switch(mode) {
    case MODE_RAINBOW:  Serial.println("彩虹循环"); break;
    case MODE_THEATER:  Serial.println("跑马灯"); break;
    case MODE_CONFETTI: Serial.println("五彩纸屑"); break;
    case MODE_SOLID:    Serial.println("纯色"); break;
    case MODE_BREATH:   Serial.println("呼吸灯"); break;
    case MODE_RAIN:     Serial.println("下雨效果"); break;
    case MODE_FIRE:     Serial.println("火焰效果"); break;
    case MODE_COMET:    Serial.println("彗星效果"); break;
  }
}

使用说明

  1. 上传代码

· 确保已正确安装 ESP32 开发板和 FastLED 库
· 选择正确的开发板（如 ESP32 Dev Module）和端口
· 点击上传

  1. 串口控制命令

打开串口监视器（波特率115200），发送以下命令：

模式切换：

· 0 - 彩虹循环
· 1 - 跑马灯
· 2 - 五彩纸屑
· 3 - 纯色模式
· 4 - 呼吸灯
· 5 - 下雨效果
· 6 - 火焰效果
· 7 - 彗星效果

亮度控制：

· b50 - 设置亮度为50
· b150 - 设置亮度为150
· b255 - 设置亮度为255（最亮）

纯色模式颜色切换：

· r - 红色
· g - 绿色
· b - 蓝色
· w - 白色
· y - 黄色
· p - 紫色

  1. 电源注意事项

30个WS2812灯珠全白最亮时功耗约 30 × 0.06A × 5V = 9W，建议使用外部5V电源供电，并将外部电源的GND与ESP32的GND连接。

这个代码提供了丰富的灯光效果和完整的控制功能，您可以通过串口实时切换模式和调整参数。

写在最后

本文篇用于记录本次WS2812B项目经过，如有不妥，请见谅。

]]>https://b.wihi.top/posts/addc03d1.html2025-10-19T04:00:00.000Z本文记录了WS2812B灯带项目设计思路以及过程，通过本次项目，学习如何使用Arduino IDE ，ESP32，WS2812B，电路设计等，项目化驱动学习WS2812B灯带项目2025-10-19T04:00:00.000Z鸣心启动，人生中第一块开发板！

在一次网上浏览时，我偶然发现了‘开发板’这个概念。经过一段时间的学习和研究，我最终选择购买一块香橙派（Orange Pi）SBC（单板计算机），作为我个人的‘电子实验室’。

引言

SBC 的全称是 Single-Board Computer，中文叫做 ‘单板计算机’。

顾名思义，它就是将一台完整计算机的所有核心部件（处理器、内存、输入/输出接口等）都集成在一块电路板上的微型电脑。它不像我们日常用的台式机那样由多个独立硬件组成，而是所有的功能都浓缩在了这一张‘板子’上。

因为它高度集成、体积小巧、价格亲民的特性，所以我选择以它作为我的电子实验室，而不是我家电脑。

这里我使用的开发板型号为：香橙派5ultra，下文所讲述的内容都以这个开发板的使用为基础。

（或许你会问：为什么不买树莓派？答：买的时候不知道树莓派生态的强大，但是香橙派有丰富的手册，可以实现我跑代码的需求）

准备

硬件

  1. USB to USB公对公数据线 x1（用来烧录系统，当然也可以用串口，详细操作查看手册）

  2. 5v5a电源适配器 x1（给板子供电）

  3. 一个存储介质（这里我选择的铠侠SSD M.2280 PCle Gen3x4 不同存储介质有不同的烧录方法，详细查看手册）

  4. 一些散热措施：风扇，散热片等

软件

  1. 一个要刷的系统的镜像（建议使用香橙派官方提供的镜像）

  2. 烧录软件和驱动（详细查看手册）

启动

烧录

根据手册提示，我使用SSD烧录，板子插上SSD，板子USB烧录口（手册中有，一个TYPE-A口）和电脑连接。然后摁住MaskROM后上电，上电后松手即可进入烧录模式。

然后根据手册内容进行烧录即可，烧录后系统会自动启动。

这里补充一下：如果烧录的这个系统不满意，可以根据手册提示操作清空SPIFLASH后重新烧录新的系统，重新烧录会自动清空磁盘中的数据，所以不用担心冲突等问题（在磁盘未分区的情况下）

进入系统

烧录完毕后系统会自动启动，这里我刷的是Ubuntu，可以用SSH控制，但是刚刚烧录需要进入系统配网。

配网可以接入一个显示器（hdmi输出口，可以直接插家里电视上就好），然后根据提示操作即可，默认密码是orangepi。

手册说也可以串口控制，我没试过，但是应该是可以的。

另外：由于贫困，买不起显示器，于是买了一个HDMI采集器，把家里笔记本电脑变成显示器也是可以的。当然如果家里有废旧显示器，可能是VGA口，买一根hdmi转VGA就好了。

更多玩转技巧

更多使用技巧手册中都有提供，例如查看CPU温度等指令。

我刷的是Ubuntu，这里记录一些常用操作：

1. 重命名主机名

1
sudo hostnamectl set-hostname new-hostname

new-hostname就是新的主机名

hosts文件可能也有残留旧主机名的记录，sudo nano /etc/hosts进去然后把旧主机名改成新的

2. 修改密码

passwd

根据提示输入即可，passwd后门可以跟一个用户名

3.SSH禁止root登录和修改登录端口

进入/etc/ssh/sshd_config文件中，把以下选项设置为no

1
PermitRootLogin no

可能该选项是yes或者被注释了，如果被注释就删掉注释符号然后改为no

把以下选项端口改为其他端口，范围0-65535

1
Port 56789 # 示例端口，请换成你自己的

你需要确保修改的端口没程序占用，并且你的防火墙允许了该端口（如果有防火墙）

4. 更换shell为zsh

安装

1
sudo apt update && sudo apt install zsh

切换

1
chsh -s $(which zsh)

以下为AI代为总结的zsh介绍和使用

好的，这是一份为你精心整理的 Zsh 终极总结，从介绍、使用到玩转，带你全面了解这款终端效率神器。

一、 Zsh 是什么？ (Introduction)

· 定位：Zsh (Z Shell) 是一个功能强大的 Linux/Unix 命令行解释器（Shell）。它被设计为 Bash (Bourne-Again Shell) 的增强替代品，兼容 Bash 的同时，提供了大量开箱即用的高级功能。
· 核心目标：提升用户在命令行环境下的效率、体验和美观度。
· 历史：诞生于 1990 年，经过多年发展，凭借 Oh My Zsh 框架的出现，成为最受欢迎的 Shell 之一。
· 与 Bash 的关系：可以理解为 Bash 的“超级进化版”。Bash 稳定通用，Zsh 则更智能、更易定制。

二、 为什么要用 Zsh？ (The "Why")

与 Bash 对比，其核心优势在于：

  1. 智能补全：不只是文件名，更能补全命令选项、参数、路径、甚至进程名。按 Tab 的次数减少 80%。
  2. 主题系统：提示符 (Prompt) 变身信息中心，可直观显示 Git 分支、状态、错误码、路径等，无需反复输入 pwd, git status 等命令。
  3. 插件生态：通过插件轻松添加新功能，如语法高亮、命令自动建议，让终端变得“会思考”。
  4. 全局历史：所有终端窗口共享并即时同步命令历史，在一个窗口输入的命令，在另一个窗口按 ↑ 立刻能找到。
  5. 拼写纠正：自动提示并纠正输错的目录名和命令。

三、 Oh My Zsh 是什么？与 Zsh 的关系

这是最容易混淆的概念，必须厘清：

· Zsh：是引擎，是核心程序本身。没有配置的 Zsh 非常强大但难以驾驭。
· Oh My Zsh：是一个社区驱动的配置管理框架。它不是 Shell，而是一套庞大的配置文件、主题和插件的集合，并提供了便捷的管理工具。
· 完美比喻：
· Zsh = 安卓原生系统 (强大但简陋)
· Oh My Zsh = 小米 MIUI / 三星 One UI (对原生系统进行深度美化，提供应用商店、主题商店)
· 主题 = 手机主题皮肤
· 插件 = 安装在系统上的 App

Oh My Zsh 的意义在于，它让普通人也能通过简单配置，轻松享受 Zsh 的全部威力。

四、 如何在 Ubuntu 下安装与切换 (Usage)

  1. 安装 Zsh：
    1
    sudo apt update && sudo apt install zsh
  2. 设置为默认 Shell：
    1
    chsh -s $(which zsh)
    【关键】：务必完全注销后重新登录，更改才会生效。
  3. 安装 Oh My Zsh 框架：
    1
    sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
  4. 验证：重新打开终端，执行 echo $SHELL，输出 /usr/bin/zsh 即成功。

五、 如何玩转 Zsh (Play & Explore)

玩转 Zsh = 选择主题 (换皮肤) + 安装插件 (加技能)

第一步：玩转主题 (换皮肤) 主题决定了提示符的外观和信息量。

· 查看内置主题：ls ~/.oh-my-zsh/themes/
· 在线预览效果：Oh My Zsh 主题Wiki (必看！)
· 更换主题：编辑 ~/.zshrc，修改 ZSH_THEME="主题名" (如 agnoster)，然后执行 source ~/.zshrc 生效。
· 【必做】：若主题显示乱码（方块□），请在你本地电脑的终端软件中安装 Nerd Font 字体 (如 MesloLGS NF)。

第二步：玩转插件 (加技能) 插件为 Zsh 增加全新功能。

· 安装必备神器：

1
2
3
4
5
# 1. 语法高亮：命令正确绿色，错误红色
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

# 2. 自动建议：根据历史给出灰色提示，按 → 采纳
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

· 启用插件：编辑 ~/.zshrc，在 plugins=(git) 中加入插件名：

1
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

保存后执行 source ~/.zshrc，体验质的飞跃。

第三步：高级玩法

· 探索更多插件：如 autojump (快速目录跳转)、web-search (命令行搜索)。
· 自定义别名：在 ~/.zshrc 中添加 alias xx='xxx -yy'，简化长命令。
· 深度定制：直接编辑 ~/.zshrc 文件，调整各种环境变量和选项。

5. 终端工具推荐

桌面版：Tabby

高度集成全部的终端功能，还提供丰富的插件，比如要设置一个终端背景安装一个背景插件就好了。

更多介绍请查看它的Tabby官网

安卓版：Termux

安卓终端神器，用它就对了。Termux官网

后记

板子如果连接显示器后CPU发热比较严重，贴了铜片散热依然70多摄氏度。我更换风扇为3010 11000转后温度稳定压在40度左右，但是噪声比较明显。我的风扇是装在保护壳上的，然后直吹CPU，或许你也可以考虑这么做。

 

鸣心/Write
]]>https://b.wihi.top/posts/bb9aec9d.html2025-09-21T01:38:00.000Z记录了一份香橙派5 Ultra开发板入门指南，涵盖从硬件准备、系统烧录到Ubuntu基础配置的全过程。内容包括SSH安全设置、zsh安装、终端工具推荐及散热解决方案，希望对你有所帮助启动，人生中第一块开发板！2025-09-21T01:38:00.000Z鸣心CloudFlare-R2配置mTLS

CloudFlare开启mTLS文档已经写的很明白了，但是经过我的实践，我的R2存储桶部分文件需要通过客户端身份验证才能访问，但是我发现当使用R2的自定义公共域名的时候配置mTLS就无效了，故而用本篇文章来记录。

引入

  mTLS (Mutual TLS) 是标准TLS协议的扩展，在传统TLS基础上增加了客户端验证。在普通TLS中，只有服务器向客户端证明其身份；而在mTLS中，客户端也需要向服务器证明自己的身份。
  但是在为R2存储桶的公共域名开启mTLS后发现无法生效，服务器不向客户端发送证书验证请求。为了解决这个问题，我考虑使用CloudFlare的Works

操作

一.新建Workers项目

  1. 在Cloudflare仪表盘的账户主页侧边栏下滑，找到Workers，选择Workers和Pages，点击创建

  2. 选择Workers的从 Hello World! 开始点击开始使用。

  3. 这时候无法编辑创建时候的项目代码，但是不用担心，点击下图所示的按钮以编辑项目代码。

编辑按钮

  1. 进行编辑，删掉全部原来的内容，写入如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default {
  async fetch(request, env) {
    // mTLS 验证
    const tlsAuth = request.cf.tlsClientAuth || {};
    if (!tlsAuth.certVerified || !tlsAuth.certPresented) {
      return new Response("mTLS required", { status: 401 });
    }

    try {
      const objectKey = new URL(request.url).pathname.slice(1);
      const object = await env.MY_BUCKET.get(objectKey);
      // 注意，这里的存储桶变量名为MY_BUCKET
      if (!object) {
        return new Response(`Object ${objectKey} not found`, { status: 404 });
      }

      const headers = new Headers();
      object.writeHttpMetadata(headers);
      headers.set("etag", object.httpEtag);

      return new Response(object.body, { headers });

    } catch (err) {
      return new Response("Internal error: " + err.message, { status: 500 });
    }
  }
}

以上代码的存储桶变量名为MY_BUCKET

  1. 点击右上角的部署按钮部署项目

  2. 然后返回到你的项目主页，点击添加绑定，选择R2存储桶，再次点击添加绑定，如图所示。

绑定按钮

我们只点击添加绑定，不复制其提供的代码，因为这个代码是PUT方法，我们下载浏览器访问并不需要PUT方法。当然如果你有需要你可以自己修改。

R2绑定

  1. 点击添加绑定后的变量名写MY BUCKET，这里写不了下划线，但是保存后自动会把空格替换成下划线。之所以写这个变量名是因为我们的代码中写的环境变量名为MY_BUCKET。然后R2存储桶选择你需要的存储桶，然后点击部署即可。

二. 为Workers项目增加自定义域名

因为使用mTLS的是我们自己的域名，因此需要为它增加自定义域名。但是与pages项目不同的是无法直接添加绑定自定义域名，需要我们自行添加Workers路由，如果你会该操作可以直接跳到第三步。

  1. 点击你的Workers项目的设置，在域和路由中复制workers.dev类型中的值，也就是你的项目域名。例如xxx.workers.dev

  2. 在Cloudflare的你的域的控制板中侧边栏的DNS中选择记录增加解析，类型选择CNAME，名称写入你自己想要的，例如我写入r2.wihi.top，目标写入刚刚你的xxx.workers.dev，代理状态一定要勾选已代理。然后点击保存即可

其实以上步骤按照网上其他人的说法随便写一个解析即可，但是我个人是这么弄的，你也可以尝试随便解析。

  1. 在侧边栏进入Workers路由，在HTTP路由点击添加路由，路由写入上文的r2.wihi.top/*，这里注意，一定要写/*，不然访问其他路径不会有正确路由，然后点击保存即可。如下图

workers路由

三. 开启mTLS，并配置规则

  1. 依旧在Cloudflare的你的域的控制板的侧边栏中，选择SSL/TLS，然后点击客户端证书。

  2. 点击客户端证书中右侧的创建证书，然后进行相关提示操作即可，由于官方文档其他人的文章已经写的很详细了，这里不再赘述。但是值得一提的是，如果选择的是使用Cloudflare生成私钥和CSR。在生成后，证书格式需要复制pem格式的，以便生成PCKS12格式证书导入到电脑中。

  3. (可选)如果你有用浏览器访问的需求，可以参考该网站的证书格式转换，这里提供使用openssl把pem格式证书转换为PCSK12。

1
openssl pkcs12 -export -out cert.pfx -inkey private.key -in cert.pem -certfile ca_bundle.pem
  • private.key: 私钥
  • cert.pem: 证书
  • ca_bundle.pem: 中间证书链（可选）

注意，如果要删除中间链证书，那么-certfile也需要删掉。也就是如下命令：

1
openssl pkcs12 -export -out cert.pfx -inkey private.key -in cert.pem

  1. 为域名启用mtls，在刚刚cloudflare控制板的客户端证书的主机处点击编辑添加需要启用mtls的域名例如上文的r2.wihi.top。值得注意的是这个域名必须开启了cloudflare代理

  2. 在客户端证书控制板中点击创建mTLS，启用WAF，拦截没有通过客户端验证的请求访问。这个已验证客户端证书，值一定是没有勾选的，也就是未通过验证的。如下图：

mTLS拦截规则

  1. 到这里相关配置已经结束了，更多内容可以参考官方文档:

四. 在Win10电脑Edge浏览器中安装客户端证书

  1. 在电脑中点击打开第三步中生成的pfx文件,一定要选择安装到用户到计算机无效.其他根据提示安装即可

  2. 在浏览器的证书管理器的你的证书中查看从window导入的证书可以看到证书导入完毕,如下图

导入证书查看

  1. 然后访问开启mTLS的网站,如上文的r2.wihi.top,正常应该提示选择证书,如下图,如果没有可以尝试清除浏览器缓存重新访问

请求验证证书

温馨提示

  本篇文章着重针对的是在浏览器中使用客户端验证,你当然也可以使用其他方法,如官方的例子:

将公共证书和私有证书放在同一个目录中，使用此 cURL 命令，我们将获得访问权限：

终端窗口

1
curl -I --cert cert.pem --key private-cert.pem https://mtls-test.example.com/mtls-test
1
HTTP/2 200server: cloudflare

如果没有证书，终端将显示以下内容：

终端窗口

1
curl -I https://mtls-test.example.com/mtls-test
1
HTTP/2 403server: cloudflare

  如果有其他问题请查看官方文档查看指导,希望本篇内容对你有所帮助

 

鸣心/Write
]]>https://b.wihi.top/posts/54a16023.html2025-08-07T11:30:00.000Z详细解决CloudFlare R2存储桶使用自定义域名时mTLS配置失效的问题。通过Workers脚本实现客户端证书验证，完整介绍从证书生成、Workers部署、路由配置到浏览器证书安装的全流程CloudFlare-R2配置mTLS2025-08-07T11:30:00.000Z鸣心CloudfalreDNS结合阿里云域名设置DNSSSEC

引入

  DNSSEC（Domain Name System Security Extensions）是一种用于保护DNS查询和响应的安全机制，旨在防止DNS欺骗和缓存污染攻击。它通过数字签名验证DNS数据的真实性和完整性，从而确保用户获得的DNS信息是可信的。详细原理可以参考我的知识库中的文章DNSSEC解析

  但是值得注意的是，本文章指的是在阿里云（万网）注册的域名，然后修改域名的DNS服务器为cloudflare的DNS。从而进行设置的DNSSEC，如果您不是这个场景本篇文章可能有所不妥，请辩证看待。

  记录这篇文章主要是因为cloudflare设置DNSSEC的这个DS记录和阿里云要填写的DS记录这个相关名称不一样，故而特殊记录一下。

操作

在Cloudfalre控制台中开启DNSSSEC,会展示下图内容:

Cloudflare控制台DNSSEC

在阿里云域名控制台中进入DNSSEC设置,点击添加DS记录,会展示下图内容:

阿里云控制台DNSSEC

特殊：

注意：阿里云处的密钥标签（Key Tag）对应cloudfalre的DS记录中的xxx.xxx. 3600 IN DS 后面的4位数(再后面的俩数字和字符无需理会)

注意:阿里云处的加密算法（Algorithm）对应cloudflare的算法,查阅手册发现这里cloudfalre的算法13指的是阿里云的ECDSA Curve P-256 with SHA-256

其他的基本上一致：

摘要类型对应摘要类型

摘要对应摘要

配置完毕点击提交即可.如果成功的话cloudflare的设置DNSSEC的地方过段时间会显示成功！提示：xxx 将受到 DNSSEC 的保护

补充

我发现该方法也适用于腾讯云域名DNSSEC

如果在使用多个DNS提供商时可能需要考虑开启多签名者DNSSEC

 

鸣心/Write
]]>https://b.wihi.top/posts/a4e26f24.html2025-08-02T04:00:00.000Z介绍了如何在Cloudflare DNS中为阿里云注册的域名配置DNSSEC安全扩展。内容包括DNSSEC原理简述、Cloudflare控制台设置、阿里云DS记录填写指南，两平台间密钥标签和加密算法的对应关系解析CloudfalreDNS结合阿里云域名设置DNSSSEC2025-08-05T04:00:00.000Z鸣心Material for MkDocs---数学公式

知识库里面的内容涉及安培定律公式，发现无法渲染，也就是不支持数学公式，去必应搜索，出来的Material for MkDocs中文文档。其中的数学公式配置无法生效，可能是由于其调用的polyfill.io被封了，所以无效。阴差阳错才找到了原版官网，才找到正确方法。

操作

详细内容：Material for MkDocs官方文档中配置数学公式

这里记录一下MathJax进行配置，没有使用KaTeX，KaTex不知道有没有我下面遇到的问题

在项目根目录起中新建docs/javascripts/mathjax.js文件。然后写入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.MathJax = {
  tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    processEscapes: true,
    processEnvironments: true
  },
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }
};

document$.subscribe(() => { 
  MathJax.startup.output.clearCache()
  MathJax.typesetClear()
  MathJax.texReset()
  MathJax.typesetPromise()
})

然后在项目的mkdocs.yml配置中写入如下内容：

1
2
3
4
5
6
7
markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

extra_javascript:
  - javascripts/mathjax.js
  - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js

这里的unpkg.com国内可以正常访问

我按照官方文档中的MathJax配置后，发现公式结构\[ \]无法渲染。于是修改docs/javascripts/mathjax.js文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    packages: {'[+]': ['ams']} // 仅保留必要AMS扩展
  },
  startup: {
    typeset: false // 必须禁用自动渲染
  }
};

// 单独提取渲染控制（关键！）
document$.subscribe(() => {
  if (window.MathJax?.typesetPromise) {
    MathJax.typesetPromise();
  }
});

注意事项

我是询问AI后进行的解决。至于本质原因并不是很理解，未来深入学习后，会补充本质原因分析。如果修改后有任何BUG，请恢复官方配置。

本文章编写于2025年8月1日，如果在未来的失效了请以最新版本为主。

 

鸣心/Write
]]>https://b.wihi.top/posts/5dd226f0.html2025-08-01T04:00:00.000Z解决Material for MkDocs中数学公式无法渲染的问题，提供有效的MathJax配置方案。包含JavaScript配置文件和mkdocs.yml设置，解决公式结构解析异常，确保数学公式正确显示Material for MkDocs---数学公式2025-08-05T04:00:00.000Z鸣心在Hexo-fluid的分类页中增加说明

整了个文章专栏，想要在分类页面写个说明，本以为很简单，却发现需要修改的是主题页面文件，要改的东西挺多。基本上都是AI指导实现，仅做记录。
本文记录的是通过修改主题模板实现的方法，未来主题更新还需要手动重新配置，如果需要注入发可以前往：在Hexo-fluid的分类页中增加说明(2)--注入法

本篇文章内容涉及hexo-fluid主题相关代码内容，点击跳转仓库地址

实现

一.思路描述

 由于分类页面属于通过EJS模板文件读取相关数据列表然后构建的，并非从md等文件加载，因此只能考虑修改主题页面模板文件。

 于是找到分类页面的主题模板文件categories.ejs首先进行简要分析：

  1. 页面元数据设置
1
2
3
4
5
6
page.layout = 'categories'
page.title = theme.category.title || __('category.title')
page.subtitle = theme.category.subtitle || __('category.subtitle')
page.banner_img = theme.category.banner_img
page.banner_img_height = theme.category.banner_img_height
page.banner_mask_alpha = theme.category.banner_mask_alpha

这部分设置了页面的基本属性：

  • 使用 'categories' 布局
  • 标题和副标题从主题配置中获取，如果未配置则使用国际化翻译
  • 设置横幅图片、高度和遮罩透明度
  1. 获取分类数据
1
2
var orderBy = theme.category.order_by || 'name'
var curCats = site.categories.find({ parent: { $exists: false } }).sort(orderBy).filter(cat => cat.length)

这部分：

  • 获取分类排序方式（默认为按名称排序）
  • 查询所有顶级分类（没有父分类的分类）
  • 按指定方式排序
  • 过滤掉空分类（cat.length 检查分类下是否有文章）
  1. 渲染分类列表
1
2
3
4
5
6
7
8
<%- partial('_partials/category-list', {
  curCats: curCats,
  params: {
    orderBy: orderBy,
    postLimit  : theme.category.post_limit,
    postOrderBy: theme.category.post_order_by || config.index_generator.order_by
  }
}) %>

这部分：

  • 引入 _partials/category-list 子模板
  • 传递当前分类列表 (curCats)
  • 传递参数包括：
    • 分类排序方式
    • 文章数量限制
    • 文章排序方式（默认使用全局配置）

 分析我们需要实现功能中需要加入的内容：由于我们的专栏介绍内容可能较多，于是考虑从额外的数据文件中读取数据，然后渲染（并且设置相关样式）。

 从数据文件中读取数据采用hexo提供的source/_data数据文件读取相关文件数据的功能。

 设置样式考虑使用CSS，在主题配置中直接引用css是全局性的，由于我们不想要全局性的，因此选择直接写在模板文件中。

二.详细操作

  1. 数据文件： 在项目的source/_data文件夹下新建文件column_descriptions.yml并且写下如下配置（下面的就是示例）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
columns:
  - name: "例子1"
    subtitle: "例子1小标题"
    icon: "icon-computer" #示例图标，详细需要配合图标库
    description: "例子1描述"
    color: "#1890ff" ##示例颜色
  
  - name: "例子2"
    subtitle: "例子2小标题"
    icon: "icon-life" #示例图标，详细需要配合图标库
    description: "例子2描述"
    color: "#f5222d" #示例颜色

# 后门还可以根据需要按照示例格式增加内容
  1. 样式文件：在source/css文件夹下新建文件custom.css并且写入如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/* 专栏容器 */
.columns-container {
  display: grid;
  gap: 1.8rem;
  margin: 2.5rem 0;
}

/* 单个专栏样式 */
.teach-column-desc {
  --column-color: #1890ff; /* 默认颜色 */
  --column-color-rgb: 24, 144, 255; /* 默认RGB值 */
  --column-hover-color: #40a9ff; /* 悬停颜色 */
  
  padding: 1.8rem;
  border-radius: 12px;
  border-left: 4px solid var(--column-color);
  background: 
    radial-gradient(circle at 90% 10%, rgba(var(--column-color-rgb), 0.03) 0%, transparent 20%),
    linear-gradient(to bottom, rgba(var(--column-color-rgb), 0.02), rgba(var(--column-color-rgb), 0.01)),
    #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: 
    transform 0.35s ease, 
    box-shadow 0.35s ease,
    border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.teach-column-desc:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-left-color: var(--column-hover-color);
}

/* 添加微妙的背景图案 */
.teach-column-desc::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.05;
  background-color: var(--column-color);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  z-index: -1;
}

.desc-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.desc-header i.iconfont {
  font-size: 2.2rem;
  margin-right: 15px;
  flex-shrink: 0;
  color: var(--column-color);
  transition: color 0.3s ease;
}

.teach-column-desc:hover .desc-header i.iconfont {
  color: var(--column-hover-color);
}

.desc-header h3 {
  margin: 0 0 5px 0;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--column-color);
  transition: color 0.3s ease;
}

.teach-column-desc:hover .desc-header h3 {
  color: var(--column-hover-color);
}

.subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
}

.desc-content p {
  margin: 0;
  line-height: 1.85;
  font-size: 1.08rem;
  color: #333;
  position: relative;
  padding-left: 1.8rem;
}

.desc-content p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--column-color);
  opacity: 0.7;
  transition: background 0.3s ease;
}

.teach-column-desc:hover .desc-content p::before {
  background: var(--column-hover-color);
}

.highlight {
  color: var(--column-color);
  font-weight: 600;
  position: relative;
  display: inline-block;
  margin-right: 5px;
  transition: color 0.3s ease;
}

.teach-column-desc:hover .highlight {
  color: var(--column-hover-color);
}

.highlight::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 2px;
  transition: opacity 0.3s ease;
}

.teach-column-desc:hover .highlight::after {
  opacity: 0.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .columns-container {
    gap: 1.3rem;
  }
  
  .teach-column-desc {
    padding: 1.3rem;
  }
  
  .desc-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .desc-header i.iconfont {
    margin-bottom: 10px;
  }
}

/* 为不支持 mask-image 的浏览器提供回退 */
@supports not (mask-image: none) {
  .teach-column-desc::before {
    background: none;
  }
}
  1. 修改模板文件:打开themes/fluid/layout文件夹，找到categories.ejs文件并打开。
  • 在文件开头第一行换行插入对css引用：
1
<link rel="stylesheet" href="/css/custom.css">
  • 在第一对<%%>中的末尾新增如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 加载专栏配置文件
const columnData = site.data.column_descriptions;

// 十六进制转RGB函数（用于CSS变量）
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return [r, g, b];
}
  • 在两对<%%>的中间新增如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<% if (columnData && columnData.columns && columnData.columns.length) { %>
  <div class="columns-container">
    <% columnData.columns.forEach(column => { 
      const color = column.color || '#1890ff';
      const rgb = hexToRgb(color);
    %>
      <div class="teach-column-desc" 
           style="
             --column-color: <%- color %>;
             --column-color-rgb: <%= rgb.join(',') %>;
           ">
        <div class="desc-header">
          <i class="iconfont icon-<%= column.icon || 'info-circle-fill' %>"></i>
          <div>
            <h3><%= column.name %>专栏说明</h3>
            <% if (column.subtitle) { %>
              <p class="subtitle"><%= column.subtitle %></p>
            <% } %>
          </div>
        </div>
        <div class="desc-content">
          <p>
            <strong class="highlight"><%= column.name %></strong>
            <%= column.description %>
          </p>
        </div>
      </div>
    <% }) %>
  </div>
<% } %>
  • 最后完整内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- 直接引入分类页专属 CSS -->
<link rel="stylesheet" href="/css/custom.css">
<%
page.layout = 'categories'
page.title = theme.category.title || __('category.title')
page.subtitle = theme.category.subtitle || __('category.subtitle')
page.banner_img = theme.category.banner_img
page.banner_img_height = theme.category.banner_img_height
page.banner_mask_alpha = theme.category.banner_mask_alpha
var orderBy = theme.category.order_by || 'name'
var curCats = site.categories.find({ parent: { $exists: false } }).sort(orderBy).filter(cat => cat.length)
// 加载专栏配置文件
const columnData = site.data.column_descriptions;

// 十六进制转RGB函数（用于CSS变量）
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return [r, g, b];
}
%>

<!-- 动态加载专栏说明 -->
<% if (columnData && columnData.columns && columnData.columns.length) { %>
  <div class="columns-container">
    <% columnData.columns.forEach(column => { 
      const color = column.color || '#1890ff';
      const rgb = hexToRgb(color);
    %>
      <div class="teach-column-desc" 
           style="
             --column-color: <%- color %>;
             --column-color-rgb: <%= rgb.join(',') %>;
           ">
        <div class="desc-header">
          <i class="iconfont icon-<%= column.icon || 'info-circle-fill' %>"></i>
          <div>
            <h3><%= column.name %>专栏说明</h3>
            <% if (column.subtitle) { %>
              <p class="subtitle"><%= column.subtitle %></p>
            <% } %>
          </div>
        </div>
        <div class="desc-content">
          <p>
            <strong class="highlight"><%= column.name %></strong>
            <%= column.description %>
          </p>
        </div>
      </div>
    <% }) %>
  </div>
<% } %>

<%- partial('_partials/category-list', {
  curCats: curCats,
  params: {
    orderBy: orderBy,
    postLimit  : theme.category.post_limit,
    postOrderBy: theme.category.post_order_by || config.index_generator.order_by
  }
}) %>

后记：

 这些都是通过AI学习后进行的操作，可能中间有所不妥，还请多多指教，这篇主要用来记录。
 这些修改都是基于主题fluid1.9.8版本进行的操作，新或旧版可能无效，请见谅。
 以上全部内容遵循GNU 通用公共许可证 v3.0

 

鸣心/Write
]]>https://b.wihi.top/posts/8de7287f.html2025-07-29T04:00:00.000Z介绍在Hexo Fluid主题分类页面添加专栏说明的方法，通过修改EJS模板、创建YAML数据文件和自定义CSS样式，实现动态加载美观的专栏介绍模块，提升分类页面的内容展示效果在Hexo-fluid的分类页中增加说明2026-04-04T12:50:06.000Z鸣心Material for MkDocs---添加背景

最近为了搞我的文档知识库经过考虑选择了mkdoc，主题选择了Material。后来寻思整个背景图片，个人CSS水平一般，于是找AI代写，经过多次调试，终于整好了。

介绍

  1. 通过媒体查询实现横屏与竖屏状态下显示不同的背景
  2. 层次分明的毛玻璃效果
  3. 任何比例下显示都进行了兼容和优化

要查看效果可以去参考我的知识库

使用方法

  1. 补充CSS代码中的背景图片url(竖屏与横屏)

  2. 将CSS代码保存到你的mkdoc项目中docs文件夹中的任意一个位置。例如把CSS代码放到：docs/styles/bg.css中

  3. 在你的mkdoc项目下的mkdocs.yml中添加如下内容

1
2
extra_css:
  - styles/bg.css   # 这里仅供作示例，请根据实际情况替换位置（无需写docs，默认就是docs下的路径了）

注意事项

  1. 本CSS采用MIT License协议，以下为概览：
  • 允许任何人免费使用、修改、分发
  • 不强制要求署名
  • 不提供任何担保，作者不承担责任
  • 修改后的代码可以闭源

  1. 本CSS优化针对的是Material for MkDocs的6.2.8版本，新或旧版本可能会无效或出现BUG

  2. 本CSS优化针对的是主题中开启导航选项卡，也就是在mkdocs.yml中添加配置：

1
2
3
theme:
  features:
      - navigation.tabs

并且没有再单独设置其他影响布局的配置否则可能会出现任何奇怪的显示背景

  1. 本CSS中对于设置导航栏、页脚，内容栏等按照主题颜色为蓝色，内容背景颜色为白色设置的不透明度，如果您需要修改颜色，请修改相关的rgp值。

  2. 修复桌面端下左侧导航栏问题的相关CSS代码本来是想让桌面端访问时候左侧的导航栏为都白色半透明背景，因为之前设置完后最上方有一个白条，阴差阳错就变成了整体白色列表，别说还挺好看的，所以就保留了。

CSS样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* ========== 基础背景设置 ========== */
body {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

/* 竖屏设备背景 */
@media (orientation: portrait) {
    body {
        background-image: url(''); //替换你自己的竖屏背景，注意不要删掉引号
    }
}

/* 横屏设备背景 */
@media (orientation: landscape) {
    body {
        background-image: url(''); //替换你自己的横屏背景，注意不要删掉引号
    }
}

/* ========== 半透明效果组件 ========== */
/* 标签栏 */
.md-tabs {
    background-color: rgba(63, 81, 181, 0.85) !important;
    backdrop-filter: blur(5px);
}

/* 页脚 */
.md-footer {
    background-color: rgba(63, 81, 181, 0.85) !important;
    backdrop-filter: blur(5px);
}

/* 对话框 */
.md-dialog {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

/* 内容区域 */
.md-content__inner {
    background-color: transparent !important;
}

/* 搜索框 */
.md-search {
    background-color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* 导航栏 */
.md-header {
    background-color: rgba(63, 81, 181, 0.85) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* 主内容区 */
.md-main {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* ========== 修复桌面端下左侧导航栏问题(莫名其妙就修复了，还挺好看的) ========== */

.md-nav--primary .md-nav__title~.md-nav__list {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

/* 右侧目录栏标题 - 提高优先级 */
.md-sidebar--secondary .md-nav__title,
.md-sidebar--secondary .md-nav__title::before {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

/* 移除原始样式中的背景和阴影 */
.md-nav--secondary .md-nav__title {
    background: transparent !important;
    box-shadow: none !important;
}


/* 确保基础样式也被覆盖 */
.md-nav__title {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

 

鸣心/Write
]]>https://b.wihi.top/posts/a996b252.html2025-07-28T04:00:00.000Z介绍如何为Material for MkDocs主题添加自适应背景，提供完整的CSS解决方案。包含横竖屏不同背景设置、毛玻璃效果实现、导航栏优化及兼容性处理，适用于MkDocs 6.2.8版本Material for MkDocs---添加背景2025-07-28T04:00:00.000Z鸣心图片中的EXIF信息

起因是最近在和AI闲谈时，突然AI提及了一个全新的陌生的名词“EXIF信息”详细追问一下了解到了EXIF信息是啥以及对我们日常的影响

正文：

 简而言之EXIF就行包含在图片中看不见的信息，只有使用十六进制等打开后才能看见，里面会包含我们的拍摄的设备信息，分辨率啊之类的，有的还会包含有GPS等信息。如果说我们在居家自拍的照片没有处理就发布在网上可能会泄露我们的地址，然后被不法分子加以利用。但是其实不必担心，像微信QQ之类的软件分享照片的时候就自动去除了EXIF，拍摄的时候可以选择关闭EXIF中包含的GPS定位（虽然我的手机我没找到在哪里关），我们也可以选择用专门删除EXIF信息的软件处理一下拍摄后的图片，如果说找不到这种软件那就去微信QQ自己给自己分享一下，分享后再下载下来的那个照片就相当于被去除了。

 其实正文到这里就结束了，就是想给大家分享一下这个东西，拍摄照片的时候注意一下关闭定位，发送的时候注意处理一下之类的。下面是AI对于EXIF信息的介绍，想看的读者可以往下滑再看看。

EXIF的系统介绍

以下内容由AI介绍（AI名字我就不说了，以免说我打广告）

图片的EXIF信息是什么？

EXIF（Exchangeable Image File Format，可交换图像文件格式）是一种嵌入在数字照片中的元数据标准，用于记录与照片相关的设备参数、拍摄环境、时间地点等信息。它最初由日本电子工业发展协会（JEIDA）于1996年制定，现已成为数码相机、智能手机等设备存储照片元数据的通用标准。

EXIF信息的作用

  1. 记录拍摄参数

    • 包括光圈（F值）、快门速度、ISO感光度、焦距、闪光灯状态等，帮助用户了解照片的拍摄条件。
    • 示例：摄影师可以通过EXIF分析某张照片的曝光参数，学习如何优化拍摄技巧。

  2. 存储设备信息

    • 记录相机或手机的品牌、型号、固件版本等，便于识别设备来源。

  3. 时间与地理位置

    • 时间戳：记录拍摄日期和时间。
    • GPS坐标：如果设备开启了定位功能，EXIF会包含经纬度信息（例如：北纬39.9042°，东经116.4074°对应北京）。

  4. 辅助管理和后期处理

    • 通过EXIF信息，用户可以按时间、地点或设备分类照片，或在后期调整参数时参考原始数据。

  5. 法律与证据价值

    • 在司法鉴定中，EXIF信息可作为照片真实性、拍摄时间地点的辅助证据（但需注意其可被修改）。

为什么包含GPS等敏感内容却未被淘汰？

尽管EXIF可能泄露隐私，但它依然被广泛使用，原因如下：

1. 技术与功能需求

  • 默认记录：大多数设备（尤其是智能手机）默认开启EXIF记录功能，方便用户管理照片。
  • 行业标准：EXIF已成为摄影、新闻、科研等领域的基础工具，例如：
    • 新闻报道：记者需通过EXIF验证照片的真实性。
    • 科学研究：生态学家利用照片的GPS信息追踪物种分布。

2. 用户控制权存在

  • 可手动关闭：用户可以在设备设置中关闭定位服务或EXIF记录（如iPhone的“照片设置”中关闭“位置”权限）。
  • 后期处理：通过软件（如Photoshop、ExifTool）可手动删除或修改EXIF数据。

3. 隐私意识不足

  • 许多用户不了解EXIF的风险，或认为“拍照分享无害”。例如，社交媒体上的旅行照片可能暴露家庭住址（通过GPS定位家中）。

4. 平台处理差异

  • 部分平台自动剥离EXIF：如微信、微博、Instagram等社交平台会自动删除上传图片的EXIF信息。
  • 部分平台保留EXIF：如Twitter、Telegram等可能保留部分元数据。

5. 安全风险与便利性的权衡

  • 对于普通用户，EXIF的便利性（如自动整理照片、地图标记）通常大于隐私风险。
  • 对于高敏感场景（如军事、政府），可通过专用工具批量删除EXIF。

所有图片都包含EXIF吗？

并非所有图片都包含EXIF信息，具体取决于以下因素：

1. 设备类型

  • 智能手机/数码相机：默认生成EXIF（含GPS、拍摄参数）。
  • 扫描仪/屏幕截图：通常不包含EXIF，或仅保留基础信息（如时间）。
  • 绘图软件生成的图片：如Photoshop保存的图片可能不含EXIF，除非手动添加。

2. 文件格式

  • 支持EXIF的格式：JPEG、TIFF、RAW、PNG（部分支持）。
  • 不支持EXIF的格式：GIF、BMP（仅少量元数据）。

3. 后期处理

  • 编辑后丢失EXIF：用普通图片编辑器（如Windows画图）保存图片时，EXIF可能被清除。
  • 专业工具保留EXIF：如Lightroom、Snapseed会保留或允许编辑EXIF。

4. 平台规则

  • 社交平台：如微信、微博会剥离EXIF；Telegram则可能保留。
  • 云存储服务：Google Photos会保留EXIF，但提供“模糊位置”选项；iCloud默认保留。

如何查看和管理EXIF信息？

查看方法：

  1. Windows系统：右键图片 → “属性” → “详细信息”。
  2. Mac系统：打开“预览” → 工具 → 显示EXIF数据。
  3. 手机App：Android的“相册”详情页、iOS的“照片”App（部分信息）。
  4. 专业工具：ExifTool、Adobe Lightroom、在线工具（如EXIF Viewer by 365Tracker）。

删除或修改方法：

  1. 手动操作：
    • 使用ExifTool命令行工具（如 exiftool -all= image.jpg 删除所有EXIF）。
    • 在Photoshop中通过“文件简介”面板编辑元数据。
  2. 自动工具：
    • 批量处理软件（如Bulk EXIF Remover）。
    • 在线服务（如Optimizilla、TinyPNG，压缩图片时自动剥离EXIF）。

总结

EXIF信息是数字摄影的“幕后记录者”，既有实用价值也存在隐私隐患。它的存在并非不合理，而是需要用户主动管理。对于普通用户，关闭不必要的定位权限即可规避风险；对于高敏感场景，则需使用专业工具彻底清除元数据。正如国家安全部提醒的那样，随手分享的照片可能成为泄密源头，谨慎处理EXIF信息是数字时代的基本素养。

 

鸣心/Write
]]>https://b.wihi.top/posts/bc44f5a.html2025-05-25T04:00:00.000Z介绍图片EXIF信息的定义、作用及隐私风险，涵盖拍摄参数、设备信息和GPS定位等元数据的记录原理，提供查看和管理EXIF的实用方法，并分析其技术价值与安全隐患的平衡图片中的EXIF信息2025-05-25T04:00:00.000Z鸣心解决Hexo中第三方图床图片无法显示问题

起因是,使用某云盘做外链图床时发现图片无法在https访问时正常显示,在使用云盘作为图床时，该问题.通常是因为浏览器的跨域资源共享（CORS）**政策或**引用来源限制导致的

问题原因

  1. 引用来源限制（Referrer Policy）

    ：

    • 当你将图片托管在云盘上，并通过 URL 引用这些图片时，云盘的服务器可能会检查请求的Referer头（该头记录了请求发起页面的 URL）。如果Referer头携带的 URL 和云盘的资源域名不匹配，云盘可能会拒绝提供资源或返回错误响应。

  2. CORS策略

    ：

    • 浏览器在加载跨域资源时，会检查 CORS（跨域资源共享）策略。如果服务器未正确配置 CORS 头，浏览器会阻止显示资源。

通过 <meta name="referrer" content="no-referrer"/> 来解决

在页面 <head> 中加入 <meta name="referrer" content="no-referrer"/> 后，可以解决图片无法显示的问题，其原因如下：

  1. 控制 Referrer 头部

    ：

    • <meta name="referrer" content="no-referrer"/> 设置了一个特定的引用策略，告知浏览器在请求图片时不携带任何 Referer 头。这样，云盘的服务器就无法收到来自原网站的 Referer 信息，也就不会因为来源不匹配而拒绝返回图片。

  2. 避免隐私泄露

    ：

    • 在某些情况下，Referer 头部会暴露用户正在访问的页面 URL，这可能会带来隐私泄露的风险。使用 no-referrer 策略可以有效地避免这个问题，同时也避免了由于 Referer 不匹配而导致的请求失败。

总结

通过设置 <meta name="referrer" content="no-referrer"/>，浏览器会在请求图片时不发送 Referer 头，避免了跨域请求时因为 Referer 不匹配而导致的访问被拒绝。这种方式有助于解决使用云盘作为图床时，图片无法显示的问题。

如何在Hexo系统上修改:

根据实际情况在thems中找到自己的主题文件夹,然后在layout文件夹中搜索head.ejs文件并且打开,然后在<head>标签下写入 <meta name="referrer" content="no-referrer"/>如果没有head标签就自己创建一个

 

鸣心/Write
]]>https://b.wihi.top/posts/d5051a4d.html2025-02-22T04:00:00.000Z解决Hexo博客中使用第三方图床时图片无法显示的问题，分析跨域资源共享(CORS)和引用来源限制的原因，提供通过添加meta标签禁用Referer头的解决方案，确保图片正常加载解决Hexo中第三方图床图片无法显示问题2025-02-22T04:00:00.000Z鸣心灵活运用Docker--部署应用:Nextcloud&Ubuntu

简单来说就是为了方便，直接拉取镜像创建容器然后访问就可以用了，相当于是开箱即用。

Docker部署Nextcloud

无聊翻阅宝塔的Docker应用列表的时候发现了NextCloud：开源免费的私有云存储网盘项目 我觉得他最大的优点就是可以多端协作，在服务端部署后，安卓、windows、Web网页，豆可以操作。

安装与启动

其实没啥要说的，指令流程可以去搜一下，甚至如果你使用宝塔只需要在docker的应用列表那里搜Nextcloud就可直接安装了，但是安装好后要多等一会儿，我2c2g的服务器点击启动后需要等大概1分钟左右那个面板状态才显示已启动，才能访问，所以说如果你点了启动发现状态没更新，不要担心，多等一会就OK。访问进去后直接让你注册，你直接输入自己想用的输入用户名和密码，直接输入然后点击确定就可以了。

挂载第三方存储

这个值得一提，如果说你需要挂载第三方存储，例如对象存储，需要在部署好后，在**应用-已安装应用-外部存储支持(可能是英文，自己翻译一下)**启用后，就可以在左侧列表看到外部存储这个选项，然后根据实际情况配置外部存储即可。

PS：如果你选择S3存储，那么主机名就是存储桶的那个链接，不要带http://或https://等协议头，后面结尾不要跟路径和/直接就写域名，下面端口如果http就写80，https就写443。

更多内容可以查看官方文档配置外部存储(GUI)

Docker部署Ubnutu(乌班图)

因为穷，所以没钱买服务器，或者说只是跑代码，不划算，所以找人花钱在别人服务器上部署一个Docker容器部署乌班图系统。

安装和部署SSH

直接搞个乌班图docker镜像创建容器即可，然后用伪终端在容器内执行代码安装ssh，配置一个端口转发暴露即可使用ssh连接容器。是的，没错，直接使用ssh -p 转发的容器SSH端口 root@宿主机IP就可以链接了。链接的不是宿主机，就是部署了乌班图系统的Docker容器。

访问容器

推荐使用指令对docker的容器端口进行转发到宿主机端口，转发后即可访问转发后的端口进行工作。当然也可以选择暴露全部端口，但是不安全，而且容易造成端口冲突。

关于systemctl

以下内容由AI总结

在 Docker 容器中使用伪终端来执行 systemctl 或类似的系统服务管理指令时，通常会遇到问题，主要是因为 Docker 容器的设计理念与传统的虚拟机或物理服务器有所不同。以下是一些关键原因：

1. Docker 容器的“最小化”特性

Docker 容器通常被设计为运行单一进程（或一个应用程序）。为了减少镜像体积和提高启动效率，容器内部不包含完整的操作系统服务管理框架（例如 systemd 或 init 系统）。因此，容器内无法使用 systemctl 来启动、停止服务或管理系统状态。

2. 缺少 systemd

systemd 是一种系统和服务管理器，通常用于管理 Linux 系统中的服务。Docker 容器默认并不包含 systemd，因为容器内只运行一个主进程（通常是某个应用或服务），没有像传统系统中那样的多个后台服务。所以，systemctl 无法在容器内正常工作，因为它依赖于 systemd 来启动和管理服务。

3. 容器的 PID 1 问题

容器的 PID 1 是应用程序本身，而不是一个管理系统（例如 systemd）。systemd 通常需要在主机的 PID 1 进程中运行才能正确管理服务和处理信号。然而，在 Docker 中，PID 1 只是你启动的应用进程，这意味着无法通过 systemctl 来管理其他进程。

4. systemctl 需要一个运行时环境

systemctl 和类似的服务管理命令通常需要访问一个完整的操作系统环境，包括系统日志、配置文件、进程管理等，而容器通常不具备这些环境。容器的文件系统和网络配置是有限制的，且通常不提供完整的系统环境来支持传统的服务管理。

解决方案：

  1. 使用 docker exec：
    如果你希望在已经运行的容器中执行某些操作，可以使用 docker exec 来启动命令，而不是使用 systemctl。例如：

    1
    docker exec -it <container_id> bash

    然后在容器内运行所需的命令。

  2. 使用自定义启动脚本：
    你可以为容器编写一个自定义的启动脚本，用于启动多个进程。你可以使用 supervisord 或 tini 等工具来模拟服务管理。

  3. 使用 Docker Compose：
    如果你需要管理多个服务，可以使用 Docker Compose 来定义多个容器，并且将它们作为服务进行管理。

  4. 为容器提供 systemd 支持（不推荐）：
    如果确实需要 systemd，你可以在 Docker 容器中安装和配置它，但这通常不推荐，除非你有特定需求。安装 systemd 会使容器变得更加复杂，并且失去了 Docker 的轻量化优势。

总结：

systemctl 等工具依赖于传统的 Linux 系统环境和服务管理，而 Docker 容器设计上并没有提供这种环境。你可以使用其他方式（如 supervisord）来启动和管理多个进程，但这通常不是 Docker 的推荐做法。

关于我的解决方案：既然不能用那就不用，直接cd进程序的安装目录./可执行文件 指令执行命令

 

写在最后

Docker容器中部署Ubuntu后使用容器内ssh、伪终端跑代码再部署其他应用属实是无奈之举，这可能不符合docker的设计理念，甚至可能有一些安全隐患，所以请自行甄别是否合理，可行。

完结撒花！

 

鸣心/Write
]]>https://b.wihi.top/posts/5c355465.html2025-01-26T04:00:00.000Z分享使用Docker部署Nextcloud私有云盘和Ubuntu系统的过程，Nextcloud的多端协作与外部存储的配置，以及在Docker容器中运行Ubuntu系统的SSH连接和进程管理解决方案<![CDATA[灵活运用Docker--部署应用:Nextcloud&Ubuntu]]>2025-01-26T04:00:00.000Z鸣心解决Vercel文章链接地址末尾无.html访问问题

使用Hexo构建静态网页托管在cloudflare Pages后我发现文章链接地址为/xxx.html或xxx都可以访问，以为是默认就可以的，后来迁移vercel发现了并不是默认就可以，而是需要另外重写链接的。

解决问题

解决方法：编写以下重定向规则

如果是Vercel那么在项目的根目录里面新增一个vercel.json文件后写入以下内容，若为其他静态托管平台请自行查阅如何编辑重写规则

1
2
3
4
5
6
7
8
{
  "rewrites": [
    {
      "source": "/:slug*",
      "destination": "/:slug*.html"
    }
  ]
}

内容解释

以下为AI生成的解释：

vercel.json 配置文件是用来在 Vercel 平台上配置特定的路由重写规则（Rewrites），可以帮助你实现自定义的 URL 路径结构。下面是对这个配置文件和其原理的详细解释。

vercel.json 文件

vercel.json 是一个配置文件，用来为你在 Vercel 上托管的应用设置自定义的行为。通过这个文件，你可以定义一些如重写（rewrites）、重定向（redirects）、自定义构建配置等规则。这个文件允许你精确控制你的应用如何响应请求、如何处理路由等。

代码解析

1
2
3
4
5
6
7
8
{
  "rewrites": [
    {
      "source": "/:slug*",
      "destination": "/:slug*.html"
    }
  ]
}

这段配置主要是通过 重写规则（Rewrites） 来实现对 URL 路径的处理。

rewrites 的作用

  • rewrites 用来处理 URL 重写。它允许你将一个请求的 URL 重写到另一个 URL，而不改变浏览器的地址栏显示（即，用户访问的路径不会改变，但请求的资源或页面可能会改变）。
  • 重写规则在请求到达服务器时生效，处理 URL 后，服务器根据新的 URL 路径来查找并返回对应的资源。

配置的具体含义

1
2
3
4
{
  "source": "/:slug*",
  "destination": "/:slug*.html"
}

  • source: 表示匹配的原始 URL 路径。在这里，/:slug* 表示任意以 / 开头的路径，并且 slug 部分是一个占位符，代表动态的部分。* 是一个通配符，意味着后面可以匹配任意长度的路径。

    举个例子，如果用户访问 /about 或 /blog/2025/01/26，这些路径都会被 :slug* 匹配。

  • destination: 指定了请求被重写后的目标 URL。在这里，/:slug*.html 表示将匹配到的路径重写成加上 .html 后缀的路径。例如，如果访问的是 /about，就会重写成 /about.html；如果访问的是 /blog/2025/01/26，就会重写成 /blog/2025/01/26.html。

原理

  • 无后缀路径问题： 默认情况下，Vercel 会把请求的路径作为文件夹或文件来查找资源。如果你的网页是静态 HTML 文件（如 about.html），但没有 .html 后缀，Vercel 会尝试根据路径自动查找匹配的文件，可能找不到。这个重写规则的目的是通过自动将请求的 URL 后缀转换为 .html 来解决这个问题。

    比如，用户访问 /about，Vercel 默认会去查找一个名为 about 的资源，但如果你的文件名是 about.html，它可能无法自动识别为 .html 文件。通过重写规则，将 /about 重写成 /about.html，就可以确保 Vercel 正确地查找并返回你所期望的文件。

  • 保持 URL 清洁： 使用这个重写规则后，用户仍然可以通过不带 .html 后缀的 URL 访问网站，而实际文件是带有 .html 后缀的。这种方式让你的 URL 看起来更简洁、干净。

适用场景

  • 如果你的网站有很多静态 HTML 文件，并且希望用户访问时不带 .html 后缀（例如，/about 而不是 /about.html），可以使用这种方法进行 URL 重写。
  • 有时，这种做法也是为了兼容某些 SEO 或用户体验上的要求，因为很多时候 URL 中不含文件扩展名的路径更符合规范，也让链接看起来更加简洁。

总结

通过在 vercel.json 中添加这个重写规则，你可以实现自动将没有 .html 后缀的 URL 转换为带 .html 后缀的路径，从而确保静态文件能够正确被 Vercel 服务器找到并返回。同时，这种方式保持了 URL 的整洁和简洁，提升了用户体验。

完结撒花！

 

鸣心/Write
]]>https://b.wihi.top/posts/95bcdae3.html2025-01-26T04:00:00.000Z解决Hexo博客部署在Vercel平台时文章链接无法省略.html后缀访问的问题。通过配置vercel.json文件中的重写规则，实现无后缀URL到.html文件的自动映射，从而保持链接简洁性解决Vercel文章链接地址末尾无.html访问问题2025-01-26T04:00:00.000Z鸣心动态日志(实时更新)

从2025年1月25日开始记录

  • Time: 2026-4-5

  • Time: 增加隐私政策，修改文章Android-实用工具记录，优化主题文字配色，更换部分文章头图，增加RSS订阅功能。

  • Time: 2026-4-4

  • Content: 新增两篇文章通过Cloudflare Workers API部署项目、在Hexo-fluid的分类页中增加说明(2)--注入法。本博客加入开往-友链接力

  • Time: 2026-3-28

  • Content: 优化网站构建插件，删除文章PHP不跳转随机图API，更新主题。

  • Time: 2026-3-21

  • Content: 优化全站文章内容与SEO,删除文章C++学习基础笔记-常见头文件+printf语法+科学记数法

  • Time: 2026-1-17

  • Content: 新增一篇文章NoMachine客户端 不断创建tray monitor进程解决办法

  • Time: 2026-1-1

  • Content: 新增一篇文章辞旧迎新：再见2025，你好2026

  • Time: 2025-11-16

  • Content: 新增一篇文章二进制学习笔记

  • Time: 2025-10-19

  • Content: 新增一篇文章WS2812B灯带项目 计划页重写：更换封面图与新增计划

  • Time: 2025-9-21

  • Content: 新增文章启动，人生中第一块开发板！ 全部文章使用AI重写描述和关键词SEO

  • Time: 2025-8-7

  • Content: 新增文章CoudFlare-R2配置mTLS

  • Time: 2025-8-6

  • Content: 新增文章自动删除CloudFlare域名缓存脚本 并且CDN启用非html重写

  • Time: 2025-8-4

  • Content: 全部文章重新增加4号字体标题以优化无JavaScript下的显示问题。删除文章岸的执念与海的呼唤，原因是今天重新读发现写的很一般。部分文章标题包含中文冒号的改为英文冒号。博客全局启用css、js、html压缩。

  • Time: 2025-8-3

  • Content: 优化全部文章描述SEC，全部文章新增详细时间（全部为12：00：00），修改文章Hexo优化：速度与SEO

  • Time: 2025-8-1

  • Content: 新增两篇文章: Material for MkDocs---数学公式和Cloudfalre结合阿里云域名设置DNSSSEC。全部文章增加h1标题。修改部分文章标头顺序。修改计划页头图。

  • Time: 2025-7-29

  • Content: 删除文章Teach手记Rclone手册、Teach手记ffmpeg、未命名海岸线 、重置部分文章链接。浓缩文章内容。

  • Time: 2025-7-28

  • Content: 替换废话文章Centos8.5修改系统Python版本为新的文章Teach手记: Material for MkDocs---添加背景。重写关于页。缩减首页大图占比至27%。调整导航菜单顺序。增加博客版本号至底部。替换博客默认大图为泰山顶拍摄的图片。替换友链页顶部大图。修改博客介绍。

  • Time: 2025-7-20

  • Content: 修复图片失效问题，选择自建图床

  • Time: 2025-6-19

  • Content: 重写文章岸的虚构与海的真相并且更名为岸的执念与海的呼唤

  • Time: 2025-5-31

  • Content: 新增文章Teach手记:FFmpeg常用指令速查手册与Teach手记:Rclone常用指令速查手册，端午安康

  • Time: 2025-5-28

  • Content: 新增自定义页计划 • 日程表，补档文章笔搁纸鸯-成立闲谈，删除网站字体以提升速度，放弃第三方库js/css本地托管。

  • Time: 2025-5-25

  • Content: 因部分原因替换2c3c7e8c链接下的文章，并且新开一个专栏，Teach手记，以后在这个专栏中专门写一些在网上冲浪的心得。更换静态资源托管链接为fastly的。

  • Time: 2025-4-13

  • Content: 新增一篇文章《未命名海岸线》

  • Time: 2025-4-12

  • Content: 新增一篇文章岸的虚构与海的真相

  • Time：2025-4-2

  • Content：新增友链

  • Time：2025-3-19

  • Content：替换静态托管链接，由jsd更改为初七云的smartcis

  • Time: 2025-2-23

  • Content: 恢复代码块样式为fluid主题自带，安装自动提交收录插件，优化部分文章内容，全部文章持续更新。

  • Time: 2025-2-22

  • Content: 重写并改名原文章在服务器上使用宝塔部署Hexo为Hexo优化：速度与SEO，新增Cloudflare删缓存脚本第二代，优化代码块css。

  • Time: 2025-2-22

  • Content: 新增一篇文章:解决Hexo中图片因跨域资源共享（CORS）政策或引用来源限制无法显示问题,以防后续忘记。

  • Time：2025-1-26

  • Content：新增两篇文章灵活运用Docker--部署应用与解决文章链接地址结尾无.html访问问题，修改文章安卓实用软件，修改首页动态标题加载时间。

  • Time：2025-1-25

  • Content：删除部分敏感/废话文章，提示文章质量，删除末尾的多余提示，更换顶部图外链，增快博客访问速度，增加首页文章封面图片。

 

鸣心/Write
]]>https://b.wihi.top/posts/1ee8a059.html2025-01-25T04:00:00.000Z笔搁纸鸯动态日志，记录博客更新内容，文章修改增减等，从2025年1月25日开始记录记录，实时更新，你可以通过本文章更好的了解笔搁纸鸯动态日志(实时更新)2026-04-05T15:30:06.000Z鸣心获取图片链接的油猴脚本

前段时间研究了Python、Shell脚本爬虫，发现都得模拟浏览器访问然后爬取源码，后来脑洞大开，直接写个油猴脚本，直接获取当前源码并且提取图片链接并且保存到一个txt文件种非常方便。

Last time: 2024/10/5

源码：

废话不多说，直接上代码：

请尊重我的劳动成果，禁止用于商业售卖，转发请标明来源。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// ==UserScript==
// @name         提取页面图片链接到文件（可拖动）
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  在点击悬浮按钮后提取页面中所有图片的链接到文本文件并提供下载链接，支持拖动操作
// @author       CSDevil
// @match        *://*/*
// ==/UserScript==

(function() {
    'use strict';

    let startX, startY;
    const floatingButton = document.createElement('div');
    floatingButton.style.position = 'fixed';
    floatingButton.style.top = '50%'; 
    floatingButton.style.left = '10px'; 
    floatingButton.style.transform = 'translateY(-50%)'; 
    floatingButton.style.width = '50px';
    floatingButton.style.height = '50px';
    floatingButton.style.background = '#007bff';
    floatingButton.style.color = '#fff';
    floatingButton.style.borderRadius = '50%';
    floatingButton.style.textAlign = 'center';
    floatingButton.style.lineHeight = '50px';
    floatingButton.style.cursor = 'pointer';
    floatingButton.style.zIndex = '99999';
    floatingButton.textContent = '提取';

    let isProcessing = false;

    // 添加触摸事件处理
    floatingButton.addEventListener('touchstart', function(e) {
        const touch = e.touches[0];
        startX = touch.clientX - floatingButton.getBoundingClientRect().left;
        startY = touch.clientY - floatingButton.getBoundingClientRect().top;
    });

    floatingButton.addEventListener('touchmove', function(e) {
        e.preventDefault();
        const touch = e.touches[0];
        floatingButton.style.left = (touch.clientX - startX) + 'px';
        floatingButton.style.top = (touch.clientY - startY) + 'px';
    });

    // 添加点击事件监听器
    floatingButton.addEventListener('click', function() {
        if (isProcessing) return;
        isProcessing = true;

        // 提取页面中所有图片链接
        const imageLinks = Array.from(document.querySelectorAll('img'))
            .map(image => image.src)
            .filter(src => src); // 过滤有效的src

        // 将链接保存到文本文件并提供下载链接
        const linkText = imageLinks.join('\n');
        const blob = new Blob([linkText], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        
        // 获取当前网页的URL并进行处理
        const pageUrl = window.location.href;
        const sanitizedPageUrl = pageUrl.replace(/[^a-zA-Z0-9]/g, '_').slice(0, 50);
        const fileName = `${sanitizedPageUrl}_image_links.txt`;

        // 创建下载链接并模拟点击
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = fileName; // 使用处理后的URL作为文件名
        downloadLink.style.display = 'none'; // 隐藏链接
        document.body.appendChild(downloadLink);
        downloadLink.click();

        // 提供下载反馈
        const notification = document.createElement('div');
        notification.textContent = '正在下载...';
        document.body.appendChild(notification);

        // 清理工作
        setTimeout(() => {
            document.body.removeChild(downloadLink); // 移除链接
            URL.revokeObjectURL(url); // 释放URL对象
            document.body.removeChild(notification); // 移除通知
            isProcessing = false; // 重置状态
        }, 100); // 延时释放，确保下载完成
    });

    // 将悬浮按钮添加到页面中
    document.body.appendChild(floatingButton);
})();


 

后记：

代码本无害，请合法使用，不要非法获取网站图片。

完结撒花

 

鸣心/Write
]]>https://b.wihi.top/posts/d288e07e.html2024-07-22T04:00:00.000Z分享一个实用的油猴脚本，能够提取网页中的所有图片链接并保存为文本文件。脚本支持拖拽操作，自动生成包含当前URL的文件名，方便于进行图片下载和筛选获取图片链接的油猴脚本2024-07-22T04:00:00.000Z鸣心Android-实用工具记录

突然间灵光一闪，打算写一篇文章，记录一下Android使用时候一些用的上的APP

工具类

MT管理器

顾名思义，Android系统的文件管理器，你可以选择压缩、编辑文件，最主要的是你可以对APK文件进行修改，当然，它有会员才能解锁的功能，不过如果你不需要高级的安卓逆向的操作，你是不需要会员的。截止2025年7月它还又更新了视频音乐播放，代码文字自动补全，链接网络存储（FTP、S3等）等另我爱不释手的功能。它的功能还有很多，自己去了解趴。

QR扫码器

这玩意就是识别二维码用的，不过只能识别标准二维码，像微信的小程序那样的二维码就识别不了了，不过用起来还是嘎嘎方便的。

  • 未找到官网

Termux

这款软件相当于一个linux系统的虚拟机，你可以执行linux的指令等，安装包也不大，如果你有本地跑Node等需求的话可以使用这款软件。

Lit图片压缩

顾名思义，用来压缩图片的，找不到作者、官网，因此其的付费才能用的功能彻底用不了了，去付费版我也没有，因此只能用来压缩png、jpg等图片，有图片数量限制。

  • 未找到官网

MX播发器

安卓上的媒体播放器，特点就是方便简洁，值得一提的是还有个小窗模式，手机系统自带到视频播放器有些臃肿(因为我的手机配置比较低的缘故，光是打开软件就需要5秒左右)

  • 未找到官网

Thunderbird

这是一个广受欢迎的开源免费邮箱客户端，并不是安卓独有，而是多个平台都有。可以把邮箱账号登录在该软件上进行邮件的收发等功能。有这款软件就可以丢掉臃肿的多个不同邮箱的不同客户端了，只需要这一个就可以了。

官网地址：

豆包AI

说豆包AI是为了夸赞它的AI绘图能力，我使用了很多家绘图AI进行绘画人像，发现只有豆包AI画的最自然，最细节。当然这只是我的个人观点。

官网地址：

Obsidian

这是一款非常好用的markdown笔记软件，同时可以用来管理一些知识数据，可以构建知识图谱等，非常好用。

官网地址：

Read You

这是一个以 Material You 风格呈现的 Android RSS 阅读器，你可以用它来导入本站的RSS订阅。

网络代理类

Httpcanary

俗称小黄鸟，说好点是应用网络流量调试，其实就是抓包，因此这玩意也很敏感，就不附上下载链接了，官方跑路了一段时间又回来了，改了个新名字叫做Reqable行行前往，去百度、必应、Github搜索吧，这里就不附上下载链接了。

Virtual Hosts

这款软件可以帮助你在安卓手机上不需要root就可以修改host，原理和Httpcanary差不多，都是创建本地VPN进行修改网络，这里附上该项目的Github仓库地址，如果进不去请更换网络。

Clash

这款软件是用来连接代理服务器的，匹夫无罪，怀璧其罪。这款软件本身只是用来连接代理服务器，但是如果你用了干非法的事情那就不行，敏感软件，自己去必应、Github搜索Clash 有电脑版和手机版，自行下载了解使用吧。

 

鸣心/Write
]]>https://b.wihi.top/posts/974b1ce3.html2024-06-10T04:00:00.000Z推荐一些Android平台上实用但不太知名的工具类APP，包括文件管理、二维码扫描、终端模拟、图片压缩、媒体播放器等，希望对同样使用安卓但找不到趁手工具的朋友有所帮助Android-实用工具记录2026-04-05T15:29:01.000Z鸣心使用Docker搭建NSFW-JS鉴黄接口

本文章部分内容来源于此文章，如有侵权请联系删除

起因是这样的，搭建了个图床但苦于找不到合适的鉴黄，终于皇天不负有心人，让我给找到了，写篇文章记录一下。

找来找去，目前就发现一个方法，Docker安装鉴黄接口，NSFW JS可能不是很准确，但是任然可以识别90%的违规图片，它重在开源，而且自建免费，不用担心被刷。

正文：

  1. 安装
    你先得有个docker环境，docker怎么安装就去百度吧，很简单的。然后执行以下代码：
1
2
#复制下面的命令部署NSFW JS
docker run -d -p 127.0.0.1:5000:5000/tcp \ --env PORT=5000 \ --restart=always \ eugencepoi/nsfw_api:latest

上面这个代码里面“127.0.0.1:5000”是只对127.0.0.1的内网开放，因此外网是访问不了的，需要改为外网也能访问的话把**127.0.0.1:**去掉即可

吐槽一句：镜像真大，带宽小的机子得下载半个小时。

访问调用方法：

访问下面的链接：

http://127.0.0.1:5000?url=

“url=”后面跟你的图片链接，貌似这个API只能对图片链接进行鉴别，其他方法好像不行。

终端可以用这个指令：

1
curl -X GET -H 'Content-Type: application/json' "http://127.0.0.1:5000?url="
  1. 测试

终端执行以下代码：

1
curl -X GET -H 'Content-Type: application/json' "http://127.0.0.1:5000?url=https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

正常应该返回这个：

1
{ "score": 0.00016061133646871895, "url": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" }
  1. 返回字段说明

score是图片得分，范围在0-1之间，1 表示它肯定是成人内容，而 0 则不是。其实大于0.9就可以认为是成人内容。

更多使用说明可以查看Docker hub上的介绍

经过测试好像被鉴别的链接地址的域名每个小时只能用1000次，不然会提示Too many 好像是为了防止恶意调用，请自行研究。

结语

写这篇文章主要是为了记录一下，防止哪天找不到。

完结撒花！

 

鸣心/Write
]]>https://b.wihi.top/posts/17981503.html2024-05-26T04:00:00.000Z使用Docker快速部署NSFW-JS鉴黄API接口的完整教程，包含安装命令、调用方法、测试示例和结果解析使用Docker搭建NSFW-JS鉴黄接口2024-05-26T04:00:00.000Z