feat: custom home footer

e2e/fixtures/custom-home-footer/doc/index.mdx

@@ -0,0 +1,9 @@
+# Hello World
+
+:::tip TIP
+
+This is a TIP.
+
+:::
+
+[link](https://example/com)

e2e/fixtures/custom-home-footer/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-home-footer",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/custom-home-footer/rspress.config.ts

@@ -0,0 +1,11 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  themeConfig: {
+    footer: {
+      message: '<a>Custom footer</a>',
+    },
+  },
+});

e2e/fixtures/custom-home-footer/tsconfig.json

@@ -0,0 +1 @@
+{}

e2e/tests/custom-home-footer.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('home footer test', async () => {
+  let appPort;
+  let app;
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'custom-home-footer');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('custom home footer', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+    const footer = await page.$('footer');
+    expect(footer).not.toBeNull();
+    if (!footer) {
+      return;
+    }
+    const a = await footer.$('a');
+    expect(a).not.toBeNull();
+  });
+});

packages/document/docs/en/api/config/config-theme.mdx

@@ -201,6 +201,8 @@ export interface Footer {
 }
 ```
 
+`message` is a string that can contain HTML content. This string will be inserted into the footer using `dangerouslySetInnerHTML`, allowing you to pass in HTML template tags to design your footer.
+
 For example:
 
 ```ts title="rspress.config.ts"
@@ -209,7 +211,8 @@ import { defineConfig } from 'rspress/config';
 export default defineConfig({
   themeConfig: {
     footer: {
-      message: 'This is a footer',
+      message:
+        '<p>This is a footer with a <a href="https://example.com">link</a> and <strong>bold text</strong></p>',
     },
   },
 });

packages/document/docs/zh/api/config/config-theme.mdx

@@ -187,6 +187,8 @@ export interface Footer {
 }
 ```
 
+`message` 是一个可以包含 HTML 内容的字符串。这个字符串将使用 `dangerouslySetInnerHTML` 插入到页脚中，因此你可以传入 HTML 模板标签来设计你的页脚。
+
 比如：
 
 ```ts title="rspress.config.ts"
@@ -195,7 +197,8 @@ import { defineConfig } from 'rspress/config';
 export default defineConfig({
   themeConfig: {
     footer: {
-      message: 'This is a footer',
+      message:
+        '<p>这是一个包含<a href="https://example.com">链接</a>的<strong>页脚</strong></p>',
     },
   },
 });

packages/theme-default/src/components/HomeFooter/index.tsx

@@ -7,7 +7,12 @@ export function HomeFooter() {
     <footer className="absolute bottom-0 mt-12 py-8 px-6 sm:p-8 w-full border-t border-solid border-divider-light">
       <div className="m-auto w-full text-center">
         {message && (
-          <div className="font-meduim text-sm text-text-2">{message}</div>
+          <div
+            className="font-meduim text-sm text-text-2"
+            dangerouslySetInnerHTML={{
+              __html: message,
+            }}
+          />
         )}
       </div>
     </footer>