一介布衣

🧭 快速导航

项目介绍 ​

  • 技术栈：VitePress + 自定义主题（BlogHome/BlogSidebar 等）+ 数据生成脚本（generate_blog_data.js）
  • 渲染数据：生产环境使用静态 blogData.js（由脚本生成）；开发环境也可复用静态数据，确保稳定
  • 排序规则：按 frontmatter.date 降序；同一天按标题升序；URL 兜底

推荐目录结构（关键路径）：

text
yijiebuyi/
├─ docs/
│  ├─ .vitepress/
│  │  ├─ config.ts          # 站点配置（可能在项目内）
│  │  └─ theme/
│  │     ├─ components/     # BlogHome.vue、BlogSidebar.vue 等
│  │     └─ data/           # blogData.js（生成）、seriesData.js
│  ├─ blog/                 # 博客文章、使用指南
│  └─ series/               # 系列文章（llm-2025 等）
├─ scripts/                 # 增量构建、部署、修复脚本
└─ package.json             # 脚本命令（dev/build/preview 等）

快速开始 ​

  1. 安装依赖
bash
npm ci  # 或 npm install
  1. 常用脚本
bash
npm run dev             # 启动开发（生成数据 + vitepress dev）
npm run build           # 构建静态站点（vitepress build）
npm run preview         # 本地预览构建产物
npm run generate:data   # 仅生成 blogData.js（读取 frontmatter 并排序）
  1. 本地预览要点
  • 如首页列表为空，先执行 npm run generate:data
  • 构建提示 “The language 'env' is not loaded, falling back to 'txt'” 可忽略

写作与组织 ​

1. 基本设置方法 ​

在文章的 frontmatter 中设置 date 字段：

yaml
---
title: 你的文章标题
description: 文章描述
date: 2024-05-15  # 👈 这里设置你想要的发布日期
author: 一介布衣
tags:
  - 标签1
  - 标签2
categories:
  - 分类名称
---
```

### 2. 支持的日期格式

~~~yaml
# 标准日期格式（推荐）
date: 2024-05-15

# 包含时间
date: 2024-05-15 14:30:00

# 斜杠分隔
date: 2024/05/15

# ISO 8601 格式
date: 2024-05-15T14:30:00.000Z
```

### 3. 在文章中显示发布时间

有两种方式在文章中显示格式化的发布时间：

**方式1：使用 DateFormatter 组件（推荐）**
~~~markdown
<div class="article-meta">
  <p><strong>发布时间：</strong><DateFormatter :date="$frontmatter.date" /></p>
  <p><strong>作者：</strong>\{\{ $frontmatter.author \}\}</p>
  <p><strong>标签：</strong>\{\{ $frontmatter.tags.join(', ') \}\}</p>
</div>
```

**方式2：使用全局格式化函数**
~~~markdown
> **发布时间：** \{\{ $formatDate($frontmatter.date) \}\}
> **作者：** \{\{ $frontmatter.author \}\}
> **标签：** \{\{ $frontmatter.tags.join(', ') \}\}
```

**支持的日期格式：**
- `YYYY年MM月DD日` (默认) - 2024年05月15日
- `YYYY-MM-DD` - 2024-05-15
- `MM/DD/YYYY` - 05/15/2024

## 🚀 完整示例

### 示例1：技术文章

~~~yaml
---
title: AI技术分享 - 大模型应用开发实践
description: 分享大模型应用开发的实践经验
date: 2024-05-15  # 设置为历史日期
author: 一介布衣
tags:
  - AI
  - 大模型
  - 技术分享
categories:
  - AI技术
---

# AI技术分享 - 大模型应用开发实践

> 发布时间：\{\{ $frontmatter.date \}\}  
> 作者：\{\{ $frontmatter.author \}\}

