Skip to content

Commit a8db122

Browse files
onshinpeionshinpei
committed
feat: add language switch component to documentation theme
1 parent cd710d7 commit a8db122

2 files changed

Lines changed: 108 additions & 128 deletions

File tree

‎nextra-docs-en/theme.config.tsx‎

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,53 @@
1-
import React from 'react';
2-
import { DocsThemeConfig } from 'nextra-theme-docs';
3-
import { useRouter } from 'next/router';
1+
import React from 'react'
2+
import { DocsThemeConfig } from 'nextra-theme-docs'
3+
import { useRouter } from 'next/router'
4+
5+
// 语言切换组件 - 切换到中文
6+
function LanguageSwitch() {
7+
const router = useRouter()
8+
const basePath = '/react-markdown-typer/en'
9+
const currentPath = router.asPath || router.pathname
10+
11+
// 获取不包含 basePath 的路径
12+
let pathWithoutBase = currentPath
13+
if (currentPath.startsWith(basePath)) {
14+
pathWithoutBase = currentPath.slice(basePath.length) || '/'
15+
}
16+
17+
const switchToZh = () => {
18+
// 切换到中文版本
19+
const zhPath = `/react-markdown-typer/zh${pathWithoutBase}`
20+
window.location.href = zhPath
21+
}
22+
23+
return (
24+
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
25+
<button
26+
onClick={switchToZh}
27+
style={{
28+
padding: '4px 8px',
29+
border: '1px solid var(--nextra-border-color)',
30+
borderRadius: '4px',
31+
background: 'transparent',
32+
color: 'var(--nextra-text-color)',
33+
cursor: 'pointer',
34+
fontSize: '14px',
35+
}}
36+
>
37+
中文
38+
</button>
39+
<span style={{
40+
padding: '4px 8px',
41+
background: 'var(--nextra-primary-color)',
42+
color: 'white',
43+
borderRadius: '4px',
44+
fontSize: '14px',
45+
}}>
46+
EN
47+
</span>
48+
</div>
49+
)
50+
}
451

552
const config: DocsThemeConfig = {
653
logo: <span>react-markdown-typer</span>,
@@ -9,69 +56,12 @@ const config: DocsThemeConfig = {
956
},
1057
docsRepositoryBase: 'https://github.com/onshinpei/react-markdown-typer/tree/main/nextra-docs-en',
1158
footer: {
12-
text: 'react-markdown-typer Documentation',
13-
},
14-
sidebar: {
15-
defaultMenuCollapseLevel: 1,
16-
},
17-
search: {
18-
placeholder: 'Search documentation...',
19-
},
20-
editLink: {
21-
text: 'Edit this page on GitHub',
22-
},
23-
feedback: {
24-
content: 'Question? Give us feedback →',
25-
labels: 'feedback',
26-
},
27-
i18n: [
28-
{ locale: 'zh', text: '中文' },
29-
{ locale: 'en', text: 'English' },
30-
],
31-
useNextSeoProps() {
32-
return {
33-
titleTemplate: '%s – react-markdown-typer',
34-
};
59+
content: 'react-markdown-typer Documentation',
3560
},
3661
navbar: {
37-
extraContent: () => {
38-
const router = useRouter();
39-
const isDev = process.env.NODE_ENV === 'development';
40-
41-
let zhUrl: string;
42-
43-
if (isDev) {
44-
// 开发环境：使用相对路径
45-
zhUrl = router.asPath;
46-
} else {
47-
// 生产环境：router.asPath 不包含 basePath，需要手动添加
48-
// 例如：router.asPath = '/examples/cursor'
49-
// 需要转换为：'/react-markdown-typer/zh/examples/cursor'
50-
zhUrl = `/react-markdown-typer/zh${router.asPath}`;
51-
}
52-
53-
return (
54-
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
55-
<a
56-
href={zhUrl}
57-
style={{
58-
padding: '4px 8px',
59-
border: '1px solid var(--nextra-border-color)',
60-
borderRadius: '4px',
61-
background: 'transparent',
62-
color: 'var(--nextra-text-color)',
63-
cursor: 'pointer',
64-
fontSize: '14px',
65-
textDecoration: 'none',
66-
}}
67-
>
68-
中文
69-
</a>
70-
</div>
71-
);
72-
},
62+
extraContent: <LanguageSwitch />,
7363
},
74-
};
64+
}
7565

