在React中使用标题创建slug

本文介绍一种在react应用中基于标题生成seo友好的slug的函数slugify。 该函数避免使用容易泄露信息的数据库id作为url的一部分，而是利用文章标题生成更易于理解和搜索引擎优化的url。

文章指出，直接使用数据库ID(_id)作为URL会暴露原始数据，不利于SEO。而使用slug（基于标题生成的URL片段）则能改善URL的可读性和搜索引擎优化效果。

以下代码片段展示了slugify函数的核心逻辑，以及辅助函数format和getsaferegexpstring：

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

下载

function getsaferegexpstring(input) {
  return input.split("").map((char) => `\\${char}`).join("");
}

import { remove as stripaccents} from 'diacritics';
function format(input, delimiter, ignoreinvalid = false) {
  const harmonized = stripaccents(input).trim().toLowerCase();
  const safedelimiter = getsaferegexpstring(delimiter);

  if (ignoreinvalid) {
    return harmonized.replace(/\s+/g, delimiter);
  }

  return harmonized
    .replace(new RegExp(`[^a-z0-9\\u0900-\\u097f${safedelimiter}]+`, "g"), delimiter)
    .replace(new RegExp(`${safedelimiter}+`, "g"), delimiter)
    .replace(new RegExp(`^${safedelimiter}`, "g"), "")
    .replace(new RegExp(`${safedelimiter}$`, "g"), "");
};

export default function slugify(node, options = { delimiter: "-", prefix: "" }) {
  if (!options.delimiter) options.delimiter = "-";
  if (!options.prefix) options.prefix = "";

  if (!node || typeof node === "boolean") {
    return "";
  }

  const { delimiter, prefix } = options;

  if (typeof node === "boolean") {
    return ""; 
  }

  if (typeof node === "string" || typeof node === "number") {
    const harmonizedPrefix = format(prefix, delimiter, true);
    const harmonizedNode = format(String(node), delimiter);

    if (harmonizedPrefix) {
      return `${harmonizedPrefix}${delimiter}${harmonizedNode}`;
    }

    return harmonizedNode;
  }

  if ("children" in node) {
    return slugify(node.children);
  }

  if ("type" in node) return slugify(node.props.children, options);

  if (Symbol.iterator in node) {
    return slugify(
      Array.from(node)
        .map((subNode) => slugify(subNode, { delimiter }))
        .join(delimiter),
      options
    );
  }

  return "";
};

getsaferegexpstring函数用于转义特殊字符，format函数使用diacritics包去除变音符号，并对输入进行规范化处理，最终生成slug。slugify函数则根据输入节点类型递归处理，最终生成完整的slug。 该函数支持自定义分隔符和前缀。