## 内容开始...
```

### 示例2：开发经验文章

~~~yaml
---
title: 开发经验总结 - 从零到一的项目实践
description: 分享项目开发的完整经验
date: 2024-03-20  # 设置为更早的日期
author: 一介布衣
tags:
  - 开发经验
  - 项目管理
categories:
  - 开发经验
---

# 开发经验总结

> 发布时间：\{\{ $frontmatter.date \}\}

## 内容开始...
```

## 🛠️ 创建新文章的步骤

### 1. 使用模板文件

复制 `_template.md` 文件作为新文章的起点：

~~~bash
# 复制模板文件
cp docs/blog/_template.md docs/blog/your-new-article.md
```

### 2. 修改文章信息

编辑新文件，修改以下内容：

1. **标题和描述**
2. **发布日期**（设置为你想要的历史日期）
3. **标签和分类**
4. **文章内容**

### 3. 文件命名建议

```
docs/blog/
├── ai-tech-share.md          # AI技术分享
├── dev-experience.md         # 开发经验
├── project-architecture.md  # 项目架构
├── code-quality.md          # 代码质量
└── team-collaboration.md    # 团队协作
```

## 📊 文章组织建议

### 按时间组织

~~~markdown
## 2024年文章

### 5月
- [AI技术分享](./ai-tech-share.md) - 2024年5月15日
- [项目架构设计](./architecture.md) - 2024年5月10日

### 3月
- [开发经验总结](./dev-experience.md) - 2024年3月20日
- [代码质量提升](./code-quality.md) - 2024年3月15日
```

### 按分类组织

~~~markdown
## AI技术
- [大模型应用开发](./ai-tech-share.md)
- [RAG系统设计](./rag-system.md)

## 开发经验
- [项目实践总结](./dev-experience.md)
- [架构设计思考](./architecture.md)
```

## 🎨 样式自定义

### 文章元信息样式

博客已经包含了自定义CSS样式，支持：

- 发布时间高亮显示
- 标签样式美化
- 响应式设计
- 深色模式适配

### 自定义样式示例

如果你想进一步自定义样式，可以修改 `docs/.vitepress/theme/custom.css`：

~~~css
/* 自定义发布时间样式 */
.publish-date {
  font-weight: 600;
  color: var(--vp-c-brand-1);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

## 🔧 高级功能

### 1. 自动生成文章列表

你可以创建一个脚本来自动生成按日期排序的文章列表：

~~~javascript
// scripts/generate-blog-index.js
const fs = require('fs');
const path = require('path');
const matter = require('gray-matter');

// 读取所有博客文章
// 按日期排序
// 生成索引页面
```

### 2. RSS订阅支持

可以添加RSS生成功能，让读者订阅你的博客：

~~~javascript
// 在构建时生成RSS文件
// 包含文章的自定义发布时间
```

## 📱 移动端适配

博客已经包含了响应式设计，在移动设备上也能很好地显示：

- 自适应布局
- 触摸友好的交互
- 优化的字体大小

## 🚀 部署建议

### 1. GitHub Pages

~~~yaml
# .github/workflows/deploy.yml
name: Deploy VitePress site to Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run docs:build
      - uses: actions/deploy-pages@v2
```

### 2. Vercel/Netlify

直接连接GitHub仓库，自动部署。

## 💡 最佳实践

1. **保持一致的文章结构**
2. **使用有意义的文件名**
3. **添加合适的标签和分类**
4. **包含文章摘要和关键词**
5. **定期更新和维护**

## 🎉 总结

现在你已经掌握了如何在VitePress博客中设置自定义发布时间！你可以：

- ✅ 为任何文章设置历史发布日期
- ✅ 使用模板快速创建新文章
- ✅ 自定义文章样式和布局
- ✅ 组织和管理你的博客内容

开始创建你的第一篇带有自定义发布时间的文章吧！

---

**相关文章推荐：**
- [AI技术分享 - 大模型应用开发实践](./ai-tech-share.md)
- [开发经验总结 - 从零到一的项目实践](./dev-experience.md)

**有问题欢迎交流讨论！**