博客使用指南 - 如何设置自定义发布时间
发布时间：<DateFormatter :date="$frontmatter.date" /> 作者：一介布衣 标签：VitePress, 博客, 使用指南, 发布时间
🎯 功能介绍
这个VitePress博客支持为文章设置自定义发布时间。你可以在今天（2025年8月5日）写一篇文章，但将发布时间设置为2024年5月15日，让文章看起来是在那个时间发布的。
📝 如何设置自定义发布时间
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.000Z3. 在文章中显示发布时间
有两种方式在文章中显示格式化的发布时间：
方式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-15MM/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.md2. 修改文章信息
编辑新文件，修改以下内容：
- 标题和描述
- 发布日期（设置为你想要的历史日期）
- 标签和分类
- 文章内容
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@v22. Vercel/Netlify
直接连接GitHub仓库，自动部署。
💡 最佳实践
- 保持一致的文章结构
- 使用有意义的文件名
- 添加合适的标签和分类
- 包含文章摘要和关键词
- 定期更新和维护
🎉 总结
现在你已经掌握了如何在VitePress博客中设置自定义发布时间！你可以：
- ✅ 为任何文章设置历史发布日期
- ✅ 使用模板快速创建新文章
- ✅ 自定义文章样式和布局
- ✅ 组织和管理你的博客内容
开始创建你的第一篇带有自定义发布时间的文章吧！
相关文章推荐：
有问题欢迎交流讨论！