mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-24 19:21:31 +08:00
Refactor README and improve component imports
This commit is contained in:
80
README.md
80
README.md
@ -1,79 +1,7 @@
|
|||||||
# Astro Resume
|
# KazooTTT的博客
|
||||||
|
|
||||||
## Features
|
主页:[https://kazoottt.top](https://kazoottt.top)
|
||||||
|
|
||||||
- Astro v4
|
## 鸣谢
|
||||||
- TailwindCSS utility classes
|
|
||||||
- ESLint / Prettier pre-installed and pre-configured
|
|
||||||
- Accessible, semantic HTML markup
|
|
||||||
- Responsive & SEO-friendly
|
|
||||||
- Dark / Light mode, using Tailwind and CSS variables (referenced from shadcn)
|
|
||||||
- [Astro Assets Integration](https://docs.astro.build/en/guides/assets/) for optimised images
|
|
||||||
- MD & [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts
|
|
||||||
- Pagination
|
|
||||||
- [Automatic RSS feed](https://docs.astro.build/en/guides/rss)
|
|
||||||
- Auto-generated [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)
|
|
||||||
- [Expressive Code](https://expressive-code.com/) source code and syntax highlighter
|
|
||||||
|
|
||||||
## Credits
|
本项目基于 [https://github.com/srleom/astro-theme-resume](https://github.com/srleom/astro-theme-resume) 修改。
|
||||||
|
|
||||||
- [astro-theme-cactus](https://github.com/chrismwilliams/astro-theme-cactus) for blog design
|
|
||||||
- [minirezume-framer](https://minirezume.framer.website/) for resume homepage design
|
|
||||||
|
|
||||||
## Project Structure
|
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
|
||||||
|
|
||||||
```text
|
|
||||||
├── public/
|
|
||||||
├── src/
|
|
||||||
├── assets/
|
|
||||||
│ ├── components/
|
|
||||||
│ ├── content/
|
|
||||||
│ ├── layouts/
|
|
||||||
| ├── pages/
|
|
||||||
| ├── styles/
|
|
||||||
| ├── utils/
|
|
||||||
| ├── site.config.ts
|
|
||||||
│ └── types.ts
|
|
||||||
├── .elintrc.cjs
|
|
||||||
├── .gitignore
|
|
||||||
├── .prettierignore
|
|
||||||
├── package.json
|
|
||||||
├── prettier.config.cjs
|
|
||||||
├── README.md
|
|
||||||
├── tailwind.config.js
|
|
||||||
└── tsconfig.json
|
|
||||||
```
|
|
||||||
|
|
||||||
## Editing guide
|
|
||||||
|
|
||||||
### Site info
|
|
||||||
|
|
||||||
To edit site info such as site title and description, edit the `src/site.config.ts` file.
|
|
||||||
|
|
||||||
### Page contents
|
|
||||||
|
|
||||||
To edit the resume homepage content and design, edit the `src/pages/index.astro` file.
|
|
||||||
|
|
||||||
### Page components
|
|
||||||
|
|
||||||
To edit page components found site-wide such as the card used in the homepage, edit the files found in the `src/components/` directory.
|
|
||||||
|
|
||||||
### Layouts
|
|
||||||
|
|
||||||
To edit the base layouts of all pages, edit the `src/layouts/BaseLayout.astro` file.
|
|
||||||
|
|
||||||
To edit the layout of a blog article, edit the `src/layouts/BlogPost.astro` file.
|
|
||||||
|
|
||||||
### Blog content
|
|
||||||
|
|
||||||
To add blog content, insert `.md` files in the `src/content/` directory.
|
|
||||||
|
|
||||||
To add images in blog articles, insert a folder in the `src/content/` directory, add both the `.md` and image files into the new folder, and reference the image in your `.md` file.
|
|
||||||
|
|
||||||
## Theming
|
|
||||||
|
|
||||||
To change the theme colours of the site, edit the `src/styles/app.css` file.
|
|
||||||
|
|
||||||
To change the fonts of the site, add your font files into `/public`, add it as a `@font-face` in the `src/styles/app.css` file, as a `fontFamily` in the `tailwind.config.js` file, and apply the new font class to the `body` tag in the `src/layouts/BaseLayout.astro` file.
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import { Image } from 'astro:assets'
|
|
||||||
import type { ImageMetadata } from 'astro'
|
|
||||||
import { cn } from '@/utils'
|
import { cn } from '@/utils'
|
||||||
|
import type { ImageMetadata } from 'astro'
|
||||||
|
import { Image } from 'astro:assets'
|
||||||
|
|
||||||
const {
|
const {
|
||||||
as: Tag = 'div',
|
as: Tag = 'div',
|
||||||
@ -49,8 +49,8 @@ if (imagePath) {
|
|||||||
<div class='flex flex-col gap-y-1.5'>
|
<div class='flex flex-col gap-y-1.5'>
|
||||||
<div class='flex flex-col gap-y-0.5'>
|
<div class='flex flex-col gap-y-0.5'>
|
||||||
<h1 class='text-lg font-medium'>{heading}</h1>
|
<h1 class='text-lg font-medium'>{heading}</h1>
|
||||||
<h2 class='text-muted-foreground'>{subheading}</h2>
|
{subheading && <h2 class='text-muted-foreground'>{subheading}</h2>}
|
||||||
<h2 class='text-muted-foreground'>{date}</h2>
|
{date && <h2 class='text-muted-foreground'>{date}</h2>}
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content'
|
|
||||||
import FormattedDate from '../FormattedDate.astro'
|
|
||||||
import Card from '../Card.astro'
|
|
||||||
import { Icon } from 'astro-icon/components'
|
import { Icon } from 'astro-icon/components'
|
||||||
|
import type { CollectionEntry } from 'astro:content'
|
||||||
|
import Card from '../Card.astro'
|
||||||
|
import FormattedDate from '../FormattedDate.astro'
|
||||||
import Label from '../Label.astro'
|
import Label from '../Label.astro'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
import PageLayout from '@/layouts/BaseLayout.astro'
|
|
||||||
import Button from '@/components/Button.astro'
|
import Button from '@/components/Button.astro'
|
||||||
|
import PageLayout from '@/layouts/BaseLayout.astro'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
description: 'Not found',
|
description: 'Not found',
|
||||||
|
@ -4,10 +4,10 @@ export const prerender = true
|
|||||||
import type { GetStaticPaths, Page } from 'astro'
|
import type { GetStaticPaths, Page } from 'astro'
|
||||||
import type { CollectionEntry } from 'astro:content'
|
import type { CollectionEntry } from 'astro:content'
|
||||||
|
|
||||||
|
import Button from '@/components/Button.astro'
|
||||||
import Pagination from '@/components/Paginator.astro'
|
import Pagination from '@/components/Paginator.astro'
|
||||||
import PostPreview from '@/components/blog/PostPreview.astro'
|
import PostPreview from '@/components/blog/PostPreview.astro'
|
||||||
import PageLayout from '@/layouts/BaseLayout.astro'
|
import PageLayout from '@/layouts/BaseLayout.astro'
|
||||||
import Button from '@/components/Button.astro'
|
|
||||||
import { getAllPosts, getUniqueCategories, sortMDByDate } from '@/utils'
|
import { getAllPosts, getUniqueCategories, sortMDByDate } from '@/utils'
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
|
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
|
||||||
@ -56,7 +56,7 @@ const paginationProps = {
|
|||||||
|
|
||||||
<PageLayout meta={meta}>
|
<PageLayout meta={meta}>
|
||||||
<div class='w-full'>
|
<div class='w-full'>
|
||||||
<Button title='Back' href='/blog' style='button'>
|
<Button title='Back' href='/categories' style='button'>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
width='14'
|
width='14'
|
||||||
|
@ -7,7 +7,7 @@ const allPosts = await getAllPosts()
|
|||||||
const allCategories = getUniqueCategoriesWithCount(allPosts)
|
const allCategories = getUniqueCategoriesWithCount(allPosts)
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
description: "A list of all the topics I've written about in my posts",
|
description: 'A list of all the topics I\'ve written about in my posts',
|
||||||
title: 'All Categories'
|
title: 'All Categories'
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
@ -36,7 +36,7 @@ const friends = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Roi's Blog`,
|
name: `Roi's Blog`,
|
||||||
url: 'https://roi.moe/',
|
url: 'https://roi.moe/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
@ -18,9 +18,9 @@ Disallow: /500
|
|||||||
`
|
`
|
||||||
|
|
||||||
export const GET: APIRoute = () => {
|
export const GET: APIRoute = () => {
|
||||||
return new Response(robotsTxt.trim(), {
|
return new Response(robotsTxt.trim(), {
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'text/plain; charset=utf-8',
|
'Content-Type': 'text/plain; charset=utf-8'
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -4,10 +4,10 @@ export const prerender = true
|
|||||||
import type { GetStaticPaths, Page } from 'astro'
|
import type { GetStaticPaths, Page } from 'astro'
|
||||||
import type { CollectionEntry } from 'astro:content'
|
import type { CollectionEntry } from 'astro:content'
|
||||||
|
|
||||||
|
import Button from '@/components/Button.astro'
|
||||||
import Pagination from '@/components/Paginator.astro'
|
import Pagination from '@/components/Paginator.astro'
|
||||||
import PostPreview from '@/components/blog/PostPreview.astro'
|
import PostPreview from '@/components/blog/PostPreview.astro'
|
||||||
import PageLayout from '@/layouts/BaseLayout.astro'
|
import PageLayout from '@/layouts/BaseLayout.astro'
|
||||||
import Button from '@/components/Button.astro'
|
|
||||||
import { getAllPosts, getUniqueTags, sortMDByDate } from '@/utils'
|
import { getAllPosts, getUniqueTags, sortMDByDate } from '@/utils'
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
|
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
|
||||||
@ -54,7 +54,7 @@ const paginationProps = {
|
|||||||
|
|
||||||
<PageLayout meta={meta}>
|
<PageLayout meta={meta}>
|
||||||
<div class='w-full'>
|
<div class='w-full'>
|
||||||
<Button title='Back' href='/blog' style='button'>
|
<Button title='Back' href='/tags' style='button'>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
width='14'
|
width='14'
|
||||||
|
Reference in New Issue
Block a user