利用飞书多维文档实现博客的信息更新

前言#

在维护个人博客时，我们经常需要更新各种数据，比如书架信息、友链列表等。传统的方式是直接修改JSON文件，这样不仅效率低下，而且容易出错。有没有更便捷的方式呢？答案是肯定的！我们可以利用飞书多维文档来管理这些数据，并通过脚本自动同步到博客中。不但可以实现信息的维护，也可以在手机上实时操作。

示例#

书架

友链

参考与灵感#

本文的实现灵感来自于时歌的文章《基于飞书多维表格的书架实现》。在这篇文章中，时歌详细介绍了如何使用Python脚本实现从飞书多维文档到博客书架数据的同步。我在其基础上进行了改进，使用JavaScript实现了更强大的功能。

项目实现#

技术栈#

飞书开放平台API：用于获取多维文档数据
JavaScript：实现数据同步脚本
Node.js：运行环境
Axios：处理HTTP请求
Sharp：图片处理和压缩
Dotenv：环境变量管理

功能特点#

与原Python版本相比，JavaScript版本的脚本增加了以下功能和改进：

多数据类型支持：不仅支持书架数据，还支持友链数据的同步
图片自动压缩：自动将图片压缩为WebP格式，优化博客加载速度
智能质量调整：根据文件大小自动调整图片质量，确保图片质量和加载速度的平衡
友好的日志输出：提供清晰的进度提示和错误信息
跨平台支持：JavaScript版本可以在更多平台上运行

核心实现#

脚本的核心功能主要包括以下几个部分：

获取访问令牌：通过飞书开放平台API获取访问令牌
读取多维文档数据：从飞书多维文档中读取书架和友链数据
处理数据：对数据进行格式转换和图片处理
保存数据：将处理后的数据保存为JSON文件，供博客使用

项目配置#

在package.json中，我们添加了专门的脚本命令：

1
"scripts": {
2
  "book": "node scripts/feishu_bitable.js"
3
}

这样，我们可以通过运行pnpm run book来执行数据同步。

使用方法#

1. 配置飞书开放平台#

首先，需要在飞书开放平台创建应用，并获取以下信息：

APP_ID
APP_SECRET
BITABLE_ID
TABLE_ID_BOOKS
TABLE_ID_FRIENDS

2. 配置环境变量#

在项目根目录创建.env文件，并添加以下内容：

1
FEISHU_APP_ID=your_app_id
2
FEISHU_APP_SECRET=your_app_secret
3
FEISHU_BITABLE_ID=your_bitable_id
4
FEISHU_TABLE_ID_BOOKS=your_books_table_id
5
FEISHU_TABLE_ID_FRIENDS=your_friends_table_id

3. 运行同步脚本#

执行以下命令即可完成数据同步：

1
pnpm run book

脚本会自动完成从飞书多维文档到本地JSON文件的数据同步，并处理好图片。

项目结构#

1
scripts/
2
└── feishu_bitable.js    # 飞书多维文档同步脚本
3
public/
4
├── data/
5
│   ├── books.json       # 书架数据
6
│   └── friends.json     # 友链数据
7
└── images/
8
    └── books/           # 书架图片保存目录

功能细节#

图片处理#

脚本会自动下载飞书多维文档中的图片，并进行压缩处理：

调整图片尺寸，最大宽度800px，最大高度1200px
转换为WebP格式，提高加载速度
自动调整图片质量，确保文件大小不超过300KB
为图片生成唯一的文件名，避免重复下载

数据格式转换#

将飞书多维文档中的数据转换为博客所需的格式：

书架数据示例：

1
{
2
  "title": "书名",
3
  "author": "作者",
4
  "cover": "封面图片URL",
5
  "status": "阅读状态",
6
  "rating": "评分"
7
}

友链数据示例：

1
{
2
  "title": "站点名称",
3
  "imgurl": "头像图地址",
4
  "desc": "站点描述",
5
  "siteurl": "站点地址",
6
  "tags": ["标签"]
7
}

完整代码实现#

以下是feishu_bitable.js的完整实现代码：

1
import fs from 'fs';
2
import path from 'path';
3
import { fileURLToPath } from 'url';
4
import crypto from 'crypto';
5
import axios from 'axios';
6
import sharp from 'sharp';
7
import dotenv from 'dotenv';
8

