Commit 7a163cd

@@ -9,10 +9,20 @@ cover: ./demo_cover.jpg
 
 In this guide, I will show you how to create a custom page in this blog template.
 
-You might not be satisfied with posts, or the preset About and Links pages in Astral Halo; you want more—this article is here to meet that need.
+You might not be satisfied with posts, or the preset About and Links pages in Astral Halo;
+you want more—this article is here to meet that need.
 
-In the `src/content/spec` directory, you can find a file named `page-template.md`. Make a copy of this file in the same place, rename it to `any-name-you-want.md`, and write whatever content you want.
+In the `src/content/spec` directory, you can find a file named `page-template.md`.
+Make a copy of this file in the same place, rename it to `any-name-you-want.md`,
+and write whatever content you want.
 
-In the `src/pages` directory, find a file named `_page.template.astro` (files starting with `_` will not be rendered). Make a copy of this file in the same directory, and rename it to `any-name-you-want.astro` (the name can be different from the previous `any-name-you-want.md`), and this new file name will be the URL of your custom page. Open this `.astro` file in your editor, and you'll see the line `const pageSlug = 'page-template';`. Change `'page-template'` to the `any-name-you-want` from your just-renamed `any-name-you-want.md` and save.
+In the `src/pages` directory, find a file named `_page.template.astro`(files starting with `_`
+will not be rendered). Make a copy of this file in the same directory, and rename it to
+`any-name-you-want.astro` (the name can be different from the previous `any-name-you-want.md`),
+and this new file name will be the URL of your custom page. Open this `.astro` file in your editor,
+and you'll see the line `const pageSlug = 'page-template';`. Change `'page-template'` to the
+`any-name-you-want` from your just-renamed `any-name-you-want.md` and save.
 
-Wherever you want to add this new page, add a link to `/any-name-you-want`, where `any-name-you-want` refers to the `.astro` file. Finally, use `pnpm dev` and view your newly created custom page in the local preview that launches.
+Wherever you want to add this new page, add a link to `/any-name-you-want`, where `any-name-you-want`
+refers to the `.astro` file. Finally, use `pnpm dev` and view your newly created custom page in the
+local preview that launches.

@@ -14,10 +14,13 @@ import { Collapse, Icon, LinkCard, Repl, RepoCard, Ruby, TabItem, Tabs, Tooltip
 Components let you easily reuse a piece of UI or styling consistently. You can use them not just in `.astro` files, but also in `.mdx` files.
 
 > [!TIP]
-> [MDX](https://mdxjs.com/) is a format that lets you write JSX embedded inside Markdown. And it has no difference with markdown files in other ways.
+> [MDX](https://mdxjs.com/) is a format that lets you write JSX embedded inside Markdown.
+> And it has no difference with markdown files in other ways.
 
 > [!TIP]
-> Some components are both available in `.md` and `.mdx` files, but some are only available in `.mdx` files. In `.md` files, you can use components with [remark-directive](https://github.com/remarkjs/remark-directive). Components that available in `.md` files will have a `md` tab in the example.
+> Some components are both available in `.md` and `.mdx` files, but some are only available in `.mdx` files.
+> In `.md` files, you can use components with [remark-directive](https://github.com/remarkjs/remark-directive).
+> Components that available in `.md` files will have a `md` tab in the example.
 
 ## Containers
 

@@ -8,7 +8,8 @@ tags:
   - manual
 ---
 
-This blog template is built with [Astro](https://astro.build). For the things that are not mentioned in this guide, you may find the answers in the [Astro Docs](https://docs.astro.build/).
+This blog template is built with [Astro](https://astro.build). For the things that are not
+mentioned in this guide, you may find the answers in the [Astro Docs](https://docs.astro.build/).
 
 ## Article Front Matter
 
@@ -28,7 +29,9 @@ comment: true # Enable comments, requires comment system to be enabled and confi
 
 ## Where to Place the Post Files
 
-Your post files should be placed in `src/content/posts/` directory. You need to create sub-directories if you want to use local assets. To automatically generate a new post file, run `pnpm new [draft|post] [title] [--dir]` in the terminal at the root of the project.
+Your post files should be placed in `src/content/posts/` directory. You need to create
+sub-directories if you want to use local assets. To automatically generate a new post file,
+run `pnpm new [draft|post] [title] [--dir]` in the terminal at the root of the project.
 
 ```
 src/content/posts/

@@ -16,12 +16,16 @@ Here is an example of a Markdown blog post.
 Heading Level 1 is reserved for the post title, so you should start with Heading Level 2.
 
 :::collapse{title="Or"}
-You can uncomment `import remarkHeadingShift from './src/plugins/remark-heading-shift.mjs';` to the top of `astro.config.mjs` and then uncomment the first line of the `remarkPlugins` array. After that, you can use Heading Level 1 as a regular heading in your blog posts.
+You can uncomment `import remarkHeadingShift from './src/plugins/remark-heading-shift.mjs';`
+on the top of `astro.config.mjs` and then uncomment the first line of the `remarkPlugins` array.
+After that, you can use Heading Level 1 as a regular heading in your blog posts.
 :::
 
 ## Heading Level 2
 
-You can use GitHub Flavored Markdown to format your blog posts. For example, you can use **bold**, _italic_ and ~~strikethrough~~ text, create a [link](https://example.com) or just write a raw URL like https://example.com, and add images:
+You can use GitHub Flavored Markdown to format your blog posts. For example, you can use **bold**,
+_italic_ and ~~strikethrough~~ text, create a [link](https://example.com) or just write a raw URL
+like https://example.com, and add images:
 
 ![Example Image](../../assets/img/avatar.jpg)
 
@@ -125,7 +129,8 @@ And that's it!
 
 #### I Think You Want to Have a Look at Heading Level 4
 
-Bidirectional article links are also supported, you can use `[[slug]]` to create a link to another article like [[posts/create-custom-page/index#Introduction|create custom page]] or [[manual]]
+Bidirectional article links are also supported, you can use `[[slug]]` to create a link to
+another article like [[posts/create-custom-page/index#Introduction|create custom page]] or [[manual]]
 
 ##### Too Many Nested Headings is Not a Good Idea, but Here is Heading Level 5