Skip to content

OBSIDIAN_BLOG_WORKFLOW.md

Latest commit

 

History

History
497 lines (379 loc) · 10.8 KB

OBSIDIAN_BLOG_WORKFLOW.md

File metadata and controls

497 lines (379 loc) · 10.8 KB
Raw

📝 Obsidian 博客创作到发布全流程文档

🎯 文档概述

本文档详细记录了从 Obsidian 新建博客到发布到线上的完整流程，旨在支持您的写作工作，并将在后续持续迭代优化。

文档版本：v1.0
最后更新：2024-01-20
适用项目：DaysFromToday 博客系统

📋 目录

  1. 快速开始
  2. 详细流程
  3. 组件使用指南
  4. 图片管理
  5. 发布流程
  6. 故障排除
  7. 最佳实践
  8. 版本更新记录

🚀 快速开始

5分钟快速上手

  1. 启动同步：

    npm run sync:obsidian:watch

  2. 在 Obsidian 中创建文章：

    • 打开 obsidian/content/blog/zh/ 目录
    • 新建文件，使用模板

  3. 查看效果：

    • 访问 http://localhost:3000/zh/blog/文章名
    • 实时查看更新

📖 详细流程

步骤 1：在 Obsidian 中新建博客

1.1 创建新文件

  • 位置：obsidian/content/blog/zh/ 或 obsidian/content/blog/en/
  • 方法：右键 → "新建文件" 或 Ctrl+N (Windows) / Cmd+N (Mac)
  • 命名：使用有意义的文件名，如 时间管理技巧.md

1.2 使用模板

  • 方法：右键 → "Templater: Insert template" → 选择 blog-template-optimized
  • 或手动复制：从 obsidian/templates/blog-template-optimized.md 复制内容

1.3 填写基本信息

---
title: "文章标题"
description: "文章描述，用于 SEO 和社交媒体分享"
date: "2024-01-20"
author: "Leon"
category: "分类名称"
tags: ["标签1", "标签2", "标签3"]
locale: "zh"  # 或 "en"
image: "/images/blog/文章图片.jpg"
readingTime: "5分钟阅读"
---

步骤 2：编写内容

2.1 基本结构

# 文章标题

## 📝 文章摘要
> **一句话总结**：文章的核心观点

## 🎯 核心观点
- **主要论点 1**：观点描述
- **主要论点 2**：观点描述
- **主要论点 3**：观点描述

## 📖 正文内容

### 引言
文章开头，吸引读者注意

### 主要内容
#### 1. 第一个要点
详细内容...

#### 2. 第二个要点
详细内容...

### 结论
总结全文，给出行动建议

## 🔗 相关链接
- [相关文章](链接)
- [外部资源](链接)

## 📚 参考资料
1. 参考资料 1
2. 参考资料 2

2.2 插入组件

<!-- 提示框 -->
<TipBoxTailwind type="info" title="重要提示">
这是一个信息提示框，用于突出重要信息。
</TipBoxTailwind>

<!-- 代码示例 -->
<CodeExampleTailwind title="JavaScript 示例" language="javascript">
const greeting = "Hello, World!";
console.log(greeting);
</CodeExampleTailwind>

<!-- 文章摘要 -->
<ArticleSummaryTailwind 
  summary="本文介绍了时间管理的重要性"
  points={[
    "时间管理是提高效率的关键",
    "有效的时间规划能带来更多自由",
    "时间掌控就是真正的自由"
  ]}
/>

步骤 3：插入图片

3.1 拖拽上传（推荐）

  • 直接将图片文件拖拽到 Obsidian 编辑器中
  • 图片会自动上传到 R2 CDN
  • 自动生成正确的图片链接

3.2 手动插入

![图片描述](图片文件名.jpg)