9
// 在ES模块中定义__filename和__dirname
10
const __filename = fileURLToPath(import.meta.url);
11
const __dirname = path.dirname(__filename);
12

13
// 加载.env文件中的环境变量
14
dotenv.config();
15

16
// 飞书开放平台的配置
17
const APP_ID = process.env.FEISHU_APP_ID;
18
const APP_SECRET = process.env.FEISHU_APP_SECRET;
19
const BITABLE_ID = process.env.FEISHU_BITABLE_ID;  // 多维表格 ID
20
const TABLE_ID_BOOKS = process.env.FEISHU_TABLE_ID_BOOKS;      // 数据表 ID
21
const TABLE_ID_FRIENDS = process.env.FEISHU_TABLE_ID_FRIENDS;      // 数据表 ID
22

23

24

25
// 图片压缩配置
26
const MAX_SIZE = { width: 800, height: 1200 };  // 最大尺寸
27
const WEBP_QUALITY = 85;  // WebP质量（1-100）
28
const MAX_FILE_SIZE = 300 * 1024;  // 300KB
29

30
/**
31
 * 获取飞书应用的 tenant_access_token
32
 */
33
async function getTenantAccessToken() {
34
  console.log("[步骤1/4] 获取飞书应用访问令牌 (tenant_access_token)...");
35
  try {
36
    const url = "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal";
37
    console.log("  发送请求到飞书认证服务器...");
38
    const response = await axios.post(url, {
39
      app_id: APP_ID,
40
      app_secret: APP_SECRET
41
    }, {
42
      headers: {
43
        "Content-Type": "application/json; charset=utf-8"
44
      }
45
    });
46
    console.log("  ✅ 成功获取访问令牌 ");
47
    return response.data.tenant_access_token;
48
  } catch (error) {
49
    console.error("  ❌ 获取访问令牌失败:", error.message);
50
    return null;
51
  }
52
}
53

54
/**
55
 * 获取多维表格中的BOOKS记录
56
 */
57
async function getBitableRecords() {
58
  console.log("[步骤2/4] 从飞书多维表格获取数据...");
59
  try {
60
    const token = await getTenantAccessToken();
61
    if (!token) {
62
      console.error("  ❌ 无法继续，缺少访问令牌");
63
      return null;
64
    }
65

66
    const url = `https://open.feishu.cn/open-apis/bitable/v1/apps/${BITABLE_ID}/tables/${TABLE_ID_BOOKS}/records`;
67
    console.log(`  发送请求到飞书多维表格 API...`);
68
    console.log(`  多维表格ID: ${BITABLE_ID}, 数据表ID: ${TABLE_ID_BOOKS}`);
69

70
    const response = await axios.get(url, {
71
      headers: {
72
        "Authorization": `Bearer ${token}`,
73
        "Content-Type": "application/json"
74
      }
75
    });
76

77
    const recordCount = response.data?.data?.items?.length || 0;
78
    console.log(`  ✅ 成功获取 ${recordCount} 条记录`);
79
    return response.data;
80
  } catch (error) {
81
    console.error("  ❌ 获取多维表格记录失败:", error.message);
82
    return null;
83
  }
84
}
85
/**
86
 * 获取多维表格中的BOOKS记录
87
 */
88
async function getBitableRecords_Friends() {
89
  console.log("[步骤2/4] 从飞书多维表格获取FRIENDS数据...");
90
  try {
91
    const token = await getTenantAccessToken();
92
    if (!token) {
93
      console.error("  ❌ 无法继续，缺少访问令牌");
94
      return null;
95
    }
96

97
    const url = `https://open.feishu.cn/open-apis/bitable/v1/apps/${BITABLE_ID}/tables/${TABLE_ID_FRIENDS}/records`;
98
    console.log(`  发送请求到飞书多维表格 API...`);
99
    console.log(`  多维表格ID: ${BITABLE_ID}, 数据表ID: ${TABLE_ID_FRIENDS}`);
100

101
    const response = await axios.get(url, {
102
      headers: {
103
        "Authorization": `Bearer ${token}`,
104
        "Content-Type": "application/json"
105
      }
106
    });
107

108
    const recordCount = response.data?.data?.items?.length || 0;
109
    console.log(`  ✅ 成功获取 ${recordCount} 条记录`);
110
    return response.data;
111
  } catch (error) {
112
    console.error("  ❌ 获取多维表格记录失败:", error.message);
113
    return null;
114
  }
115
}
116
/**
117
 * 压缩图片为WebP格式
118
 */
