05. 定制与修改主页#

✍️ 修改文案步骤：#

1. 打开对应语言的翻译文件（例如中文版为 src/i18n/partials/home/zh_CN.ts）：

   1
   export const zh_CN = {
   2
       [HomeKey.title]: "Aquamarine",
   3
       [HomeKey.subtitle]: "前端设计工程师 · 语言学探索者",
   4
       [HomeKey.description]: "主要使用 <strong>React</strong> 与 <strong>Vue</strong> 进行前端开发...",
   5
       // ...
   6
   };
   

2. 直接在对应字段的大括号内修改字符串即可。如果需要加粗或者换行，可以使用 <strong>、<br> 等 HTML 标签。
3. 保持对称：如果你修改了主语言（如中文）的某条文案，推荐同步修改你启用的其他外语包（如 en.ts）里的对应 Key，以保持多语言体验的一致性。

例子 1：修改头像区域#

你会看到如下代码渲染头像：

1
<div class="w-36 h-36 md:w-52 md:h-52 shrink-0 rounded-full overflow-hidden border-[6px] border-[var(--primary)]/20...">
2
    <ImageWrapper src={profileConfig.avatar || '/favicon.svg'} alt="Avatar" class="w-full h-full object-cover" />
3
</div>

它默认读取你 config.ts 中的 avatar 配置。你可以更改包裹它的 div 的 class 属性，比如改变圆角、阴影或大小。

例子 2：修改技术栈小标签#

你会在模板区中找到如下这些静态标签代码：

1
<div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-[var(--primary)]/10 text-[var(--primary)]...">
2
    <Icon name="fa6-brands:react" class="text-xl" /> React
3
</div>

• 你可以任意复制、粘贴、删除这些 <div class="flex items-center..."> 代码块来增减你的技术栈标签。
• <Icon name="..." /> 是一个图标组件，你可以前往 Icones 网站 寻找任何你喜欢的图标，并将 name 替换为新图标的名字（比如 fa6-brands:python）。

例子 3：修改按钮的链接或图标#

跳转到博客和文档的按钮代码：

1
<a href={...} class="group bg-[var(--primary)] text-white px-6 py-3.5 rounded-xl...">
2
    <Icon name="material-symbols:article-outline-rounded" class="text-xl" />
3
    {currentT.readBlog}
4
    <Icon name="material-symbols:arrow-forward-rounded" class="text-xl transition-transform group-hover:translate-x-1" />
5
</a>

• {currentT.readBlog} 代表这里动态读取了你在顶部字典里写的文字。
• 你可以像前面一样替换 <Icon> 中的图标。