3.3 支持的图片格式

  • ✅ 图片：.jpg, .jpeg, .png, .gif, .webp, .heic, .heif
  • ✅ 媒体：.mp4, .mov, .m4a, .mp3, .wav
  • ✅ 文档：.pdf, .csv, .xlsx, .docx

步骤 4：启动实时同步

4.1 启动同步脚本

npm run sync:obsidian:watch

4.2 同步功能

  • 👀 监控：自动监控 obsidian/content 目录变化
  • 🔄 转换：自动转换 .md 到 .mdx
  • 📄 同步：同步到 content 目录
  • 🚀 构建：触发 Contentlayer 重新构建

4.3 实时预览

  • 修改 Obsidian 中的内容
  • 保存文件（Cmd+S）
  • 网站自动更新

步骤 5：查看效果

5.1 访问博客页面

  • 中文：http://localhost:3000/zh/blog/文章名
  • 英文：http://localhost:3000/en/blog/article-name

5.2 美化效果

  • 🎨 渐变背景的元信息卡片
  • 🏷️ 美观的标签样式
  • 📱 响应式设计
  • 🎭 深色模式支持

🧩 组件使用指南

提示框组件

信息提示框

<TipBoxTailwind type="info" title="重要提示">
这是一个信息提示框，用于突出重要信息。
</TipBoxTailwind>

警告提示框

<TipBoxTailwind type="warning" title="注意事项">
这是一个警告提示框，用于提醒用户注意。
</TipBoxTailwind>

成功提示框

<TipBoxTailwind type="success" title="成功提示">
这是一个成功提示框，用于确认操作成功。
</TipBoxTailwind>

错误提示框

<TipBoxTailwind type="error" title="错误提示">
这是一个错误提示框，用于显示错误信息。
</TipBoxTailwind>

代码示例组件

JavaScript 代码

<CodeExampleTailwind title="JavaScript 示例" language="javascript">
const greeting = "Hello, World!";
console.log(greeting);
</CodeExampleTailwind>

Python 代码

<CodeExampleTailwind title="Python 示例" language="python">
def hello_world():
    print("Hello, World!")

hello_world()
</CodeExampleTailwind>

文章摘要组件

<ArticleSummaryTailwind 
  summary="本文介绍了时间管理的重要性"
  points={[
    "时间管理是提高效率的关键",
    "有效的时间规划能带来更多自由",
    "时间掌控就是真正的自由"
  ]}
/>

🖼️ 图片管理

图片上传流程

  1. 拖拽图片到 Obsidian 编辑器
  2. 自动上传到 R2 CDN
  3. 生成链接：https://cdn.daysfromtoday.ai/images/文件名.jpg
  4. 自动替换：Obsidian 中的图片链接

图片优化建议

  • 格式：推荐使用 .webp 或 .jpg
  • 大小：建议不超过 2MB
  • 尺寸：建议宽度不超过 1200px
  • 压缩：使用在线工具压缩图片

图片命名规范

  • 描述性：time-management-tips.jpg
  • 小写字母：使用小写字母和连字符
  • 避免空格：使用连字符代替空格
  • 包含关键词：包含文章相关关键词

🚀 发布流程

方法一：自动部署（推荐）

1. 提交代码到 Git

git add .
git commit -m "feat: 添加新博客文章 - 文章标题"
git push origin main

2. Vercel 自动部署

  • Vercel 自动检测代码变化
  • 自动构建和部署
  • 几分钟后网站更新

方法二：手动部署

1. 构建项目

npm run build

2. 部署到 Vercel

vercel --prod

发布检查清单

  • 文章内容完整
  • 图片显示正常
  • 组件渲染正确
  • 链接有效
  • SEO 信息完整
  • 标签准确
  • 分类正确

🔧 故障排除

常见问题及解决方案

1. 图片上传失败

症状：图片无法上传或显示 解决方案：

  • 检查 R2 配置是否正确
  • 确认图片文件格式支持
  • 检查网络连接
  • 查看控制台错误信息

2. 同步不工作

