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:
export const PROJECTS_CONFIG: ProjectConfig = { title: 'Projects', description: 'The examples of my projects.', introduce: 'The examples of my projects.',}
Property | Description |
---|---|
title | Title displayed on browser tags and title displayed on page. |
description | The metadata description in the head element of the page. |
introduce | The 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
):
---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: 32fork: 7---
Property | Description |
---|---|
name | Project name. |
description | Short description shown with the project card. |
githubUrl | GitHub repository URL of the project. |
website | Project website or demo URL. |
type | Display type for the project card. For now, 'image' shows a thumbnail. |
icon | Icon path for the project (supports paths under public/ ). |
imageClass | Extra classes for sizing the image (e.g., Tailwind classes). |
star | Stars count (optional). |
fork | Forks count (optional). |
Tag Page Configh3
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.',}
Property | Description |
---|---|
title | Title displayed on browser tags and title displayed on the tag statistics page. |
description | The metadata description in the head element of the tag statistics page. |
introduce | The introduce below the title on the tag statistics page. |