
注：本文为typace主题的中文教程，按照typace最新版本（不含测试版）进行编写，英文版请见github仓库

# P0 项目框架结构
- `pages/`: 包含网站主要页面
  - `about.js`:   从 `about.md`获取并展示关于页面内容
  - `index.js`:   博客首页，包含博客基本信息
  - `posts/`:   单页面文章存储
  - `archives.js`:   按时间顺序归档文章
  - `tags.js`:   按md表头标签分类文章
  - `_document.js`:   网页标签栏信息
  - `api/`:   存放api文件
    - `sitemap.js`:   sitemap
- `source/`:   文章存放页
- `lib/posts.js`:   包含从`source/`目录获取和排序博客文章数据的函数
- `styles/globals.css`:   Global CSS 全局样式配置
- `tailwind.config.js`:   tailwind css样式引用


# P1 项目基本配置部署
本博客支持github在线编辑开发，建议使用直接通过vercel在线安装部署，本地安装也可

项目当前版本 V3.0.1
## 1.1在线安装
1.本项目基于github作为托管平台，使用vercel部署，直接点击下方按钮即可自动clone仓库并在vercel进行部署
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fterryzhangxr%2Ftypace-i)
> [注意]
> 若未注册vercel账号，请在登陆注册界面使用github绑定快捷登录方便后续github自动抓取本仓库到您的账号下

2.进入部署界面后命名项目，点击部署，如下
![vercel dp1](https://ik.imagekit.io/terryzhang/IMG_6398.jpeg?updatedAt=1746152839523)
接着vercel就开始自动为你部署项目，等待1-2分钟左右就可以看到项目部署完成了。vercel会给你一个congratulations的界面，点击`go to dashbord`去往控制台

3.当看到如下界面时则部署成功，你可以看到博客的预览界面
![vercel dp2](https://ik.imagekit.io/terryzhang/IMG_6399.jpeg)
那么这个时候vercel会给你一个`xxx.vercel.app`的域名，你可以点击页面右上角的`visit`访问，但是vercel在中国大陆被墙了！！！所以vercel二级域无法访问

解决办法是绑定一个自己的域名，有域名的读者可以继续往下看vercel的教程，没有域名的话只能开vpn或者换成natlify或github pages部署，两者的教程尚未完成，这里向诸位抱歉

4.绑定自定义域名 

如果你有自己的域名，请按照下图操作
![vercel dp3](https://ik.imagekit.io/terryzhang/IMG_6400.jpeg?updatedAt=1746161243761)

添加域名后，如果你是一级域名，vercel会建议你将原域名重定向到www开头，这样速度较快，下面用我原来的域名做个范例
![vercel dp4](https://ik.imagekit.io/terryzhang/IMG_6407.jpeg?updatedAt=1746235901184)
按照上图，首先vercel会自动增加一个www开头的域名，将你现在的域名301重定向到www域名，并且在你的域名服务商那里增加两条dns，分别为主域名记录和子域名记录，按图操作
![vercel dp4](https://ik.imagekit.io/terryzhang/IMG_6409.jpeg?updatedAt=1746236566827)
如果使用子域名，则上述步骤在vercel仅需添加域名，服务商增加子域名记录就可

现在你可以打开域名看看了

# P2 index.js配置
以下开始是一些个性化配置，现在需要回到github进入clone本项目的仓库，进入`pages/` `index.js`开始配置
可按照代码中注释找到对应位置
## 2.1网站标题基本配置
此处更改的是站点名称和导航栏设置（导航栏已经包含全部页面，可不做更改）

```
// index.js 约第 125 行
<Link href="/">
  <a className="text-sm font-black tracking-widest...">
    TYPACE // <-- 修改你的站名
  </a>
</Link>

// 导航菜单定义
<div className="hidden md:flex items-center space-x-10...">
  <NavLink href="/archive">Archive</NavLink>
  <NavLink href="/tags">Tags</NavLink>
  <NavLink href="/about">About</NavLink>
</div>
```
## 2.2页面大标题设置
此处更改的是首页顶部的巨大滚动关键词和固定单词，代码位置如下
```
// index.js 第 7 行 （更改引号中四个单词）
const SCROLL_WORDS = ["Modern", "Scalable", "Performant", "Minimalist", "Elegant"];

// index.js 第 184 行 （更改第一行的白色固定单词，此处为building）
 <h1 className="text-[clamp(3rem,11.5vw,10.5rem)] leading-[0.8] font-black tracking-tighter mb-12">
   BUILDING <br />
   <div className="relative h-[1.1em] overflow-hidden">
```
提示： 建议保持 5 个单词以获得最佳的滚动节奏。单词越短，视觉冲击力越强
效果如下
![图片描述](https://ik.imagekit.io/terryzhang/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-05-02%20230331.png)


Typace主题开源配置教程（中文）

# start

This is my first blog post!

Welcome to [Typace](https://github.com/terryzhangxr/typace-i)! This is my very first post. 

# welcome!

we will develop more projects!

end


Hello World


# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

～～～删除线～～～

- 带点句
- adcd

```Python
print ("hello world")
```

# 标题
## 副标题

![picture](https://ik.imagekit.io/terryzhang/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-04-17%20204625.png "logo")

> [!NOTE]
>这是注意区块





BUILDING
Modern
Scalable
Minimalist
Efficient
Elegant

Typace主题开源配置教程（中文）

Hello World

theme typace主题文章测试