症状：修改 Obsidian 内容后网站不更新 解决方案：

  • 确认同步脚本正在运行
  • 检查文件路径是否正确
  • 查看终端错误信息
  • 重启同步脚本

3. 组件不显示

症状：组件在网站上不显示或显示错误 解决方案：

  • 确认组件已正确导入
  • 检查 MDX 语法是否正确
  • 查看浏览器控制台错误
  • 确认组件名称拼写正确

4. 网站不更新

症状：修改内容后网站没有变化 解决方案：

  • 确认 Contentlayer 重新构建
  • 检查浏览器缓存
  • 尝试硬刷新（Cmd+Shift+R）
  • 清除浏览器缓存

5. 构建失败

症状：npm run build 失败 解决方案：

  • 检查 TypeScript 类型错误
  • 确认所有依赖已安装
  • 查看构建日志
  • 检查文件语法错误

调试命令

# 检查同步状态
npm run sync:obsidian:all

# 验证 SEO 配置
npm run seo:validate

# 检查 GA 配置
npm run ga:verify

# 全面检查
npm run seo-ga:check

💡 最佳实践

写作技巧

  1. 标题优化：

    • 使用数字和具体词汇
    • 包含关键词
    • 长度控制在 60 字符以内

  2. 内容结构：

    • 使用清晰的标题层次
    • 段落长度适中
    • 包含列表和引用

  3. SEO 优化：

    • 在标题和描述中包含关键词
    • 使用相关的标签
    • 添加内部和外部链接

技术优化

  1. 性能优化：

    • 压缩图片
    • 使用合适的图片格式
    • 避免过大的文件

  2. 可访问性：

    • 为图片添加 alt 文本
    • 使用语义化的 HTML
    • 确保良好的对比度

  3. 维护性：

    • 使用有意义的文件名
    • 保持一致的命名规范
    • 定期更新内容

工作流优化

  1. 提高效率：

    • 使用模板快速创建文章
    • 批量上传图片
    • 使用快捷键

  2. 版本控制：

    • 定期提交到 Git
    • 使用有意义的提交信息
    • 保持代码库整洁

  3. 协作：

    • 使用清晰的文件命名
    • 添加详细的注释
    • 保持文档更新

📊 版本更新记录

v1.0 (2024-01-20)

  • ✅ 初始版本发布
  • ✅ 完整的 Obsidian 到网站流程
  • ✅ 图片自动上传功能
  • ✅ 实时同步功能
  • ✅ 博客美化组件
  • ✅ 响应式设计
  • ✅ SEO 优化

计划中的功能

  • 批量文章导入
  • 文章模板库扩展
  • 图片批量处理
  • 文章统计分析
  • 多语言自动翻译
  • 社交媒体自动分享

📞 支持与反馈

获取帮助

  1. 查看本文档的故障排除部分
  2. 检查控制台错误信息
  3. 确认所有依赖已正确安装
  4. 联系技术支持

提供反馈

  • 文档改进建议
  • 新功能需求
  • 问题报告
  • 使用体验分享

贡献指南

  • 文档更新
  • 功能开发
  • 测试反馈
  • 内容创作

🎯 总结

本文档提供了从 Obsidian 新建博客到发布到线上的完整流程，包括：

  • ✅ 详细的步骤说明
  • ✅ 组件使用指南
  • ✅ 图片管理流程
  • ✅ 发布流程
  • ✅ 故障排除
  • ✅ 最佳实践

立即开始使用：

  1. 在 Obsidian 中创建新文章
  2. 启动实时同步：npm run sync:obsidian:watch
  3. 查看美化效果：访问博客页面
  4. 提交代码：发布到线上

持续迭代：本文档将根据使用反馈和功能更新持续优化，确保为您提供最佳的写作体验。

文档版本：v1.0 | 最后更新：2024-01-20 | 适用项目：DaysFromToday 博客系统