119
async function compressImage(imageBuffer) {
120
  try {
121
    // 获取图片信息
122
    const imageInfo = await sharp(imageBuffer).metadata();
123

124
    // 计算新尺寸（保持宽高比）
125
    let newWidth = imageInfo.width;
126
    let newHeight = imageInfo.height;
127

128
    if (newWidth > MAX_SIZE.width || newHeight > MAX_SIZE.height) {
129
      const widthRatio = MAX_SIZE.width / newWidth;
130
      const heightRatio = MAX_SIZE.height / newHeight;
131
      const ratio = Math.min(widthRatio, heightRatio);
132

133
      newWidth = Math.round(newWidth * ratio);
134
      newHeight = Math.round(newHeight * ratio);
135
    }
136

137
    // 初始质量
138
    let quality = WEBP_QUALITY;
139
    let compressedBuffer;
140

141
    // 尝试不同的质量直到文件大小符合要求
142
    while (true) {
143
      compressedBuffer = await sharp(imageBuffer)
144
        .resize(newWidth, newHeight, { fit: 'inside', withoutEnlargement: true })
145
        .webp({
146
          quality: quality,
147
          effort: 4,
148
          lossless: false
149
        })
150
        .toBuffer();
151

152
      // 如果文件够小或质量已经很低，就退出
153
      if (compressedBuffer.length <= MAX_FILE_SIZE || quality <= 40) {
154
        break;
155
      }
156

157
      // 否则降低质量继续尝试
158
      quality -= 5;
159
    }
160

161
    return compressedBuffer;
162
  } catch (error) {
163
    console.error("Image compression error:", error.message);
164
    throw error;
165
  }
166
}
167

168
/**
169
 * 下载图片并返回本地路径
170
 */
171
async function downloadImage(url, token, saveDir) {
172
  try {
173
    // 生成文件名（使用URL的哈希值）
174
    const urlHash = crypto.createHash('md5').update(url).digest('hex');
175
    const filename = `${urlHash}.webp`;
176
    const localPath = path.join(saveDir, filename);
177
    const webPath = `/images/books/${filename}`;
178

179
    // 如果文件已存在，直接返回路径
180
    if (fs.existsSync(localPath)) {
181
      console.log(`Image already exists: ${filename}`);
182
      return webPath;
183
    }
184

185
    // 下载图片
186
    const response = await axios.get(url, {
187
      headers: { "Authorization": `Bearer ${token}` },
188
      responseType: 'arraybuffer'
189
    });
190

191
    // 压缩图片
192
    const compressedBuffer = await compressImage(Buffer.from(response.data));
193

194
    // 保存压缩后的图片
195
    fs.writeFileSync(localPath, compressedBuffer);
196

197
    const originalSize = Buffer.from(response.data).length / 1024;  // KB
198
    const compressedSize = compressedBuffer.length / 1024;  // KB
199
    const compressionRatio = (1 - compressedSize / originalSize) * 100;
200

201
    console.log(`Downloaded: ${filename} (Original: ${originalSize.toFixed(1)}KB, Compressed: ${compressedSize.toFixed(1)}KB, Saved: ${compressionRatio.toFixed(1)}%)`);
202

203
    return webPath;
204
  } catch (error) {
205
    console.error(`Error downloading image ${url}:`, error.message);
206
    return null;
207
  }
208
}
209

210
/**
211
 * 处理记录
212
 * @param {Object} records - 记录数据
213
 * @param {string} token - 访问令牌（用于图片下载）
214
 * @param {string} type - 记录类型，可选值：'books' 或 'friends'
215
 * @returns {Object|Array} 处理后的记录数据
216
 */
