# Jekyll 博客网站编辑指南

以下是您的博客网站各个文件和目录的编辑指南，详细说明了在每个文件中可以做什么修改和优化：

## 基础配置文件

### _config.yml
- **功能**: 网站的核心配置文件
- **可编辑内容**:
  - 网站标题、描述、关键词
  - 基本URL设置
  - 语言设置（支持多种语言）
  - 分析工具配置
  - 评论系统设置
  - 分页数量调整
  - Markdown渲染器配置
  - 插件启用/禁用

## 布局文件

### _layouts/default.html
- **功能**: 网站的基本布局结构
- **可编辑内容**:
  - 整体页面结构
  - 容器类和布局调整

### _layouts/post.html
- **功能**: 博客文章的默认布局
- **可编辑内容**:
  - 文章页面的结构
  - 文章元数据显示方式
  - 评论区位置

### _layouts/page.html
- **功能**: 普通页面的默认布局
- **可编辑内容**:
  - 普通页面的结构
  - 页面标题和内容的排版

## 包含文件

### _includes/head.html
- **功能**: 页面头部元素
- **可编辑内容**:
  - SEO元标签
  - CSS引用
  - JavaScript引用
  - MathJax配置（数学公式）
  - 网站图标设置

### _includes/header.html
- **功能**: 网站顶部导航栏
- **可编辑内容**:
  - 导航菜单
  - 网站标志
  - 移动端导航菜单

### _includes/footer.html
- **功能**: 网站底部
- **可编辑内容**:
  - 版权信息
  - 社交媒体链接
  - 其他底部信息

### _includes/posts.html
- **功能**: 博客文章列表
- **可编辑内容**:
  - 文章列表样式
  - 文章摘要显示
  - 分页控件

## 样式文件

### _sass/ 目录
- **功能**: SASS样式文件
- **主要文件**:
  - container.scss: 容器布局
  - header.scss: 头部样式
  - footer.scss: 底部样式
  - post.scss: 文章样式
  - post-list.scss: 文章列表样式
  - mobile.scss: 移动端响应式设计
  - highlighter.scss: 代码高亮样式

### assets/css/
- **功能**: 编译后的CSS文件
- **主要文件**:
  - base.scss: 导入所有SASS文件
  - highlight.scss: 代码高亮主题

## 内容文件

### _posts/ 目录
- **功能**: 存放所有博客文章
- **文件格式**: YYYY-MM-DD-title.markdown
- **文章结构**:
  ```
  ---
  layout: post
  title: "文章标题"
  date: YYYY-MM-DD HH:MM:SS +0800
  categories: [分类1, 分类2]
  tags: [标签1, 标签2]
  ---

  文章内容...
  ```

### pages/ 目录
- **功能**: 存放独立页面
- **常见页面**:
  - about.md: 关于页面
  - categories.md: 分类页面
  - tags.md: 标签页面

## 资源文件

### assets/images/
- **功能**: 存放图片资源
- **优化建议**:
  - 压缩图片
  - 使用WebP格式
  - 为图片添加alt文本

### assets/scripts/
- **功能**: 存放JavaScript文件
- **优化建议**:
  - 压缩JS文件
  - 延迟加载非关键JS

## 其他重要文件

### index.html
- **功能**: 网站首页
- **可编辑内容**:
  - 首页布局（目前使用posts.html）
  - 可以修改为自定义首页

### 404.html
- **功能**: 404错误页面
- **可编辑内容**:
  - 错误页面的内容和样式
  - 添加有用的导航链接

### Gemfile
- **功能**: Ruby依赖管理
- **可编辑内容**:
  - Jekyll版本
  - 插件依赖

## 高级优化编辑

### 添加新功能
1. **搜索功能**:
   - 添加simple-jekyll-search.js到assets/scripts/
   - 创建search.json文件
   - 在header.html中添加搜索框

2. **黑暗模式**:
   - 在_sass/中创建dark-mode.scss
   - 添加切换JavaScript到assets/scripts/
   - 在header.html中添加切换按钮

3. **阅读进度条**:
   - 在assets/scripts/中添加进度条JavaScript
   - 在_layouts/post.html中添加进度条容器

4. **国际化（i18n）**:
   - 在_data/中创建语言文件（如i18n-en.yml, i18n-zh.yml）
   - 修改模板使用翻译键值

5. **社交分享按钮**:
   - 在_includes/中创建share.html
   - 在_layouts/post.html中包含分享按钮

## SEO优化编辑

1. **在_includes/head.html中**:
   - 完善Open Graph标签
   - 添加Twitter Cards标签
   - 确保canonical URL正确设置

2. **在每篇文章的前言中**:
   - 添加description属性
   - 添加合适的categories和tags

3. **创建robots.txt和sitemap.xml**:
   - 确保jekyll-sitemap插件已启用
   - 创建自定义robots.txt文件

## 性能优化编辑

1. **在_config.yml中**:
   ```yaml
   sass:
     style: compressed
   ```

2. **使用图片CDN**:
   - 更新图片URL为CDN链接

3. **延迟加载**:
   - 在assets/scripts/中添加懒加载JS
   - 为图片添加loading="lazy"属性

以上指南应该能帮助您了解如何编辑和优化您的Jekyll博客网站的各个部分。如果您对某个特定部分有更详细的问题，我可以提供更具体的指导。