Weblog 建站指南

欢迎使用 Weblog！本指南将帮助你使用这个模板搭建和配置属于自己的博客。

在线演示

你可以访问在线演示站点：ultimate-kernel.fun/Weblog

演示站点展示了以下特性：

• 清新现代的设计风格
• 深色/浅色主题支持
• 中英文双语支持
• 响应式布局
• 毛玻璃导航效果
• 技术栈轮播展示
• 带标签和归档的博客系统

前置要求

开始之前，请确保你已安装以下工具：

• Node.js (v18 或更高版本)
• pnpm (v8 或更高版本)
• Git

快速开始

1. 克隆仓库：

bash复制
1git clone https://github.com/aaronlamz/Weblog.git
2cd Weblog

2. 安装依赖：

bash复制
1pnpm install

3. 启动开发服务器：

bash复制
1pnpm dev

现在你的站点应该运行在 http://localhost:3000 了！

配置说明

基础站点配置

主要配置文件位于 src/config/site.config.ts。以下是你需要自定义的关键部分：

typescript复制
1export const siteConfig = {
2  name: '你的站点名称',
3  title: '你的站点标题',
4  description: '你的站点描述',
5  
6  author: {
7    name: '你的名字',
8    email: 'your.email@example.com',
9    avatar: 'https://github.com/你的用户名.png', // GitHub 头像或其他图片链接
10    bio: '个人简介',
11  },
12  
13  social: {
14    github: 'https://github.com/你的用户名',
15    twitter: 'https://twitter.com/你的用户名',
16    email: 'your.email@example.com',
17  }
18}

配置 Giscus 评论系统

Weblog 使用 Giscus 作为评论系统，它基于 GitHub Discussions。以下是配置步骤：

1. 确保你的仓库是公开的

2. 在仓库中启用 GitHub Discussions：

   • 进入仓库设置
   • 滚动到 "Features" 部分
   • 勾选 "Discussions"

3. 安装 Giscus GitHub App

   • 访问 Giscus app 页面
   • 点击 "Install"
   • 选择你的仓库

4. 获取 Giscus 配置：

   • 访问 giscus.app
   • 输入你的仓库信息
   • 复制生成的配置

5. 更新 src/components/comments.tsx 中的 Giscus 配置：

typescript复制
1<Giscus
2  repo="你的用户名/仓库名"
3  repoId="你的仓库ID"
4  category="Announcements"
5  categoryId="分类ID"
6  mapping="pathname"
7  theme={theme === 'dark' ? 'dark_dimmed' : 'light'}
8  lang={locale === 'zh' ? 'zh-CN' : 'en'}
9/>

国际化配置

Weblog 默认支持中文和英文。翻译文件存储在：

• messages/en.json - 英文翻译
• messages/zh.json - 中文翻译

添加或修改翻译：

1. 在两个语言文件中添加你的文本
2. 在组件中使用翻译键：

typescript复制
1const t = useTranslations('namespace')
2// ...
3<div>{t('key')}</div>

写作博客文章

博客文章使用 MDX 格式，存储在：

• content/blog/en/ - 英文文章
• content/blog/zh/ - 中文文章

每篇文章都需要包含前置元数据：

mdx复制
1---
2title: "文章标题"
3description: "简短描述"
4date: "2024-03-20"
5featured: false
6---
7
8你的文章内容...

部署说明

GitHub Pages 部署

1. 更新 next.config.js：

javascript复制
1const basePath = process.env.BASE_PATH || ''
2const isProduction = process.env.NODE_ENV === 'production'
3
4const nextConfig = {
5  output: isProduction ? 'export' : undefined,
6  basePath: isProduction ? basePath : '',
7}

2. 配置 GitHub Actions：

   • 工作流文件已在 .github/workflows/deploy.yml 中设置
   • 在仓库设置中启用 GitHub Pages
   • 将源设置为 "GitHub Actions"

3. 推送你的更改：

bash复制
1git add .
2git commit -m "配置部署"
3git push

你的站点将自动部署到 GitHub Pages！

自定义设置

样式定制

Weblog 使用 Tailwind CSS 进行样式设置。主要配置文件：

• tailwind.config.ts - Tailwind 配置
• src/styles/globals.css - 全局样式
• 各组件样式使用 Tailwind 类名编写

组件定制

你可能想要自定义的关键组件：

• src/components/header.tsx - 导航和站点头部
• src/components/footer.tsx - 站点底部
• src/components/theme-toggle.tsx - 暗/亮模式切换
• src/components/language-switcher.tsx - 语言切换器

需要帮助？

如果遇到问题：

• 查看 GitHub Issues
• 如果找不到解决方案，创建新的 issue
• 在 GitHub Discussions 中参与讨论

祝你使用愉快！🎉