03.【个人网站】如何做网站自定义页面 URL 映射

pageUrlOverrides 是一个配置对象，通常用于在 Notion 集成或其他内容管理系统（CMS）中定义自定义页面 URL 映射。这些映射允许开发者为页面设置自定义 URL，而不是使用自动生成的默认 URL。

示例场景

假设有一个 Notion 页面，默认 URL 是 https://www.notion.so/my-page-id，希望它在网站上显示为 https://www.mywebsite.com/custom-url。pageUrlOverrides 就是为了解决这种需求的。

具体用途

自定义 URL 映射：允许将自动生成的 URL 替换为更友好的自定义 URL。

SEO 优化：通过设置简洁、可读性强的 URL，有助于搜索引擎优化（SEO）。

用户体验：让用户更容易记住和访问特定页面。

配置示例

以下是一个 pageUrlOverrides 的配置示例：


const pageUrlOverrides = {
  '/about': '1234abcd5678efgh9012ijkl', // 自定义 URL "/about" 对应 Notion 页面 ID "1234abcd5678efgh9012ijkl"
  '/contact': '9876zyxw5432vuts1098rqp'  // 自定义 URL "/contact" 对应 Notion 页面 ID "9876zyxw5432vuts1098rqp"
};

在这个示例中：

当用户访问 https://www.mywebsite.com/about 时，实际上会显示 Notion 页面 ID 为 1234abcd5678efgh9012ijkl 的内容。

当用户访问 https://www.mywebsite.com/contact 时，实际上会显示 Notion 页面 ID 为 9876zyxw5432vuts1098rqp 的内容。

如何使用

在实际使用中，可能需要一个函数来处理这些自定义 URL 映射，并将其应用到的项目中。以下是一个示例函数，结合之前的 cleanPageUrlMap 函数，演示如何使用 pageUrlOverrides：


import { parsePageId } from 'notion-utils';

interface PageUrlOverridesMap {
  [key: string]: string;
}

const pageUrlOverrides: PageUrlOverridesMap = {
  '/about': '1234abcd5678efgh9012ijkl',
  '/contact': '9876zyxw5432vuts1098rqp'
};

/**
 * 清理页面URL映射
 *
 * 该函数用于清理页面URL映射，确保每个页面ID和URI都是有效的。它会将相对路径URI转换为对象键，并使用解析后的UUID作为值。
 *
 * @param {PageUrlOverridesMap} pageUrlMap - 页面URL映射对象，键为URI，值为页面ID。
 * @param {Object} options - 可选参数对象。
 * @param {string} options.label - 用于错误消息中的标签。
 * @returns {PageUrlOverridesMap} - 返回清理后的页面URL映射对象。
 * @throws {Error} - 当页面ID或URI无效时抛出错误。
 */
function cleanPageUrlMap(
  pageUrlMap: PageUrlOverridesMap,
  { label }: { label: string }
): PageUrlOverridesMap {
  return Object.keys(pageUrlMap).reduce((acc, uri) => {
    const pageId = pageUrlMap[uri];
    const uuid = parsePageId(pageId, { uuid: false });

    if (!uuid) {
      throw new Error(`Invalid ${label} page id "${pageId}"`);
    }

    if (!uri) {
      throw new Error(`Missing ${label} value for page "${pageId}"`);
    }

    if (!uri.startsWith('/')) {
      throw new Error(
        `Invalid ${label} value for page "${pageId}": value "${uri}" should be a relative URI that starts with "/"`
      );
    }

    const path = uri.slice(1);

    return {
      ...acc,
      [path]: uuid
    };
  }, {} as PageUrlOverridesMap);
}

const cleanedPageUrlOverrides = cleanPageUrlMap(pageUrlOverrides, { label: 'pageUrlOverrides' });
console.log(cleanedPageUrlOverrides);