经验记录

# anitabi.cn 接口参数逆向分析

> 本文记录了一个前端 App 开发中的常见场景：在做 Anime Map 客户端时，需要从 [anitabi.cn](https://www.anitabi.cn) 获取地图数据。对方没有公开 API 文档，所以只能从网页源码里找接口。

---

## 背景

[anitabi.cn](https://www.anitabi.cn) 是一个动漫巡礼地图站点，上面标注了各番剧的取景地坐标、图片等信息。我想做一个移动端 App 来展示这些数据，第一步就是搞清楚它的数据从哪儿来。

打开 DevTools 的 Network 面板，刷新页面，很快就能看到一些 JSON 请求：

```
/d/g.json?d=fwl3
/d/g0.json?d=fwl3
/d/g1.json?d=fwl3
...
```

这些就是我们要的数据接口。但注意 URL 末尾那个 `?d=fwl3`——每次刷新可能都不一样，而且直接去掉 `?d=` 去请求，大概率会 403 或拿到过期的缓存数据。

所以核心问题变成了：**这个 `d` 参数是怎么生成的？**

---

## 寻找 `d` 参数的生成逻辑

### 第一步：搜索关键词

在 DevTools 的 Sources 面板里全局搜索 `d/g.json?d=`，很快就能找到这样一段代码：

```js
const P = T();
const h = `/d/g.json?d=${P}`;
const m = await I(h, r => { e(r * 0.3) });
```

这里 `T()` 就是生成 `d` 值的函数。

### 第二步：定位函数 T

继续往上翻，找 `T` 的定义：

```js
import { h as z, i as T } from "./5361fdd2.js";
```

说明 `T` 是从 `5361fdd2.js` 导入的，并且在该模块中名叫 `i`。

### 第三步：找到最终实现

打开 `5361fdd2.js`，拉到文件末尾看导出映射：

```js
// 伪代码示意
export { ..., Ee as i, ... }
```

`i` 就是 `Ee`。搜索 `Ee` 函数，找到它的实现：

```js
const Ee = () => (
  Math.floor(Date.now() / 1e3 / 60 / 24) + 6
).toString(36);
```

就是一行代码。

---

## 拆解公式

```js
Math.floor(Date.now() / 1e3 / 60 / 24) + 6).toString(36)
```

一步步来：

| 步骤 | 运算 | 含义 |
|------|------|------|
| `Date.now()` | `1719820800000` | 当前时间戳（毫秒），JavaScript 标准 |
| `/ 1e3` | `1719820800` | 除以 1000，转成秒 |
| `/ 60` | `28663680` | 除以 60，转成分钟 |
| `/ 24` | `477728` | 除以 24，转成小时……不对，我们其实想做的是：`秒 → 分钟 → 小时 → 天` |

更直观的写法其实是：

```js
Math.floor(Date.now() / (1000 * 60 * 60 * 24))
// = 从 1970.1.1 到现在的天数
```

`1e3` = `1000`，`/ 1e3 / 60 / 24` 连除就是先除 1000 得秒，再除 60 得分钟，再除 24 得天。**结果是 UTC 天数**。

然后：

- **`+ 6`**：偏移量。不知道 anitabi 为什么选 6，可能是为了和某个起始日期对齐，也可能只是为了和"裸天数"错开，让直接猜 URL 的人多一步。
- **`.toString(36)`**：把数字转成 36 进制。36 进制的字符集是 `0-9a-z`，比 10 进制更紧凑。比如十进制 `20613` 在 36 进制下是 `fwl3`，短了一半。

> 补充知识：`Number.prototype.toString(radix)` 支持 2-36 进制。36 进制是 JavaScript 内置的最大进制，常用于生成短哈希、短邀请码等。

用当前日期验证一下：

```js
const d = () => (Math.floor(Date.now() / 1000 / 60 / 24) + 6).toString(36);
d(); // => "fwl3"（取决于你看到这篇文章的日期）
```

如果明天的 URL 是 `?d=fwm4`，后天的 URL 是 `?d=fwm5`——增长规律是连续的，说明公式成立。

### 为什么要加这个参数？

`d` 参数是一个**按天轮换的缓存破坏器（Cache Buster）**：

- 如果不加，CDN 可能缓存 `/d/g.json` 长达数天甚至数月
- 如果加随机数，每次刷新 URL 都不同，CDN 每次都回源，浪费带宽
- `d` 按天变化，**每天换一次**，CDN 每天只回源一次，其余请求都命中缓存

兼顾了**数据新鲜度**和**缓存效率**。

---

## 数据接口一览

确认 `d` 参数后，所有接口就通了。anitabi.cn 一共提供了 8 个 JSON 端点：

| 接口 | 用途 | 返回结构 |
|------|------|---------|
| `/d/g.json?d=xxx` | 番剧列表+总版本号 | `[RawGBangumi[], number, number]` |
| `/d/g0.json?d=xxx` | 第 1 批番剧详情 | `RawGDetail[]` |
| `/d/g1.json?d=xxx` | 第 2 批番剧详情 | `RawGDetail[]` |
| `/d/g2.json?d=xxx` | 第 3 批番剧详情 | `RawGDetail[]` |
| `/d/g3.json?d=xxx` | 第 4 批番剧详情 | `RawGDetail[]` |
| `/d/g4.json?d=xxx` | 第 5 批番剧详情 | `RawGDetail[]` |
| `/d/g5.json?d=xxx` | 第 6 批番剧详情 | `RawGDetail[]` |
| `/api/bangumi/icons.svg?d=xxx` | 番剧图标 SVG | 见下文 |

### g.json：番剧清单

g.json 返回结构是 `[番剧列表, 未知数字, 版本号]`。

每条番剧是一个 17 维数组（长度固定，用索引确定字段）：

```ts
// 从 raw 数组到业务对象的映射
const [id, cn, en, title, city, color, cover, fade,
       cat, lat, lng, zoom, pointMeta, abbr, tags, priority, icon] = item;
```

关键字段：
- `id`：番剧唯一 ID
- `cn` / `en` / `title`：中文名 / 英文名 / 原始标题
- `lat` / `lng` / `zoom`：地图定位（纬度、经度、缩放级别）
- `pointMeta`：该番剧所有取景地的**坐标索引**。格式是扁平数组——每 4 个元素为一个点位的信息：`[id, lat, lng, priority, id, lat, lng, priority, ...]`

### g0-g5.json：番剧详情（分片）

按番剧 ID 分桶到 6 个 JSON 文件中。每条记录也是一个数组：

```ts
const [bangumiId, theme, points[], modified] = entry;
```

- `bangumiId`：对应 g.json 中番剧的 id
- `theme`：番剧主题图（SVG 图标相关信息）`[src, ids[], modified, w, h]`
- `points[]`：取景地详情列表
- `modified`：最后修改时间戳

### 缓存策略

这套接口的调用流程是：

```
1. 请求 g.json，拿到 remoteModified
2. 对比本地缓存的 modified
   ├─ 一致 → 直接使用缓存，跳过后续请求
   └─ 不一致 → 并行请求 g0-g5.json，合并数据写入缓存
```

`g.json` 的第三个字段就是版本号，用来判断数据是否需要更新。这是一种**增量拉取**策略：每次先请求一个轻量的摘要文件（g.json），确认有变化再拉详情。

---

## 数据组装

拿到所有原始数据后，需要把 g.json 的番剧信息和 g0-g5 的详情合并，这是典型的**分片数据整合**。

合并逻辑示意：

```
for each 番剧 in g.json:
    detail = detailMap.get(番剧.id)       // 从 g0-g5 中找到对应详情
    
    // 将 pointMeta 建成查找表
    pointLookup = {}
    for (i = 0; i < pointMeta.length; i += 4):
        pointLookup[pointMeta[i]] = { geo, priority }
    
    // 将详情中的裸 point 与坐标索引合并
    points = detail.points.map(rawPoint => {
        meta = pointLookup[rawPoint.id]
        return { ...rawPoint, geo: meta.geo, priority: meta.priority }
    })
```

为什么 g.json 要把坐标和详情分开？这是一个**关注点分离**的设计：g.json 用于地图渲染（只需要位置信息），g0-g5 用于详情页展示（需要图片、描述等），而且 g0-g5 的数据量远大于 g.json，可以按需加载。

对开发者来说，这意味着两轮请求和一次归并操作，不算复杂。

---

## 一些值得注意的点

**1. 数组即 Schema**

anitabi 没有用 JSON 对象和字段名，而是用定长数组 + 位置索引来编码数据。这是一种压缩策略——数组的 JSON 序列化比对象短得多（不需要重复写字段名），对于按 KB 计费的大数据量接口，能省下 30-50% 的传输体积。

代价是代码可读性差，需要维护位置到字段的映射表。

**2. 接口参数也是逆向产物**

`d` 参数需要逆向 JS 才能拿到算法。这意味着即使别人发现了这些接口，如果没注意到 `d` 参数会过期，直接硬编码 URL 的话，第二天就失效了——这是一种轻量的反爬手段。

**3. CDN 缓存和实时性的平衡**

Anitabi 的数据不是实时更新的（按天级别），所以用 `d` 参数做天级缓存破坏是合理的。对于需要分钟级更新数据的场景，这种方法就不适用了。

---

## 总结

整个逆向过程可以概括为 4 步：

```
Network 面板抓接口 → 发现 d 参数 → Sources 面板搜 JS → 定位 Ee 函数
```

最终还原出的公式只有一行代码，但它背后涉及：CDN 缓存策略、进制转换、分片加载、数组编码压缩，以及前后端数据组装。

如果你也在做一个数据抓取或第三方客户端开发，希望这份笔记对你有帮助。

anitabi.cn 接口参数逆向分析

### 通过devtools分析得出anitabi.cn圣地巡礼地图数据结构和处理逻辑。
因为在月初去日本旅行，使用anitabi网站感觉用户体验不太好，后续打算自己开发一个自用的圣地巡礼app。由于anitabi官方的开放接口文档不是很全，所以通过分析其页面请求获取相应的数据源和数据结构。

1. 进入地图页面后，会请求几个关键接口获取巡礼点数据
- https://www.anitabi.cn/d/g0.json?d=qhs3 （只有首次进入页面时，会发送5个请求g0-g5.json）

```ts
// 返回数据示例
[
  [
    106372, // bangumiId
    [
      "/images/ptheme/106372_100_76.webp?v=h4bdc", // theme.src
      [ // theme.ids
        "nstqa5i3w"
      ],
      1725289939638, // theme.modified
      100, // theme.w
      76 // theme.h
    ],
    [
      [
        "kuk6a9t6z", // id
        "JR西宮駅前交差点", // name
        0,  // cn
        0,  // isFolder
        0, // mid
        1057, // uid
        "/images/points/226956/kuk6a9t6z_1716960301789.jpg", // image
        0, // fid
        null, // ep
        "", // s
        "位于佐知子的公司附近。", // mark
        0, // origin
        0, // originLink
        "兵库", // folder
        10358 // density
      ],
    ],
    1725342953859 // modified
  ]
]
```

- https://www.anitabi.cn/d/g.json?d=qhs2
```ts
// 返回数据示例 值为0代表空
[
  [
    226956, // id
    "", // cn
    0, // en
    "SeaBed", // title
    "神户市", // city
    "#53abb2", // color
    "/images/bangumi/226956.jpg", // cover
    8.5, // fade
    "游戏", // cat
    6.19643, // geo[0]
    134.099687,// geo[1]
    1.1, // zoom
    [
      "kuk6a9t6z", // points[0].id
      34.737722, // points[0].geo[0]
      135.347341,// points[0].geo[1]
      1272 // points[0].priority
    ],
    0, // abbr 缩写
    0, // tags 值除了0还可能是空数组
    null, // priority
    "/images/icon/226956.jpg" // icon
  ]
]
```

3. 之后会对数据进行组装，保存数据至indexedDB中。数据结构如下
```ts
type Data = {
  data: {
    bangumis: Bangumi[];
    modified: number;
  }
  id: string;
  ms: number;
}

type Bangumi = {
    id: number; // bangumiId
    cn?: string; // 番剧中文名称
    en?: string; // 番剧英文名称
    title?: string; // 番剧标题
    city?: string; // 城市
    color?: string; // 颜色
    cover?: string; // 封面地址
    fade?: number; // 淡入度？
    cat?: string; // 分类
    geo?: [number, number]; // 位置
    zoom?: number; // 地图缩放度
    points?: {
        id: string;
        name?: string; // 点位名称
        cn?: string; // 点位中文名称
        isFolder: boolean;
        mid?: string;
        uid?: number;
        image?: string; // 点位图片地址
        fid?: string;
        ep?: number; // 点位发生在集数
        s?: number; // 点位发生在集数的第几秒
        mark?: string; // 点位备注信息
        origin?: string; // 来源
        originLink?: string; // 来源地址
        folder?: string;
        density?: number;
    }[]
    theme: { // 主题
        h: number; // 高度
        ids: string[]; // ids
        modified: number; // 修改时间戳
        src: string; // 图片地址
        w: number; // 宽度
    }
    abbr?: string; // 缩写
    tags?: string[]; // 标签
    priority?: number; // 优先级
    icon?: string; // 图标地址
}
```

anitabi.cn圣地巡礼网站数据结构剖析

在A电脑中创建证书，B电脑中需要A电脑中创建证书的私钥才能够进行签名。具体做法就是在A电脑中导出私钥.p12文件提供给B电脑安装

ios Xcode发版证书私钥问题

日常踩坑

react-native版本0.81，create-react-native-library版本0.54.3
按照官方文件执行

```bash
npx create-react-native-library@latest --local
```
执行完成后，直接运行项目会报错

```js
The NODE_ENV environment variable is required but was not specified. Ensure the project is bundled with Expo CLI or NODE_ENV is set. Using only .env.local and .env
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:6:23 Unresolved reference 'specs'.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:10:3 Unresolved reference 'NativeTestModuleSpec'.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:12:3 'getName' overrides nothing.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:18:3 'multiply' overrides nothing.
```

### 解决方案
1.在module.kt文件中添加代码

```kt
import com.facebook.fbreact.specs.NativeTestModuleSpec
```

2.在module.kt中添加代码并配置模块中的package.json

```js
import com.testmodule.NativeTestModuleSpec

"codegenConfig": {
    "name": "TestModuleSpec",
    "type": "modules",
    "jsSrcsDir": "src",
    "android": {
       // 这里指定java包名
       "javaPackageName": "com.testmodule"
     }
  },
```

使用create-react-native-library创建项目本地turboModules构建报错

1. 前端录屏功能
- 使用rtcRecorder对视频流进行录制。
- 指定区域录制，使用canvas对视频帧进行截取，然后录制canvas流。
- 录屏功能electron应用中实现。

```js
// 主进程中使用desktopCapturer
  session.defaultSession.setDisplayMediaRequestHandler(
    (_, callback) => {
      desktopCapturer.getSources({ types: ['window'] }).then((sources) => {
        // Grant access to the first screen found.
        callback({ video: sources[0], audio: 'loopback' })
      })
      // If true, use the system picker if available.
      // Note: this is currently experimental. If the system picker
      // is available, it will be used and the media request handler
      // will not be invoked.
    },
    { useSystemPicker: true }
  )
  
// 渲染进程中
export const useDisplayMedia = (options: UseDisplayMediaOptions) => {
  const { onStream } = options
  const [stream, setStream] = useState<MediaStream | null>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const onStreamRef = useRef(onStream)

  useEffect(() => {
    navigator.mediaDevices
      .getDisplayMedia({
        audio: true,
        video: {
          width: { ideal: 1920 },
          height: { ideal: 1080 },
          frameRate: { ideal: 60, max: 60 }
        }
      })
      .then((mediaStream) => {
        streamRef.current = mediaStream
        setStream(mediaStream)
        onStreamRef.current?.(mediaStream)
        // 打印实际分辨率
        const track = mediaStream.getVideoTracks()[0]
        console.log('实际分辨率:', track.getSettings())
      })
      .catch((e) => {
        console.error('获取媒体流失败:', e)
      })

    return () => {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }
    }
  }, [])

  return {
    stream
  }
}
```

最近项目中的新接触

1.gradle下载不动需要开启代理，开启代理后在`/android/gradle.properties`文件中增加以下代码

```
systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=7890
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=7890
```

2.yarn android启动项目报错信息"Could not move temporary workspace"
使用 `npx react-native run-android` 命令替换 `yarn android` 启动项目
[issues28475](https://github.com/gradle/gradle/issues/28475)


react-native@0.75.1新项目启动时gradle下载不动和“Could not move temporary workspace”问题.

- 由原来直接引入autoUpdater改为引入DebUpdater在创建autoUpdater实例。

```ts
// import { autoUpdater } from 'electron-updater';
import { DebUpdater } from 'electron-updater';

const autoUpdater = new DebUpdater({
  provider: 'generic',
  url: 'http://172.20.0.6:5173'
})

autoUpdater.checkForUpdatesAndNotify();
```

electron-forge结合electron-updater实现在linux系统中.deb包的自动更新功能

1.设置更新源

```js
import { autoUpdater } from 'electron-updater';

autoUpdater.setFeedURL({
  provider: 'generic',
  // 更新源地址
  url: 'http://127.0.0.1:5173'
});
```

- 服务端需要返回一个latest.yml文件

```yml
# HTTP GET http://127.0.0.1:5173/latest.yml
version: 1.0.2
files:
  url: http://localhost:5173/healthybd-ytj-1.0.0-Setup.exe
sha512: 5ca8d0f2e2440782d1e2f7dcb081a65430e1571a9e764c3fc74f034944499afb0422b5ffb755274f866902e0d04f8acb7e073dfc43c452de9f8566199dd1368b
path: http://localhost:5173/healthybd-ytj-1.0.0-Setup.exe

```
2.检测更新

```js
import { autoUpdater } from 'electron-updater';

autoUpdater.autoDownload = true;
autoUpdater.checkForUpdatesAndNotify()
```

## 注意事项
1. 开发环境调式需要设置`autoUpdater.forceDevUpdateConfig = true`
2. 开发环境调试需要在项目根目录下创建一个**dev-app-update.yml**文件
```yml
# dev-app-update.yml
provider: generic
updaterCacheDirName: demo-updatar
```
3. 应用安装后根目录下**resources**文件夹中必须要有一个**app-update.yml**文件
    1. 在项目根目录下创建一个**app-update.yml**文件（同dev-app-update.yml）
    2. 通过在**forge.config.ts**配置文件中配置额外的资源文件

```js
const config: ForgeConfig = {
  packagerConfig: {
    extraResource: ['./app-update.yml'],
  },
 }
```



electron-forge结合electron-updater实现自动更新功能

window10系统，android studio中动过SDK版本后，yarn android无法自动启动模拟器。
https://github.com/facebook/react-native/issues/43320#issuecomment-2011072921

rn项目yarn andoird无法自动打开模拟器问题

周六(2024-03-09)凌晨5点多吧快天亮了，被一条邮箱信息吵醒了，迷迷糊糊打开手机看了一眼，planetScale发来的，一开始以为是数据库长时间没用冻结之类的，点进去结果发现是免费数据库停止服务的提醒。

开始着手数据迁移，先是找到vercel一个免费的256mb postgres数据库，但是数据迁移不太顺利，首先是navicat连接数据库要16以上的版本，或者要修改libcc.dll文件，存在无法备份数据问题（未解决），数据迁移还存在自增id问题，导致无法插入新数据。

后来发现社区推荐的tidbcloud也能免费，而且是 5g5个集群，等于25g！！！
迁移过程也很顺利！！！

planetScale数据库不能白嫖了！迁移至tidbcloud

生活杂谈

蒜第二季还要多久呢

nextjs都更新到14了，要不等蒜第二季出了重构一下博客~~~

技术栈也多了个react-native

dota2太久没玩重新定位到统帅了，虽然前段时间打回了超凡，冠绝还有点遥远。。。开黑班子也散了~~~~



快一年了~~~~

PC硬件

## 配置列表
- cpu: i5-12600kf
- 主板: 华硕b660m 重炮手 ddr4
- 内存: 光威8g*2 3600
- 固态: 西数SN770 1T
- 电源: 长城750w 金牌全模组
- 散热: 瓦尔基里 c240w
- 机箱：半岛铁盒w3
- 显卡: 旧的750ti 等40系

## 装机遇到的问题和解决
只要接了任意usb设备就不能进入bios。未装系统情况下直接黑屏；已装系统情况下，能进系统，开机按f2进bios直接黑屏。

经过排查，怀疑是750ti或其使用的显示器连接线缆兼容性问题导致的。解决办法就是不接任何usb设备后进入bios，开启csm兼容。

记录下装机踩坑

## 需求描述
开发一个在线聊天功能，打开会话时，消息内容容器固定高度，当消息列表数量超过内容容器高度时，出现滚动条，并且滚动条默认在最下方。

## 实现方案
### 1. 列表正常渲染，通过js控制滚动逻辑
这种方法最好理解和比较简单，通过调用dom的api让滚动条滚动到最底部即可。但是会存在一个小问题，当消息列表数据更新时，有概率滚动条会从顶部瞬间移动到底部，会造成一种像闪屏的感觉。 可以在切换会话时设置opacity为0，消息列表渲染完成后再设置回1来解决。
> react例子
```ts
// 判断是否进行滚动到底部
const isReacthBottom = useRef(true);

useEffect(() => {
    isReacthBottom.current = true;
}, [sessionName]);

// 当列表数据发生改变时，手动让滚动条滚动到最下方
useEffect(() => {
    if (isReacthBottom.current) {
      wrapperRef.current!.scroll({ top: wrapperRef.current!.scrollHeight });
    }
}, [list]);

// 参考微信PC端，当前会话如果往上滚动了，有新消息来不进行滚动
useEffect(() => {
    const fn = () => {
      if (
        wrapperRef.current!.scrollTop + wrapperRef.current!.clientHeight ===
        wrapperRef.current!.scrollHeight
      ) {
        isReacthBottom.current = true;
      } else {
        isReacthBottom.current = false;
      }
    };
    wrapperRef.current!.addEventListener('scroll', fn);

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      wrapperRef.current!.removeEventListener('scroll', fn);
    };
}, []); 
  
  // 参考dom结构
  <div className="online-chat-content">
      <div className="header">{sessionName}</div>
      <div className="content" ref={wrapperRef}>
        {list.map((message, i, mapArray) => {
          const img = message.position === 'left' ? logo : avatar;
          const showTime =
            i === 0 || isTwoTimeDiffGt5Minutes(mapArray[i].time, mapArray[i - 1].time);

          return (
            <div key={message.id} className="content-item" style={{ opacity: showMsg ? 1 : 0 }}>
              {showTime && (
                <div className="content-time">
                  <span>{moment(message.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                </div>
              )}
              <div
                className={cn(['content-message', message.position])}
              >
                <img width={30} src={img} alt="" />
                <div className="message">{message.content}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
```

### 2. 通过flex-direction: column-reverse 解决
这种方法可以让滚动条默认从下往上，但是有浏览器兼容性问题，部分浏览器会出现content容器无法滚动的问题，并且还需要对渲染的列表数据进行reverse反转。

> 参考dom结构
```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> css代码

```css
.content {
    display: flex;
    flex-direction: column-reverse;
    /** 
    * 为什么要使用max-height？
    * 因为当消息列表数据不足以形成滚动条时，消息会从下往上渲染，max-height可以完美解决
    */ 
    max-height: 500px;
    overflow-y: auto;
}
.message-item {
    height: 300px;
    flex-shrink: 0;
    flex-grow: 0;
}
```

### 3. 通过 transform 反转来解决 (目前我项目中使用的方法)
方法2的上位替代，主要使content容器进行翻转，然后使里面的message容器再翻转一次（回正）。
> 参考dom结构

```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> 参考css代码

```css
.content {
    max-height: 500px;
    overflow-y: auto;
    transform: scale(1, -1);
}
.message-item {
    height: 300px;
    transform: scale(1, -1);
}
```
**此种方法可以很简单的内容从下往上渲染，但是需要将列表数据reverse反转，并且由于content容器反转了，导致滚动条滚动方向反过来了，需要通过几行js代码来解决。**
> 参考js代码

```js
const fn = (e) => {
  if (e.deltaY) {
    e.preventDefault();
    e.currentTarget.scrollTop -=
      parseFloat(getComputedStyle(e.currentTarget).getPropertyValue('font-size')) *
      (e.deltaY < 0 ? -1 : 1) *
      3;
  }
};
const content = document.querySelector('.content')
content.addEventListener('wheel', fn)
```

开发聊天室功能，聊天消息滚动默认从下往上的问题探讨

# 手动更新
- 使用router.push跳转不会马上看到revalidate更新结果，需要手动刷新页面。而使用Link标签可以立马看到更新结果。
- 页面revalidate后，如果Link跳转页面时携带query参数，会导致不能立马看到更新结果，需要手动刷新页面才能看到更新内容。
- 使用postman调用revalidate可以更新吗？可以，但是与请求的地址有没有www有关系，可以在vercel配置域名无www的时候重定向到有www。与http协议无关。

# 自动更新
简单总结就是在请求一个页面之后，当时间超出revalidate设定的值，下一次请求该页面的内容将会更新。
> [参考链接](https://reactions-demo.vercel.app/)


nextjs中Incremental Static Regeneration踩到的坑！

前端技术

## 注入参数

```ts
// 向组件注入primaryColor: 'pink'参数
interface WithThemeProps {
    primaryColor: string
}

export function withTheme<T>(WrappedComponent: React.ComponentType<T & WithThemeProps>) {
    // Try to create a nice displayName for React Dev Tools.
    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'

    // Creating the inner component. The calculated Props type here is the where the magic happens.
    const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
        // Fetch the props you want to inject. This could be done with context instead.
        const themeProps = {
            primaryColor: 'pink',
        }
        // props comes afterwards so the can override the default ones.
        return <WrappedComponent {...themeProps} {...(props as T)} />
    }

    ComponentWithTheme.displayName = `withTheme(${displayName})`

    return ComponentWithTheme
}
```

## 增强参数

```ts
// 给组件增加loading参数
interface EnchanceProps {
    loading: boolean
}

const enchanceLoading = <T extends {}>(WrappedComponent: React.ComponentType<T>) => {
    const ComponentWithLoading = (props: T & EnchanceProps) => {
        const { loading } = props

        return loading ? <div>loading.....</div> : <WrappedComponent {...props} />
    }

    return ComponentWithLoading
}
```

## 注入和增强使用

```ts
const A = (props: { a?: string } & WithThemeProps) => {
    return <div>{props.primaryColor}</div>
}

const AwithTheme = withTheme(A)

const LoadingA = enchanceLoading(AwithTheme)

const B = () => {
    return <LoadingA loading={true}></LoadingA>
}
```

React高阶组件之注入和增强使用示例

1、 打开巴哈网站
2、 按F12打开控制台复制下面代码到控制台，按回车。**(代码最后一行30868改为你要下载弹幕的视频地址上"sn="后面那串数字)**
3、 等待片刻，控制台会输出一串xml字符串，点击copy复制。
4、 电脑上新建一个.txt文件，粘贴xml字符串进入，删掉开头和结尾的引号。
5、 修改后缀名为.xml，打开弹弹play导入弹幕即可。

```js
function domToStirng(dom) {
    const div = document.createElement('div')
    div.appendChild(dom)
    return div.innerHTML
}

const getDmXml = async (sn) => {
    const formData = new FormData()
    formData.append('sn', sn)

    const res = await fetch('https://ani.gamer.com.tw/ajax/danmuGet.php', {
        method: 'POST',
        body: formData,
    }).then((res) => res.json())

    const dList = res
    let i = `<i xmlns:xsp="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><chatserver>chat.bilibili.com</chatserver><chatid>10000</chatid><mission>0</mission><maxlimit>8000</maxlimit><source>e-r</source><ds>931869000</ds><de>937654881</de><max_count>8000</max_count>`

    dList.forEach((item) => {
        let d = document.createElement('d')
        d.setAttribute('p', `${item.time / 10},1,25,16777215,1659830799719,0,0,0`)
        d.innerText = item.text
        i += domToStirng(d)
    })

    i += '</i>'

    return (`<?xml version="1.0"?>` + i).replaceAll('<br>', '')
}
// 下面30868改为你要下载弹幕的视频地址上"sn="后面那串数字
await getDmXml('30868')

```

临时解决巴哈弹幕无法获取的问题（需要梯子能进入巴哈网站）

【LycoReco】 next.js开发个人博客过程中笔记

【LycoReco】 next.js开发个人博客中遇到的坑！

测试

---
# frontmatter: https://jekyllrb.com/docs/front-matter/
layout: post
title: Blogging Like a Hacker
---

## Markdown Basic Syntax

I just love **bold text**. Italicized text is the _cat's meow_. At the command prompt, type `nano`.

My favorite markdown editor is [ByteMD](https://github.com/bytedance/bytemd).

1. First item
2. Second item
3. Third item

> Dorothy followed her through many of the beautiful rooms in her castle.

```js
import { Editor, Viewer } from 'bytemd'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const editor = new Editor({
  target: document.body, // DOM to render
  props: {
    value: '',
    plugins,
  },
})

editor.on('change', (e) => {
  editor.$set({ value: e.detail.value })
})
```

## GFM Extended Syntax

Automatic URL Linking: https://github.com/bytedance/bytemd

~~The world is flat.~~ We now know that the world is round.

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

## Footnotes

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

## Gemoji

Thumbs up: :+1:, thumbs down: :-1:.

Families: :family_man_man_boy_boy:

Long flags: :wales:, :scotland:, :england:.


## Mermaid Diagrams

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
