From 92e6e83d262e5bee30f5164b4bacb7c187b94835 Mon Sep 17 00:00:00 2001
From: Timeless0911 <1604889533@qq.com>
Date: Wed, 12 Nov 2025 15:54:36 +0800
Subject: [PATCH] docs: assets output filename and distPath

---
 .../docs/en/guide/advanced/static-assets.mdx  | 33 +++++++++++++++++--
 .../docs/zh/guide/advanced/static-assets.mdx  | 33 +++++++++++++++++--
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/website/docs/en/guide/advanced/static-assets.mdx b/website/docs/en/guide/advanced/static-assets.mdx
index 996f32606..8f6f094c4 100644
--- a/website/docs/en/guide/advanced/static-assets.mdx
+++ b/website/docs/en/guide/advanced/static-assets.mdx
@@ -212,8 +212,37 @@ When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the
 
 Once static assets are imported, they will automatically be output to the build output directory. You can:
 
-- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename).
-- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath).
+- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename). For example, add a hash value to the filename of the outputs, which is usually used when there are files with the same name to avoid filename conflicts.
+
+```ts title="rslib.config.ts"
+export default {
+  output: {
+    filename: {
+      svg: '[name].[contenthash:8].svg',
+      font: '[name].[contenthash:8][ext]',
+      image: '[name].[contenthash:8][ext]',
+      media: '[name].[contenthash:8][ext]',
+      assets: '[name].[contenthash:8][ext]',
+    },
+  },
+};
+```
+
+- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath). For example, emit static assets output to the `dist/resource` directory.
+
+```ts title="rslib.config.ts"
+export default {
+  output: {
+    distPath: {
+      svg: 'resource/svg',
+      font: 'resource/font',
+      image: 'resource/image',
+      media: 'resource/media',
+      assets: 'resource/assets',
+    },
+  },
+};
+```
 
 ## Type declaration
 
diff --git a/website/docs/zh/guide/advanced/static-assets.mdx b/website/docs/zh/guide/advanced/static-assets.mdx
index 32a6372ab..329f74362 100644
--- a/website/docs/zh/guide/advanced/static-assets.mdx
+++ b/website/docs/zh/guide/advanced/static-assets.mdx
@@ -212,8 +212,37 @@ export default {
 
 当静态资源被引用后，会自动被输出到构建产物的目录下，你可以：
 
-- 通过 [output.filename](/config/rsbuild/output#outputfilename) 来修改产物的文件名。
-- 通过 [output.distPath](/config/rsbuild/output#outputdistpath) 来修改产物的输出路径。
+- 通过 [output.filename](/config/rsbuild/output#outputfilename) 来修改产物的文件名。例如，在产物的文件名中添加 hash 值，这通常在有同名文件时使用，以避免文件名冲突。
+
+```ts title="rslib.config.ts"
+export default {
+  output: {
+    filename: {
+      svg: '[name].[contenthash:8].svg',
+      font: '[name].[contenthash:8][ext]',
+      image: '[name].[contenthash:8][ext]',
+      media: '[name].[contenthash:8][ext]',
+      assets: '[name].[contenthash:8][ext]',
+    },
+  },
+};
+```
+
+- 通过 [output.distPath](/config/rsbuild/output#outputdistpath) 来修改产物的输出路径。例如，将静态资源产物输出到 `dist/resource` 目录下。
+
+```ts title="rslib.config.ts"
+export default {
+  output: {
+    distPath: {
+      svg: 'resource/svg',
+      font: 'resource/font',
+      image: 'resource/image',
+      media: 'resource/media',
+      assets: 'resource/assets',
+    },
+  },
+};
+```
 
 ## 类型声明