76-
export default config;
66+
export default config
7767

‎nextra-docs-zh/theme.config.tsx‎

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,53 @@
1-
import React from 'react';
2-
import { DocsThemeConfig } from 'nextra-theme-docs';
3-
import { useRouter } from 'next/router';
1+
import React from 'react'
2+
import { DocsThemeConfig } from 'nextra-theme-docs'
3+
import { useRouter } from 'next/router'
4+
5+
// 语言切换组件 - 切换到英文
6+
function LanguageSwitch() {
7+
const router = useRouter()
8+
const basePath = '/react-markdown-typer/zh'
9+
const currentPath = router.asPath || router.pathname
10+
11+
// 获取不包含 basePath 的路径
12+
let pathWithoutBase = currentPath
13+
if (currentPath.startsWith(basePath)) {
14+
pathWithoutBase = currentPath.slice(basePath.length) || '/'
15+
}
16+
17+
const switchToEn = () => {
18+
// 切换到英文版本
19+
const enPath = `/react-markdown-typer/en${pathWithoutBase}`
20+
window.location.href = enPath
21+
}
22+
23+
return (
24+
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
25+
<span style={{
26+
padding: '4px 8px',
27+
background: 'var(--nextra-primary-color)',
28+
color: 'white',
29+
borderRadius: '4px',
30+
fontSize: '14px',
31+
}}>
32+
中文
33+
</span>
34+
<button
35+
onClick={switchToEn}
36+
style={{
37+
padding: '4px 8px',
38+
border: '1px solid var(--nextra-border-color)',
39+
borderRadius: '4px',
40+
background: 'transparent',
41+
color: 'var(--nextra-text-color)',
42+
cursor: 'pointer',
43+
fontSize: '14px',
44+
}}
45+
>
46+
EN
47+
</button>
48+
</div>
49+
)
50+
}
451

552
const config: DocsThemeConfig = {
653
logo: <span>react-markdown-typer</span>,
@@ -9,69 +56,12 @@ const config: DocsThemeConfig = {
956
},
1057
docsRepositoryBase: 'https://github.com/onshinpei/react-markdown-typer/tree/main/nextra-docs-zh',
1158
footer: {
12-
text: 'react-markdown-typer 文档',
13-
},
14-
sidebar: {
15-
defaultMenuCollapseLevel: 1,
16-
},
17-
search: {
18-
placeholder: '搜索文档...',
19-
},
20-
editLink: {
21-
text: '在 GitHub 上编辑此页',
22-
},
23-
feedback: {
24-
content: '问题反馈？给我们反馈 →',
25-
labels: 'feedback',
26-
},
27-
i18n: [
28-
{ locale: 'zh', text: '中文' },
29-
{ locale: 'en', text: 'English' },
30-
],
31-
useNextSeoProps() {
32-
return {
33-
titleTemplate: '%s – react-markdown-typer',
34-
};
59+
content: 'react-markdown-typer 文档',
3560
},
3661
navbar: {
37-
extraContent: () => {
38-
const router = useRouter();
39-
const isDev = process.env.NODE_ENV === 'development';
40-
41-
let enUrl: string;
42-
43-
if (isDev) {
44-
// 开发环境：使用相对路径
45-
enUrl = router.asPath;
46-
} else {
47-
// 生产环境：router.asPath 不包含 basePath，需要手动添加
48-
// 例如：router.asPath = '/examples/cursor'
49-
// 需要转换为：'/react-markdown-typer/en/examples/cursor'
50-
enUrl = `/react-markdown-typer/en${router.asPath}`;
51-
}
52-
53-
return (
54-
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
55-
<a
56-
href={enUrl}
57-
style={{
58-
padding: '4px 8px',
59-
border: '1px solid var(--nextra-border-color)',
60-
borderRadius: '4px',
61-
background: 'transparent',
62-
color: 'var(--nextra-text-color)',
63-
cursor: 'pointer',
64-
fontSize: '14px',
65-
textDecoration: 'none',
66-
}}
67-
>
68-
English
69-
</a>
70-
</div>
71-
);
72-
},
62+
extraContent: <LanguageSwitch />,
7363
},
74-
};
64+
}
7565

76-
export default config;
66+
export default config
7767

0 commit comments

Comments
 (0)