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

本文主要是介绍03.【个人网站】如何做网站自定义页面 URL 映射，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

源码：https://github.com/Jessie-jzn/Jessie-Blog.dev
网站：https://www.jessieontheroad.com/

示例场景

假设有一个 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);