Recreating Current Pages

In the Astro AntfuStyle Theme, you can customize the /, /projects, /changelog, /streams, /feeds, and 404 pages. This post also covers creating or removing pages. For /releases and /prs, see Customizing GitHub Activity Pages.

Creating Pages#

In Project Structure, it is mentioned that the theme’s organizational strategy is to store all substantive content in the src/content directory, while the src/pages directory uses .mdx files to assemble content into structured, styled layouts.

Open any .mdx file in src/pages, and you’ll notice a similar structure: YAML frontmatter + imported Astro components + JSX with layout components nesting view components.

The theme defined all .mdx files in src/pages/ belong to the pages content collection. This is enabled by Astro’s Content Layer API, introduced in Astro 4.14, allowing content to exist outside src/content/.

The frontmatter fields for pages content collection are defined by schema: pageSchemain src/content/schema.ts as follows:

The theme includes a VS Code snippet for auto-generating this frontmatter (located in .vscode/astro-antfustyle-theme.code-snippets). Type pageFrontmatter and press tab to insert it (tab completion is enabled in .vscode/settings.json).

These properties can be easily passed to layout and view components. If you need to modify anything, you only need to adjust the frontmatter.

By creating pages this way, you can manage metadata and control features across pages efficiently, making it easy to expand and maintain your site.

Updating Pages#

Homepage and 404 Page#

To update the homepage, open src/content/home/index.md and start writing the content you want to present.

To update the 404 page, you can directly edit src/pages/404.mdx.

/projects Page#

Open src/content/projects/data.json, delete the existing content, and use the following as a base:

{
  "$schema": "../../../.astro/collections/projects.schema.json",
  "projects": {
    "Classification of Projects I": [
      // your projects
    ]
  }
}

The projects field type is Record<string, projectSchema[]>. projectSchema is defined as follows:

The theme also includes a code snippet for generating projectSchema. Type projectData to trigger it, then use tab to modify the values.

Finally, update the frontmatter in src/pages/projects.mdx.

/changelog Page#

To recreate the /changelog page, please follow the Adding New Posts. The content for the /changelog page, stored in the src/content/changelog/ directory, belongs to the changelog content collection. This collection also uses schema: postSchema for frontmatter types.

/streams Page#

Similarly to adding projects, open src/content/streams/data.json, delete the existing content, and use the following as a base:

{
  "$schema": "../../../.astro/collections/streams.schema.json",
  "streams": [
     // your streams
  ]
}

The streams field type is streamSchema[]. streamSchema is defined as follows:

As with projectSchema, you can use a code snippet to generate streamSchema by typing streamData.

Finally, update the frontmatter in src/pages/streams.mdx.

/feeds Page#

The /feeds page displays content fetched via @ascorbic/feed-loader. You can define an external data source (like RSS, RDF, or Atom feeds) for the feeds collection using the following:

import { feedLoader } from '@ascorbic/feed-loader'

const feeds = defineCollection({
  loader: feedLoader({
    url: 'https://astro.build/rss.xml',
  }),
})

Removing Pages#

Using remove the /changelog page as an example:

• Delete src/pages/changelog.mdx.
• Delete src/content/changelog directory.
• Update src/content/config.ts and src/config.ts:

import { glob } from 'astro/loaders'
import { defineCollection } from 'astro:content'
import { feedLoader } from '@ascorbic/feed-loader'
import { pageSchema, postSchema, projectsSchema, streamsSchema } from './schema'

// Define other collections...

const changelog = defineCollection({
  type: 'content',
  schema: postSchema,
})

// Define other collections...

export const collections = { pages, blog, projects, changelog, streams, feeds }

export const UI: Ui = {
  internalNavs: [
    ...
    {
      path: '/changelog',
      title: 'Changelog',
      displayMode: 'iconHiddenOnMobile',
      icon: 'i-ri-draft-line',
    },
  ],
  ...
  tabbedLayoutTabs: [
    { title: 'Changelog', path: '/changelog' },
    { title: 'AstroBlog', path: '/feeds' },
    { title: 'AstroStreams', path: '/streams' },
  ],
  ...
}

Wrapping Up#

That’s all about customizing pages in this theme. Thanks for reading!

If you encounter any issues, find errors, or see opportunities for improvement, feel free to join the discussion or submit an issue or pull request. Your feedback is highly appreciated! ❤️