Configure Projects and Tags pages: page texts (PROJECTS_CONFIG, TAGS_CONFIG), project content frontmatter, file locations, and usage examples.

Litos: Project And Tag Page Config
1 mins

Due to the small size of the Project and tag page configurations, they are merged into one document.

The following files are compatible with this document:

  • src/pages/projects/index.astro - project page.
  • src/pages/tags/index.astro - tag statistics page.
  • src/pages/tags/[tag]/[...page].astro - specific tag display post list page.
  • src/config.ts - project and tag page config.
  • src/components/base - most of the components come from here.

Project Page Configh3

Configure page texts:

config.ts
export const PROJECTS_CONFIG: ProjectConfig = {
title: 'Projects',
description: 'The examples of my projects.',
introduce: 'The examples of my projects.',
}
PropertyDescription
titleTitle displayed on browser tags and title displayed on page.
descriptionThe metadata description in the head element of the page.
introduceThe introduce below the title on the page.

Project contenth3

The content displayed on the project page comes from /src/content/projects.

Its writing style is similar to posts: one MDX file represents one project.

Project frontmatterh4

Example (src/content/projects/Litos/index.mdx):

projects/Litos/index.mdx
---
name: 'Litos'
description: 'A Simple & Modern Blog Theme for Astro.'
githubUrl: 'https://github.com/Dnzzk2/Litos'
website: 'https://litos.vercel.app/'
type: 'image'
icon: '../../../../public/projects/litos.png'
imageClass: 'w-10 h-10'
star: 32
fork: 7
---
PropertyDescription
nameProject name.
descriptionShort description shown with the project card.
githubUrlGitHub repository URL of the project.
websiteProject website or demo URL.
typeDisplay type for the project card. For now, 'image' shows a thumbnail.
iconIcon path for the project (supports paths under public/).
imageClassExtra classes for sizing the image (e.g., Tailwind classes).
starStars count (optional).
forkForks count (optional).

Tag Page Configh3

config.ts
export const TAGS_CONFIG: TagsConfig = {
title: 'Tags',
description: 'All tags of Posts',
introduce: 'All the tags for posts are here, you can click to filter them.',
}
PropertyDescription
titleTitle displayed on browser tags and title displayed on the tag statistics page.
descriptionThe metadata description in the head element of the tag statistics page.
introduceThe introduce below the title on the tag statistics page.