Remix Sitemap 使用教程

2025-05-20 20:42:52作者：殷蕙予

1. 项目介绍

remix-sitemap 是一个为 Remix 应用程序生成站点地图（sitemap）的开源工具。站点地图是一个文件，用来告诉搜索引擎网站上的所有可用页面，有助于搜索引擎更好地索引网站内容。remix-sitemap 支持运行时和构建时生成站点地图，同时还能生成 robots.txt 文件，用于控制搜索引擎的抓取和索引行为。

2. 项目快速启动

安装

首先，您需要在 Remix 项目中安装 remix-sitemap：

npm i remix-sitemap

运行时生成

在 entry.server.tsx 文件中，配置并使用 createSitemapGenerator 函数：

import { createSitemapGenerator } from 'remix-sitemap';

// 配置站点地图生成器
const { isSitemapUrl, sitemap } = createSitemapGenerator({
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  // 其他配置项...
});

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  // 判断是否为站点地图请求
  if (isSitemapUrl(request)) {
    return await sitemap(request, remixContext);
  }

  // 渲染页面内容
  let markup = renderToString(
    <RemixServer context={{ remixContext }} url={{ request.url }} />
  );

  // 设置响应头
  responseHeaders.set('Content-Type', 'text/html');

  // 返回响应
  return new Response(`<!DOCTYPE html>${markup}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
};

构建时生成

在项目根目录创建一个 remix-sitemap.config.js 配置文件：

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  // 其他配置项...
};

然后在 package.json 中添加一个构建脚本：

{
  "scripts": {
    "build": "npm-run-all build:*",
    "build:remix": "remix build",
    "build:sitemap": "remix-sitemap"
  }
}

运行构建脚本时，remix-sitemap 将会在构建过程中生成站点地图。

3. 应用案例和最佳实践

动态路由的站点地图

如果您的应用程序有动态路由，您可以在相应的路由文件中定义一个 sitemap 函数来生成动态内容的站点地图条目。

export const sitemap: SitemapFunction = async ({ config, request }) => {
  const posts = await getPosts();
  return posts.map(post => ({
    loc: `/posts/${post.slug}`,
    lastmod: post.updatedAt,
    exclude: post.isDraft,
    alternateRefs: [
      { href: `${config.siteUrl}/en/posts/${post.slug}`, hreflang: 'en' },
      { href: `${config.siteUrl}/es`, hreflang: 'es' }
    ]
  }));
};

排除特定路由

如果某些页面不应该包含在站点地图中，可以设置 exclude 属性为 true。

export const sitemap: SitemapFunction = () => ({
  exclude: true
});

缓存站点地图

为了提高性能，可以使用缓存机制来存储站点地图内容。

createSitemapGenerator({
  siteUrl: 'https://example.com',
  cache: {
    get: async () => await redis.get('sitemap') || null,
    set: async (sitemap) => await redis.set('sitemap', sitemap, 'EX', 3600)
  }
});

4. 典型生态项目

由于 remix-sitemap 是为 Remix 应用程序设计的，因此它是 Remix 生态系统的一部分。在 Remix 应用中，您可以结合使用其他 Remix 相关的库和工具，例如 remix-run、remix-seo 等，以构建完整且功能丰富的 Web 应用程序。

登录后查看全文

Remix Sitemap 使用教程

1. 项目介绍

2. 项目快速启动

安装

运行时生成

构建时生成

3. 应用案例和最佳实践

动态路由的站点地图

排除特定路由

缓存站点地图

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

Remix Sitemap 使用教程

1. 项目介绍

2. 项目快速启动

安装

运行时生成

构建时生成

3. 应用案例和最佳实践

动态路由的站点地图

排除特定路由

缓存站点地图

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选