217
async function processRecords(records, token, type = 'books') {
218
  console.log(`[步骤3/4] 处理${type.toUpperCase()}记录...`);
219

220
  if (!records || !records.data || !records.data.items) {
221
    console.log("  ⚠️  没有找到有效记录数据，跳过处理");
222
    return type === 'friends' ? [] : records;
223
  }
224

225
  const totalRecords = records.data.items.length;
226
  console.log(`  开始处理 ${totalRecords} 条记录...`);
227

228
  let processedData;
229

230
  // 根据不同类型进行处理
231
  if (type === 'friends') {
232
    // 处理friends记录，不需要处理图片
233
    processedData = [];
234

235
    for (const [index, item] of records.data.items.entries()) {
236
      console.log(`  处理记录 ${index + 1}/${totalRecords}...`);
237

238
      if (item.fields) {
239
        // 转换为friends.json所需的格式
240
        const friendData = {
241
          title: item.fields['站点名称'] || '',
242
          imgurl: item.fields['头像图地址'] || '',
243
          desc: item.fields['站点描述'] || '',
244
          siteurl: item.fields['站点地址'] || '',
245
          tags: [item.fields['标签'] || '']
246
        };
247
        processedData.push(friendData);
248
      }
249
    }
250

251
    console.log(`  ✅ FRIENDS记录处理完成，共处理 ${processedData.length} 条记录`);
252
  } else {
253
    // 处理books记录，包含图片处理逻辑
254
    // 确保图片目录存在
255
    const saveDir = path.join(__dirname, '..', 'public', 'images', 'books');
256
    console.log(`  图片保存目录: ${saveDir}`);
257

258
    if (!fs.existsSync(saveDir)) {
259
      console.log("  创建图片保存目录...");
260
      fs.mkdirSync(saveDir, { recursive: true });
261
    }
262

263
    let processedCount = 0;
264
    let imageProcessedCount = 0;
265

266
    // 处理每条记录
267
    for (const [index, item] of records.data.items.entries()) {
268
      console.log(`  处理记录 ${index + 1}/${totalRecords}...`);
269

270
      if (item.fields && item.fields['封面'] && Array.isArray(item.fields['封面'])) {
271
        const covers = item.fields['封面'];
272
        const newCovers = [];
273

274
        console.log(`    找到 ${covers.length} 张封面图片`);
275

276
        for (const cover of covers) {
277
          if (cover.url) {
278
            // 下载图片并获取本地路径
279
            console.log(`    处理图片: ${cover.url.slice(-30)}...`);
280
            const localPath = await downloadImage(cover.url, token, saveDir);
281
            if (localPath) {
282
              const newCover = { ...cover, local_path: localPath };
283
              newCovers.push(newCover);
284
              imageProcessedCount++;
285
            }
286
          }
287
        }
288

289
        if (newCovers.length > 0) {
290
          item.fields['封面'] = newCovers;
291
        }
292
      }
293
      processedCount++;
294
    }
295

296
    console.log(`  ✅ 记录处理完成`);
297
    console.log(`  总计处理: ${processedCount} 条记录, ${imageProcessedCount} 张图片`);
298
    processedData = records;
299
  }
300

301
  return processedData;
302
}
303

304
/**
305
 * 将数据保存为 JSON 文件
306
 * @param {Object|Array} data - 要保存的数据
307
 * @param {string} filename - 输出文件名
308
 */
309
function saveToJson(data, filename = 'books.json') {
310
  console.log("[步骤4/4] 保存数据到 JSON 文件...");
311

312
  const outputPath = path.join(__dirname, '..', 'public', 'data', filename);
313
  console.log(`  输出文件路径: ${outputPath}`);
314

315
  // 确保输出目录存在
316
  const outputDir = path.dirname(outputPath);
317
  if (!fs.existsSync(outputDir)) {
318
    console.log("  创建输出目录...");
319
    fs.mkdirSync(outputDir, { recursive: true });
320
  }
321

322
  // 对于books数据，添加更新时间
323
  if (filename === 'books.json' && typeof data === 'object' && data !== null) {
324
    const updateTime = new Date().toISOString();
325
    data.last_updated = updateTime;
326
    console.log(`  添加更新时间: ${updateTime}`);
327
  }
328

329
  try {
330
    fs.writeFileSync(outputPath, JSON.stringify(data, null, 2, 'utf-8'));
331

332
    // 获取文件大小
333
    const stats = fs.statSync(outputPath);
334
    const fileSize = (stats.size / 1024).toFixed(2);
335

336
    console.log(`  ✅ 数据成功保存到 ${outputPath}`);
337
    console.log(`  文件大小: ${fileSize} KB`);
338
  } catch (error) {
339
    console.error(`  ❌ 保存数据失败:`, error.message);
340
  }
341
}
342

343
/**
344
 * 主函数
345
 */
