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

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

published_date
最新编辑 2024年09月08日
slug
允许为 Notion 页面设置自定义 URL,从而提高 SEO 和用户体验。通过使用辅助函数可以确保这些自定义 URL 映射的有效性,并将其应用到的网站项目中
tags
Notion
Next.js
Website
pageUrlOverrides 是一个配置对象,通常用于在 Notion 集成或其他内容管理系统(CMS)中定义自定义页面 URL 映射。这些映射允许开发者为页面设置自定义 URL,而不是使用自动生成的默认 URL。

示例场景

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

具体用途

  1. 自定义 URL 映射:允许将自动生成的 URL 替换为更友好的自定义 URL。
  1. SEO 优化:通过设置简洁、可读性强的 URL,有助于搜索引擎优化(SEO)。
  1. 用户体验:让用户更容易记住和访问特定页面。

配置示例

以下是一个 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);

总结

pageUrlOverrides 允许为 Notion 页面设置自定义 URL,从而提高 SEO 和用户体验。通过使用辅助函数(如 cleanPageUrlMap),可以确保这些自定义 URL 映射的有效性,并将其应用到的网站项目中。

系列文章

✔️
01.【个人网站】如何使用Notion作为数据库进行全栈开发
✔️
02.【个人网站】如何在Next中集成Notion数据库
✔️
03.【个人网站】如何做网站自定义页面 URL 映射
✔️
04.【个人网站】如何使用Vercel部署网站
✔️
05.【个人网站】基于i18n在Next项目中搭建国际化网站
✔️
06.【个人网站】使用Mailchimp做网站邮件订阅功能
 

About

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

Contact Me : znjessie858@gmail.com

Subscribe

Subscribe to receive notifications of my latest posts and unsubscribe at any time!