人间修炼手册

外观

astro小博客11 ​

项目 https://github.com/tcdw/koi
原站 https://tcdw.github.io/koi/
作者 https://www.tcdw.net/

命令 ​

安装依赖 pnpm i

本地开发 pnpm dev

生产构建 pnpm build

预览构建 pnpm preview --host

预览 ​

astro小博客11

修改 ​

astro.config.js 链接 删除base:中的koi只留“”即可 否则 首页排版错乱

src/consts.ts 标题 副标题 作者 头像 导航菜单路由 文章数量 图片等基本设置都在这

src/components/Footer.astro 页脚

src/components/Header.astro 图片参数

src/content/config.ts 博客的各项参数

src/content/blog 文章目录

public 站标ico 背景图等图片都在这里

让首页默认到文章列表 ​

将本页面 src/index.astro 替换为如下内容

bash
---
import { filterPosts } from "@/utils/misc";
import { getCollection } from 'astro:content';
import BlogPostList from "@/layouts/BlogPostList.astro";
import { BLOG_PAGINATION_SIZE } from "@/consts";

const posts = filterPosts(await getCollection('blog'), {
    filterDraft: true,
    filterUnlisted: true,
});
const latestPosts = posts.slice(0, BLOG_PAGINATION_SIZE);
---

<BlogPostList data={latestPosts} currentPage={1} lastPage={Math.ceil(posts.length / BLOG_PAGINATION_SIZE)} />

然后删除 src/_index.md.

友情链接 ​

src/pages/page/links.astro

bash
<!-- 链接页面的外壳 -->
<BlogPage title="链接" description="来看看我的小伙伴们吧！">
    <!-- 链接分类名称 -->
    <FriendCategoryTitle>链接分类</FriendCategoryTitle>
    <!-- 链接列表外壳 -->
    <FriendList>
        <!-- 
            链接项目。可以指定的参数包括：
            - `url`: 链接地址
            - `name`: 链接名称
            - [可选] `description`: 链接简介
            - [可选] `avatarUrl` 链接的头像 URL
        -->
        <Friend url="https://www.tcdw.net" name="吐槽大王部落格" description="本 Astro 博客主题的作者" avatarUrl="https://secure.gravatar.com/avatar/70ae2023afad30dae905344325cece8f?s=140" />
        <Friend url="https://example.com" name="测试链接" description="这是一个测试链接" />
        <Friend url="https://example.com" name="测试链接" description="这是一个测试链接" />
    </FriendList>
    <!-- 链接页面的简介，通过页面组件顶部引入的本 Markdown 文件会被渲染在这里 -->
    <MarkdownBody class="mt-6">
        <linksDescription.Content />
    </MarkdownBody>
</BlogPage>

其它设置参考 ​

bash
https://astro11.pages.dev/post/basic-configuration/
https://tcdw.github.io/koi/blog/

文章 ​

MD文章抬头 ​

bash
---
title: '一级标题'
description: '描述摘要'
pubDate: 'Jul 01 2022' //时间格式
heroImage: '头图链接难道是'
---

演示 ​

看看效果