机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

Astrofy | 个人作品集网站模板

Astrofy 是一个免费的开源模板，用于使用 Astro 和 TailwindCSS 构建您的个人作品集网站。几分钟内即可创建一个包含博客、简历、项目版块、商店和 RSS 订阅的网页。

演示

查看 Astrofy 的实时演示

安装

在你的终端中运行以下命令

pnpm install

安装好这些包后，你就可以运行 Astro 了。Astro 自带一个内置的开发服务器，拥有项目开发所需的一切。astro dev 命令将启动本地开发服务器，让你第一次就可以看到你的网站在运行。

pnpm run dev

技术栈

• Astro
• tailwindcss
• DaisyUI

项目结构

├── src/
│   ├── components/
│   │   ├── cv/
│   │   │   ├── TimeLine
│   │   ├── BaseHead.astro
│   │   ├── Card.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   └── HorizontalCard.astro
│   │   └── SideBar.astro
│   │   └── SideBarMenu.astro
│   │   └── SideBarFooter.astro
│   ├── content/
│   │   ├── blog/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   ├── store/
│   │   │   ├── item1.md
│   │   │   ├── item2.md
│   ├── layouts/
│   │   └── BaseLayout.astro
│   │   └── PostLayout.astro
│   └── pages/
│   │   ├── blog/
│   │   │   ├── [...page].astro
│   │   │   ├── [slug].astro
│   │   └── cv.astro
│   │   └── index.astro
│   │   └── projects.astro
│   │   └── rss.xml.js
│   ├── styles/
│   │   └── global.css
│   └── config.ts
├── public/
│   ├── favicon.svg
│   └── profile.webp
│   └── social_img.webp
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json

网站配置

您可以在 '/src/config.ts' 文件中更改全局网站配置：

• SITE_TITLE：默认页面标题。
• SITE_DESCRIPTION：默认页面描述。
• GENERATE_SLUG_FROM_TITLE：默认情况下，Astrofy 会根据文章名称生成博客页面的 slug。如果您想使用 Astro 文件名作为 slug（兼容旧版本 Astrofy），请将此变量设置为 false。
• TRANSITION_API：启用或禁用过渡 API。

组件使用

布局组件

BaseHead、Footer、Header 和 SideBar 组件已包含在布局系统中。要更改网站内容，您可以编辑这些组件的内容。

侧边栏

在侧边栏中，您可以更改个人头像、网站所有页面的链接和社交图标。

您可以使用 mask classes 来更改头像形状。

使用的社交图标来自 BoxIcons 的 SVG 包。您可以在 SideBarFooter 组件中替换这些图标。

要在侧边栏添加新页面，请前往 SideBarMenu 组件。

<li><a class="py-3 text-base" id="home" href="/">Home</a></li>

注意：为了更改侧边栏菜单的活动项，您需要在新页面的 BaseLayout 组件中设置属性 sideBarActiveItemID，并将该 ID 添加到 SideBarMenu 中的链接。

时间线

时间线组件用于确认简历。

<div class="time-line-container">
  <TimeLineElement title="Element Title" subtitle="Subtitle">
    Content that can contain
    <div>divs</div>
    and <span>anything else you want</span>.
  </TimeLineElement>
  ...
</div>

卡片 & 横向卡片

这些卡片主要用于项目和博客组件。它们包含一张图片、一个标题和一个描述。

<HorizontalCard title="Card Title" img="imge_url" desc="Description" url="Link
URL" target="Optional link target (_blank default)" badge="Optional badge"
tags={['Array','of','tags']} />

水平卡片商店商品

此组件已包含在模板的商店布局中。如果您想在其他位置使用它，这些是属性。

<HorizontalShopItem
  title="Item Title"
  img="imge_url"
  desc="Item description"
  pricing="current_price"
  oldPricing="old_price"
  checkoutUrl="external store checkout url"
  badge="Optional badge"
  url="item details url"
  custom_link="Custom link url"
  custom_link_label="Cutom link btn label"
  target="Optional link target (_self default)"
/>

添加自定义组件

要添加自定义组件，可以在源文件夹下的 components 文件夹中创建一个 .astro 文件。

组件必须遵循此模板。--- 代表代码块并使用 Javascript，可以用于导入。

HTML 组件是你新组件的实际样式。

---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->

有关更多详细信息，请参阅这里的 astro 组件 文档。

布局

在每个新增页面中包含 BaseLayout ，在你的帖子页面中包含 PostLayout 。

BaseLayout 定义了每个你想添加的新网页的一般模板。它导入了常量 SITE_TITLE 和 SITE_DESCRIPTION，这些常量可以在 ../config 文件夹中修改。放置在那里的数据可以通过 import 在任何地方导入。

页面

博客

博客使用 Astro 的内容集合来查询帖子的 md 。

[page].astro

[page].astro 是用于分页帖子列表的路由。你可以在此更改每页列出的项目数量和分页按钮标签。

[slug].astro

[slug].astro 是每个博客帖子的基础路由，你可以自定义页面布局或行为，默认使用 content/blog 作为内容集合，PostLayout 作为布局。

商店

在 /pages/shop/ 文件夹中添加你的 md 项目。

[页面].astro

[page].astro 是用于分页商品列表的路由。你可以在此更改每页列出的项目数量和分页按钮标签。商店将渲染你包含在此文件夹内的所有 .md 文件。

项目格式

在每个项目文件的顶部添加这种格式的代码。

---
title: "Demo Item 1"
description: "Item description"
heroImage: "Item img url"
details: true // show or hide details btn
custom_link_label: "Custom btn link label"
custom_link: "Custom btn link"
pubDate: "Sep 15 2022"
pricing: "$15"
oldPricing: "$25.5"
badge: "Featured"
checkoutUrl: "https://checkouturl.com/"
---

静态页面

模板中包含的其他页面都是静态页面。index 页面属于根页面。您可以直接在 /pages 文件夹中添加您的页面，然后在 sidebar 组件中添加到这些页面的链接。

可以随意修改模板中包含的页面内容或添加您需要的页面。

主题

要更改模板主题，请在 BaseLayout.astro 文件中更改 <html> 标签的 data-theme 属性。

您可以从 30 个可用主题中进行选择，或创建自定义主题。可用主题请见 这里。

网站地图

当你在域名根目录构建网站时，网站地图会自动生成。请在公共文件夹中使用您的网站名称 URL 更新 robots.txt 文件以生成网站地图。

部署

你可以将你的网站部署在你喜欢的静态托管服务上，例如 Vercel、Netlify、GitHub Pages 等。

部署的配置取决于你打算使用的平台。请参阅 官方 Astro 信息 来部署你的网站。

⚠️ CAUTION

此模板的博客分页是通过文件名中的动态路由参数实现的，目前这种格式与 SSR 部署配置不兼容，因此请在部署时使用默认的静态部署选项。

贡献

欢迎提出建议和拉取请求！如果有新的功能请求或错误报告，可以随时发起讨论或提交问题。

贡献的最佳方式之一是选择一个已标记为 accepted 的错误报告或功能建议并深入研究。

请注意不要处理未标记为 accepted 的问题。仅仅因为有人创建了问题，并不意味着我们会接受相关的拉取请求。

许可

Astrofy 依据 MIT 许可证授权 —— 详情请参见 LICENSE 文件。