346
async function main() {
347
  // 确保日志能正常显示，即使在Windows PowerShell中
348
  console.log("===========================================");
349
  console.log("📚 飞书多维表格数据同步工具");
350
  console.log("===========================================");
351

352
  try {
353
    // 检查环境变量
354
    console.log("🔍 检查必要的环境变量...");
355
    const requiredVars = ['FEISHU_APP_ID', 'FEISHU_APP_SECRET', 'FEISHU_BITABLE_ID', 'FEISHU_TABLE_ID'];
356
    const missingVars = requiredVars.filter(varName => !process.env[varName]);
357

358
    if (missingVars.length > 0) {
359
      // 使用标准字符代替emoji以确保在所有终端都能正确显示
360
      console.log("[错误] 缺少必要的环境变量:", missingVars.join(', '));
361
      console.log("请在运行脚本前设置这些环境变量。");
362
      console.log("示例:");
363
      console.log("set FEISHU_APP_ID=your_app_id");
364
      console.log("set FEISHU_APP_SECRET=your_app_secret");
365
      console.log("set FEISHU_BITABLE_ID=your_bitable_id");
366
      console.log("set FEISHU_TABLE_ID=your_table_id");
367

368
      // 临时添加测试环境变量，方便演示
369
      console.log("\n[测试模式] 添加临时测试环境变量以便演示日志输出...");
370
      process.env.FEISHU_APP_ID = "test_app_id";
371
      process.env.FEISHU_APP_SECRET = "test_app_secret";
372
      process.env.FEISHU_BITABLE_ID = "test_bitable_id";
373
      process.env.FEISHU_TABLE_ID = "test_table_id";
374
      console.log("[测试模式] 环境变量已设置，继续执行演示...");
375
    }
376

377
    console.log("✅ 环境变量检查通过");
378
    console.log("\n开始数据同步流程...");
379

380
    // 获取多维表格BOOKS数据
381
    const startTime = Date.now();
382
    const records = await getBitableRecords();
383
    const friendsRecords = await getBitableRecords_Friends();
384
    // 获取token用于可能的操作
385
    const token = await getTenantAccessToken();
386

387
    // 处理books记录
388
    if (records && token) {
389
      console.log("\n开始处理BOOKS记录...");
390
      // 处理记录并下载图片
391
      const processedRecords = await processRecords(records, token, 'books');
392

393
      // 保存数据到JSON文件
394
      saveToJson(processedRecords, 'books.json');
395
    } else {
396
      console.log("[错误] BOOKS数据同步失败: 无法获取多维表格记录或访问令牌");
397
    }
398

399
    // 处理friends记录
400
    if (friendsRecords) {
401
      console.log("\n开始处理FRIENDS记录...");
402
      // 处理friends记录（不需要token，因为不处理图片）
403
      const processedFriends = await processRecords(friendsRecords, null, 'friends');
404

405
      // 保存friends数据到JSON文件
406
      saveToJson(processedFriends, 'friends.json');
407
    } else {
408
      console.log("[错误] FRIENDS数据同步失败: 无法获取多维表格记录");
409
    }
410

411
    const endTime = Date.now();
412
    const duration = ((endTime - startTime) / 1000).toFixed(2);
413

414
    console.log("\n===========================================");
415
    console.log("[成功] 数据同步完成！");
416
    console.log("总耗时: " + duration + " 秒");
417
    console.log("===========================================");
418
  } catch (error) {
419
    console.error("\n❌ 发生未预期的错误:", error.message);
420
    console.error("  请检查错误信息并尝试解决问题。");
421
  }
422

423
}
424

425
// 导出函数以便在其他地方使用
426
export {
427
  getTenantAccessToken,
428
  getBitableRecords,
429
  processRecords,
430
  saveToJson,
431
  main
432
};
433

434
// 如果直接运行脚本
435
// if (import.meta.url === new URL(process.argv[1], import.meta.url).href) {
436
  main();

总结#

通过利用飞书多维文档和JavaScript脚本，我们实现了博客数据的自动化更新，大大提高了维护效率。与直接修改JSON文件相比，使用飞书多维文档更加直观和便捷，特别是对于非技术用户来说。

这个实现不仅可以用于个人博客，还可以扩展到更多场景，比如团队协作、内容管理等。

致谢#

特别感谢时歌的文章《基于飞书多维表格的书架实现》，为本文提供了灵感和技术基础。

音乐

音乐

前言#

示例#