2025-2-21
教程

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

cover

注：本文为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

[注意] 若未注册vercel账号，请在登陆注册界面使用github绑定快捷登录方便后续github自动抓取本仓库到您的账号下

2.进入部署界面后命名项目，点击部署，如下 vercel dp1 接着vercel就开始自动为你部署项目，等待1-2分钟左右就可以看到项目部署完成了。vercel会给你一个congratulations的界面，点击go to dashbord去往控制台

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

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

4.绑定自定义域名

如果你有自己的域名，请按照下图操作 vercel dp3

添加域名后，如果你是一级域名，vercel会建议你将原域名重定向到www开头，这样速度较快，下面用我原来的域名做个范例 vercel dp4 按照上图，首先vercel会自动增加一个www开头的域名，将你现在的域名301重定向到www域名，并且在你的域名服务商那里增加两条dns，分别为主域名记录和子域名记录，按图操作 vercel dp4 如果使用子域名，则上述步骤在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 个单词以获得最佳的滚动节奏。单词越短，视觉冲击力越强 效果如下 图片描述