diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 750534daf6..4b5ae92c39 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -313,7 +313,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         <div className="flex items-center justify-between px-6 pb-6 pt-5">
           <a
             className="flex items-center gap-1 text-text-accent system-xs-regular"
-            href={docLink('/use-dify/workspace/app-management#app-export-and-import', undefined, appManagementAnchorMap)}
+            href={docLink('/use-dify/workspace/app-management#app-export-and-import', { anchorMap: appManagementAnchorMap })}
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
index 558aca0056..f914204b3b 100644
--- a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
+++ b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
@@ -33,7 +33,7 @@ const ArtifactsEmpty = ({ description }: { description: string }) => {
         <div className="text-text-tertiary system-xs-regular">{description}</div>
         <a
           className="cursor-pointer text-text-accent system-xs-regular"
-          href={docLink('/use-dify/build/file-system#artifacts' as DocPathWithoutLang, undefined, fileSystemArtifactsAnchorMap)}
+          href={docLink('/use-dify/build/file-system#artifacts' as DocPathWithoutLang, { anchorMap: fileSystemArtifactsAnchorMap })}
           target="_blank"
           rel="noopener noreferrer"
         >
diff --git a/web/context/i18n.spec.ts b/web/context/i18n.spec.ts
index 4212fe0317..4bb2d20c19 100644
--- a/web/context/i18n.spec.ts
+++ b/web/context/i18n.spec.ts
@@ -103,7 +103,7 @@ describe('useDocLink', () => {
       }
 
       const { result } = renderHook(() => useDocLink())
-      const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, pathMap)
+      const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, { pathMap })
       expect(url).toBe(`${defaultDocBaseUrl}/zh/use-dify/getting-started/introduction`)
     })
 
@@ -119,7 +119,7 @@ describe('useDocLink', () => {
       }
 
       const { result } = renderHook(() => useDocLink())
-      const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, pathMap)
+      const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, { pathMap })
       expect(url).toBe(`${defaultDocBaseUrl}/ja/use-dify/getting-started/quick-start`)
     })
 
@@ -266,7 +266,7 @@ describe('useDocLink', () => {
       }
 
       const { result } = renderHook(() => useDocLink())
-      const url = result.current('/use-dify/workspace/app-management#app-export-and-import', undefined, anchorMap)
+      const url = result.current('/use-dify/workspace/app-management#app-export-and-import', { anchorMap })
       expect(url).toBe(`${defaultDocBaseUrl}/zh/use-dify/workspace/app-management#${encodeURIComponent('应用导出和导入')}`)
     })
 
diff --git a/web/context/i18n.ts b/web/context/i18n.ts
index 7b970ae9c9..8b0e89e8fd 100644
--- a/web/context/i18n.ts
+++ b/web/context/i18n.ts
@@ -1,7 +1,7 @@
 import type { Locale } from '@/i18n-config/language'
 import type { DocPathWithoutLang } from '@/types/doc-paths'
 import { useTranslation } from '#i18n'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { getDocLanguage, getLanguage, getPricingPageLanguage } from '@/i18n-config/language'
 import { apiReferencePathTranslations } from '@/types/doc-paths'
 
@@ -24,6 +24,11 @@ export const useGetPricingPageLanguage = () => {
 export const defaultDocBaseUrl = 'https://docs.bash-is-all-you-need.dify.dev'
 export type DocPathMap = Partial<Record<Locale, DocPathWithoutLang>>
 export type DocAnchorMap = Partial<Record<Locale, string>>
+export type DocLinkOptions = {
+  pathMap?: DocPathMap
+  anchorMap?: DocAnchorMap
+}
+export type BuildDocLink = (path?: DocPathWithoutLang, options?: DocLinkOptions) => string
 
 const splitPathWithHash = (path: string) => {
   const [pathname, ...hashParts] = path.split('#')
@@ -45,14 +50,17 @@ const normalizeAnchor = (anchor: string) => {
   return encodeURIComponent(normalizedAnchor)
 }
 
-export const useDocLink = (baseUrl?: string): ((path?: DocPathWithoutLang, pathMap?: DocPathMap, anchorMap?: DocAnchorMap) => string) => {
-  let baseDocUrl = baseUrl || defaultDocBaseUrl
-  baseDocUrl = (baseDocUrl.endsWith('/')) ? baseDocUrl.slice(0, -1) : baseDocUrl
+export const useDocLink = (baseUrl?: string): BuildDocLink => {
+  const baseDocUrl = useMemo(() => {
+    const resolvedBaseUrl = baseUrl || defaultDocBaseUrl
+    return resolvedBaseUrl.endsWith('/') ? resolvedBaseUrl.slice(0, -1) : resolvedBaseUrl
+  }, [baseUrl])
   const locale = useLocale()
   return useCallback(
-    (path?: DocPathWithoutLang, pathMap?: DocPathMap, anchorMap?: DocAnchorMap): string => {
+    (path?: DocPathWithoutLang, options?: DocLinkOptions): string => {
       const docLanguage = getDocLanguage(locale)
       const pathUrl = path || ''
+      const { pathMap, anchorMap } = options || {}
       const targetPath = (pathMap) ? pathMap[locale] || pathUrl : pathUrl
       const { pathname: pathWithoutHash, hash: pathAnchor } = splitPathWithHash(targetPath)
       let targetPathWithoutHash = pathWithoutHash