前端小卒

Appearance

自动化脚本使用说明 ​

SEO 元数据批量添加脚本 ​

功能说明 ​

add-seo-metadata.js 脚本可以自动为所有 React 代码文章添加完整的 SEO 元数据，包括：

  • 基础元数据：标题、描述、关键词、作者、日期等
  • 书籍信息：《深入浅出 React 19：AI 视角下的源码解析与进阶》相关信息
  • SEO 优化：Open Graph、Twitter Cards、Schema.org 结构化数据
  • 智能分类：根据文件路径自动生成合适的分类和标签

使用方法 ​

1. 安装依赖 ​

bash
# 安装 glob 依赖
npm install

2. 运行脚本 ​

bash
# 方法一：使用 npm 脚本（推荐）
npm run seo:add

# 方法二：直接运行
node scripts/add-seo-metadata.js

3. 查看结果 ​

脚本运行后会显示处理结果：

开始批量添加SEO元数据...
目标书籍: 深入浅出 React 19：AI 视角下的源码解析与进阶
---
已处理: react-code/basic/summary.md
已处理: react-code/server/basic/setup.md
跳过（已有SEO信息）: react-code/basic/entry.md
...

处理完成！
- 已处理文件: 15
- 跳过文件: 8
- 总文件数: 23

脚本特性 ​

智能检测 ​

  • 自动跳过：已有完整 SEO 信息的文章会被自动跳过
  • 安全处理：保留现有的 front matter，只更新缺失的 SEO 信息
  • 错误处理：单个文件处理失败不会影响其他文件

智能分类 ​

根据文件路径自动生成：

目录分类自动标签
basic/React 基础React 19, 源码解析
advanced/hooks/React 进阶React 19, Hooks, 源码解析
scheduling-phase/React 调度阶段React 19, 调度器, 源码解析
server/React ServerReact 19, 服务器渲染, 源码解析

自动生成内容 ​

  • 关键词：根据文件路径和内容智能生成
  • 描述：基于文章标题和书籍信息自动生成
  • 图片路径：根据文章标题生成对应的图片路径
  • 阅读时间：根据文章长度估算阅读时间

生成的 SEO 元数据示例 ​

yaml
---
title: "React Fiber 架构详解 | 深入浅出 React 19"
description: "深入解析React Fiber 架构详解的实现原理与源码机制，来自《深入浅出 React 19：AI 视角下的源码解析与进阶》，基于React 19.2.0版本的完整技术解析。"
keywords:
  - React 19
  - React Fiber 架构详解
  - 源码解析
  - React Fiber
  - Fiber 架构
  - Virtual DOM
author: "《深入浅出 React 19》编写团队"
date: "2024-12-19"
updated: "2024-12-19"
category: "React 基础"
tags:
  - React 19
  - 源码解析
  - Fiber
bookInfo:
  title: "深入浅出 React 19：AI 视角下的源码解析与进阶"
  chapter: "基础篇"
  section: "React Fiber 架构详解"
seo:
  canonical: "/react-code/basic/fiber"
  openGraph:
    type: "article"
    title: "React Fiber 架构详解 | 深入浅出 React 19"
    description: "深入解析React Fiber 架构详解的实现原理与源码机制..."
    image: "/images/react-react-fiber-架构详解.jpg"
    book:
      name: "深入浅出 React 19：AI 视角下的源码解析与进阶"
      author: "React 源码解析团队"
  twitter:
    card: "summary_large_image"
    title: "React Fiber 架构详解 | 深入浅出 React 19"
    description: "深入解析React Fiber 架构详解的实现原理与源码机制，来自《深入浅出 React 19：AI 视角下的源码解析与进阶》，基于React 19.2.0版本..."
    image: "/images/react-react-fiber-架构详解.jpg"
  schema:
    type: "Article"
    headline: "React Fiber 架构详解"
    author:
      type: "Organization"
      name: "《深入浅出 React 19》编写团队"
    datePublished: "2024-12-19"
    dateModified: "2024-12-19"
    publisher:
      type: "Organization"
      name: "React 技术社区"
    isPartOf:
      type: "Book"
      name: "深入浅出 React 19：AI 视角下的源码解析与进阶"
    mainEntityOfPage:
      type: "WebPage"
      id: "/react-code/basic/fiber"
    image: "/images/react-react-fiber-架构详解.jpg"
    articleSection: "React 基础"
    wordCount: 2500
    timeRequired: "PT8M"
---

注意事项 ​

  1. 备份重要文件：虽然脚本有安全检查，但建议运行前备份重要文件
  2. 检查结果：运行后请检查几个文件确保 SEO 信息正确生成
  3. 图片路径：脚本会生成图片路径，需要确保对应图片存在或准备添加
  4. 自定义调整：生成后可以手动调整特定文章的 SEO 信息

故障排除 ​

常见问题 ​

Q: 脚本提示找不到 glob 模块 A: 运行 npm install 安装依赖

Q: 某些文件没有被处理 A: 检查文件是否已有完整的 SEO 信息，脚本会自动跳过这些文件

Q: 生成的分类不正确 A: 可以手动修改 chapterMapping 对象来调整分类规则

Q: 想要重新生成所有文件的 SEO 信息 A: 可以临时修改 hasCompleteSEO 函数返回 false 来强制重新生成

扩展功能 ​

脚本支持以下扩展：

  1. 自定义章节映射：修改 chapterMapping 对象
  2. 自定义关键词生成：修改 generateKeywords 函数
  3. 自定义标签生成：修改 generateTags 函数
  4. 自定义 SEO 模板：修改 generateSEOMetadata 函数

相关脚本 ​

  • generate-sitemap.js：生成网站地图
  • add-wechat-qr.js：添加微信二维码

技术支持 ​

如有问题，请检查：

  1. Node.js 版本是否符合要求（23.5.0）
  2. 依赖是否正确安装
  3. 文件路径是否正确
  4. 文件权限是否足够

Last updated: