Skip to content

Commit 6b149e2

Browse files
jimboyeahjimboyeah
committed
fixed paths of routes
1 parent 00f61ec commit 6b149e2

File tree

8 files changed

+242
-249
lines changed

8 files changed

+242
-249
lines changed

‎Docs/Advanced/route.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default function Catchopt(props:any){
143143
const Router = useRouter()
144144
let json = JSON.stringify(Router.query);
145145
let fallback = Router.isFallback && "FALLBACK";
146-
console.log(`-----------------[[...catchopt]].tsx`, fallback, props, Router);
146+
console.log(`------ [[...catchopt]].tsx`, fallback, props, Router);
147147
return (
148148
<Layout>
149149
<h3 className="card">Optional Catch-all Routes Test</h3>
@@ -157,7 +157,7 @@ export default function Catchopt(props:any){
157157
}
158158

159159
export async function getStaticProps(context: any) {
160-
console.log("+++++++++++++++Optional Catch-all getStaticProps", context);
160+
console.log("++++++ Optional Catch-all getStaticProps", context);
161161
return {
162162
props: {
163163
data: JSON.stringify(context)
@@ -166,14 +166,14 @@ export async function getStaticProps(context: any) {
166166
}
167167

168168
export async function getStaticPaths(context:any) {
169-
console.log("+++++++++++++++Optional Catch-all getStaticPaths", context);
169+
console.log("++++++ Optional Catch-all getStaticPaths", context);
170170
const res = await fetch(`https://github.com/manifest.json`)
171171
const data = await res.json()
172172
let locale = context.locale ?? 'zh-CN';
173173
let paths = [
174-
{params:{ locale, catchopt: ['catch', 'all'] }},
175-
{params:{ locale, catchopt: ['catch', data.name] }},
176-
{params:{ locale, catchopt: false }},
174+
{locale, params:{ catchopt: ['catch', 'all'] }},
175+
{locale, params:{ catchopt: ['catch', data.name] }},
176+
{locale, params:{ catchopt: false }},
177177
]
178178
return { paths, fallback: false }
179179
}
@@ -210,14 +210,14 @@ export async function getStaticPaths(context:any) {
210210

211211
在导出 `getStaticProps()` 和 `getStaticPaths()` 函数时，就是在向 Next.js 表明，页面需要使用动态的数据，渲染生成时需要执行它们，参考输出信息：
212212

213-
+++++++++++++++Optional Catch-all getStaticPaths { locales: null, defaultLocale: null }
214-
+++++++++++++++Optional Catch-all getStaticProps {
213+
++++++ Optional Catch-all getStaticPaths { locales: null, defaultLocale: null }
214+
++++++ Optional Catch-all getStaticProps {
215215
params: { catchopt: [ 'catch', 'GitHub' ] },
216216
locales: undefined,
217217
locale: undefined,
218218
defaultLocale: undefined
219219
}
220-
-----------------[[...catchopt]].tsx false { data: '{"params":{"catchopt":["catch","GitHub"]}}' } ServerRouter {
220+
------ [[...catchopt]].tsx false { data: '{"params":{"catchopt":["catch","GitHub"]}}' } ServerRouter {
221221
route: '/route/[[...catchopt]]',
222222
pathname: '/route/[[...catchopt]]',
223223
query: { catchopt: [ 'catch', 'GitHub' ] },

‎pages/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,21 @@ export async function getStaticProps(context:any){
1515
mdFiles[sub.folder] = (getPosts(fields, sub.list, sub.folder))
1616
})
1717
return {
18-
props: {mdFiles, mdTree}
18+
props: {mdFiles, mdTree, locale: context.locale}
1919
}
2020
}
2121

2222
export default function Home(props:any) {
23+
if(props.locale==="en") {
24+
return (
25+
<Layout home>
26+
<div className="card rows fxCenter fxEvenly">
27+
<Link href="/" locale="en">✊English coming soon</Link>
28+
<Link href="/" locale="zh-CN">🚩Chinese</Link>
29+
</div>
30+
</Layout>
31+
)
32+
}
2333
return (
2434
<Layout home>
2535
<Head>

‎pages/posts/build.js‎

Lines changed: 173 additions & 195 deletions
Large diffs are not rendered by default.

‎pages/route/[[...catchopt]].tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ export async function getStaticProps(context: any) {
2828
}
2929

3030
export async function getStaticPaths(context:any) {
31-
console.log("++++++ Optional Catch-all getStaticPaths", context);
3231
const res = await fetch(`https://github.com/manifest.json`)
3332
const data = await res.json()
3433
let locale = context.locale ?? 'zh-CN';
3534
let paths = [
36-
{params:{ locale, catchopt: ['catch', 'all'] }},
37-
{params:{ locale, catchopt: ['catch', data.name] }},
38-
{params:{ locale, catchopt: false }},
35+
{locale, params:{ catchopt: ['catch', 'all'] }},
36+
{locale, params:{ catchopt: ['catch', data.name] }},
37+
{locale, params:{ catchopt: false }},
3938
]
39+
console.log("++++++ Optional Catch-all getStaticPaths", context, paths);
4040
return { paths, fallback: false }
4141
}

‎pages/route/[dynamic].tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ export async function getStaticProps(context: any) {
2323
}
2424

2525
export async function getStaticPaths(context:any) {
26-
console.log("++++++ Dynamic getStaticPaths", context);
2726
let locale = context.locale ?? 'zh-CN';
2827
let paths = [
29-
{params:{ locale, dynamic: 'dynamic' }},
30-
{params:{ locale, dynamic: 'pass' }},
31-
{params:{ locale, dynamic: 'sideway' }},
32-
{params:{ locale, dynamic: 'more' }},
28+
{locale, params:{ dynamic: 'dynamic' }},
29+
{locale, params:{ dynamic: 'pass' }},
30+
{locale, params:{ dynamic: 'sideway' }},
31+
{locale, params:{ dynamic: 'more' }},
3332
]
33+
console.log("++++++ Dynamic getStaticPaths", context, paths);
3434
return { paths, fallback: false }
3535
}

‎pages/tutorial/[...slug].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export async function getStaticProps({ params }: Params) {
6565

6666
export async function getStaticPaths(context:any) {
6767
const slugTree = getPostSlugs()
68-
let locale = context.locale ?? 'en';
68+
let locale = context.locale ?? 'zh-CN';
6969
let paths = slugTree.list.map((slug) => {
7070
return { locale, params: { slug: [slug] } }
7171
})

‎styles/theme.css‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,47 @@ img {
2525
max-width: 100%;
2626
display: block;
2727
}
28+
29+
30+
.card {
31+
margin: 1rem;
32+
flex-basis: 45%;
33+
padding: 1.5rem;
34+
text-align: left;
35+
color: inherit;
36+
text-decoration: none;
37+
border: 1px solid #eaeaea;
38+
border-radius: 10px;
39+
transition: color 0.15s ease, border-color 0.15s ease;
40+
}
41+
42+
.card:hover,
43+
.card:focus,
44+
.card:active {
45+
color: #0070f3;
46+
border-color: #0070f3;
47+
}
48+
49+
.card h3 {
50+
margin: 0 0 1rem 0;
51+
font-size: 1.5rem;
52+
}
53+
54+
.card p {
55+
margin: 0;
56+
font-size: 1.25rem;
57+
line-height: 1.5;
58+
}
59+
60+
2861
pre {
2962
padding: 0 16px;
3063
background: darkblue;
31-
color: rgb(202, 200, 193);
64+
color: rgb(204, 186, 120) !important;
3265
white-space: break-spaces;
3366
}
67+
68+
3469
.bgDarkblue {
3570
background: darkblue;
3671
color: cornsilk;
@@ -81,36 +116,6 @@ pre {
81116
background: darkblue;
82117
}
83118

84-
.card {
85-
margin: 1rem;
86-
flex-basis: 45%;
87-
padding: 1.5rem;
88-
text-align: left;
89-
color: inherit;
90-
text-decoration: none;
91-
border: 1px solid #eaeaea;
92-
border-radius: 10px;
93-
transition: color 0.15s ease, border-color 0.15s ease;
94-
}
95-
96-
.card:hover,
97-
.card:focus,
98-
.card:active {
99-
color: #0070f3;
100-
border-color: #0070f3;
101-
}
102-
103-
.card h3 {
104-
margin: 0 0 1rem 0;
105-
font-size: 1.5rem;
106-
}
107-
108-
.card p {
109-
margin: 0;
110-
font-size: 1.25rem;
111-
line-height: 1.5;
112-
}
113-
114119

115120
.fxCenter { justify-content: center;}
116121
.fxStart { justify-content: flex-start;}

‎utils/api.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function getPostSlugs(folder: string = 'Docs'): SlugTree {
3434
let subs: string[] = []
3535
let path = join(process.cwd(), folder)
3636
let list = FileSystem.readdirSync(path)
37-
console.log("========================getPostSlugs", folder)
37+
console.log("====== getPostSlugs", folder)
3838
list.map((it, id) => {
3939
let sta = FileSystem.statSync(join(path, it))
4040
if (sta.isDirectory()) {
@@ -61,7 +61,7 @@ export function getPostSlugs(folder: string = 'Docs'): SlugTree {
6161
* https://www.nextjs.cn/docs/basic-features/data-fetching#write-server-side-code-directly
6262
*/
6363
export function getPosts(fields: MetterKey[] = [], slugs: string[] = [], folder: string = 'Docs') {
64-
console.log("========================getPosts", !slugs, folder)
64+
console.log("====== getPosts", !slugs, folder)
6565
if (!slugs.length) {
6666
const tree = getPostSlugs(folder)
6767
slugs = tree.list
@@ -89,7 +89,7 @@ export function getPostBySlug(slug: string[] | string, fields: MetterKey[] = [],
8989
const fullPath = join(join(process.cwd(), folder), `${realSlug}.md`)
9090
const fileContents = FileSystem.readFileSync(fullPath, 'utf8')
9191
const { data, content } = matter(fileContents)
92-
console.log("========================getPostBySlug", slug, fullPath, data.title)
92+
console.log("====== getPostBySlug", slug, fullPath, data.title)
9393

9494
const items: FrontMetter = {} as FrontMetter
9595

0 commit comments

Comments
 (0)