人间修炼手册

外观

astro小博客-NANO ​

项目 https://github.com/markhorn-dev/astro-nano
原站 https://astro-nano-demo.vercel.app/

预览 ​

预览

修改 ​

astro.config.mjs 网站链接

src/components/ArrowCard.astro 阉割“项目”需要删除 | CollectionEntry<"projects">

src/components/BackToTop.astro 汉化“返回顶部”

src/components/FormattedDate.astro 调整语言 "zh-cn" 调整时间顺序：year: month:day:

src/components/Header.astro 删除以下

bash
      <span>
          {`/`}
        </span>
       <Link href="/work">
         工作
        </Link>
        <span>
          {`/`}
        </span>
        <Link href="/projects">
          项目
        </Link>

src/layouts/PageLayout.astro1 "zh-cn"

src/lib/utils.ts 修改"zh-CN" 时间项顺序 year: month: day:
预计阅读时间也在这里 但好像没必要改

src/pages/index.astro 首页内容 并删除以下

bash
       <section class="animate space-y-6">
        <div class="flex flex-wrap gap-y-2 items-center justify-between">
          <h5 class="font-semibold text-black dark:text-white">
            工作经验
          </h5>
          <Link href="/work">
            所有工作
          </Link>
        </div>
        <ul class="flex flex-col space-y-4">
          {work.map(entry => (
            <li>
              <div class="text-sm opacity-75">
                {dateRange(entry.data.dateStart, entry.data.dateEnd)}
              </div>
              <div class="font-semibold text-black dark:text-white">
                {entry.data.company}
              </div>
              <div class="text-sm opacity-75">
                {entry.data.role}
              </div>
              <article>
                <entry.Content />
              </article>
            </li>
          ))}
        </ul>
      </section>

      <section class="animate space-y-6">
        <div class="flex flex-wrap gap-y-2 items-center justify-between">
          <h5 class="font-semibold text-black dark:text-white">
            最新项目
          </h5>
          <Link href="/projects">
            所有项目
          </Link>
        </div>
        <ul class="flex flex-col gap-4">
          {projects.map(project => (
            <li>
              <ArrowCard entry={project} />
            </li>
          ))}
        </ul>
      </section>

src/pages/rss.xml.ts 删除以下

bash
  const projects = (await getCollection("projects"))
    .filter(project => !project.data.draft);

删除 const items = [...blog, ...projects]中的 ...projects

src/pages/work 删除work文件夹

src/pages/projects 删除projects文件夹

src/consts.ts 一大堆设置

删除第一段的

bash
  NUM_WORKS_ON_HOMEPAGE: 0,
  NUM_PROJECTS_ON_HOMEPAGE: 0,

删除

bash
//export const WORK: Metadata = {
//  TITLE: "工作",
//  DESCRIPTION: "Where I have worked and what I have done.",
//};

//export const PROJECTS: Metadata = {
//  TITLE: "项目",
//  DESCRIPTION: "A collection of my projects, with links to repositories and demos.",
//};

src/types.ts 删除以下

bash
  NUM_WORKS_ON_HOMEPAGE: number;
  NUM_PROJECTS_ON_HOMEPAGE: number;

public 里替换LOGO站标等图片素材

文章 ​

  • 架构
bash
📁 /src/content/blog
└── 📁 post-1
      └── 📄 index.md
└── 📁 post-2
      └── 📄 index.mdx

在上面的示例中，将根据经典 Markdown.md文件或 jsx 兼容 Markdown.mdx文件的存在生成两个静态页面。文件夹名称代表 slug：

https://example.com/blog/post-1
https://example.com/blog/post-2

  • 文章路径

src/content/blog

  • MD文章抬头
bash
---
title: "一级标题"
description: "文章摘要简述描述中心思想啥的."
date: "2024 03 27"//时间格式
---

命令 ​

安装依赖 pnpm i

本地开发 pnpm dev

演示 ​

看看效果