组内成员介绍模板使用说明

文件结构

_includes/
├── team-members.html          # 成员介绍HTML模板
_data/
├── team_members.yml           # 成员数据文件（YAML格式）
images/
└── team/                      # 成员照片目录（需要手动创建）
    ├── photo1.jpg
    ├── photo2.jpg
    └── ...

使用方法

方法一：直接编辑HTML模板（简单）

打开 _includes/team-members.html 文件
找到示例成员卡片（如示例成员1、示例成员2等）
修改以下内容：
- src="/images/team/photo1.jpg" → 替换为实际照片路径
- 张三 → 替换为实际姓名
- 博士研究生 → 替换为学位类型
- 入学时间：2023年9月 | 拟毕业：2027年6月 → 替换为实际时间
- 研究方向：气候变化对森林群落的影响 → 替换为实际研究方向
复制成员卡片模板，添加更多成员

方法二：使用YAML数据文件（推荐）

创建成员照片目录：
```
mkdir -p images/team
```
将成员照片（300×300像素）放入 images/team/ 目录
编辑 _data/team_members.yml 文件： ```yaml
- name: “实际姓名” degree: “学位类型” enrollment_date: “入学时间” graduation_date: “拟毕业时间” research_direction: “研究方向” photo: “/images/team/实际照片文件名.jpg” ```
在 about.md 或其他页面中添加： ```html

Chao Jin (金超)

PhD Candidate

Enrollment: 202209

Exp. Graduation: 202606

Research: Forest structural complexity and species diversity

Siyu Wu (伍斯宇)

PhD Candidate

Enrollment: 202309

Exp. Graduation: 202606

Research: Light competition and species diversity

Nan Jin (金楠)

PhD Candidate

Enrollment: 202409

Exp. Graduation: 202806

Research: Functional traits and elevational gradient

Jia Yao (姚嘉)

MSc Candidate

Enrollment: 202309

Exp. Graduation: 202606

Research: Trait plasticity and species coexistence

Jiqing Zheng (郑济卿)

MSc Candidate

Enrollment: 202309

Exp. Graduation: 202606

Research: Spatial point pattern and niche differentation

Liu Yang (杨柳)

MSc Candidate

Enrollment: 202409

Exp. Graduation: 202706

Research: Species coexistence under global climate change

Hengyi Zhu (朱恒一)

MSc Candidate

Enrollment: 202409

Exp. Graduation: 202706

Research: Forest 3D structure and niche differentation

Jinbo Huang (黄津菠)

MSc Candidate

Enrollment: 202509

Exp. Graduation: 202806

Research: Functional traits and plant interaction

Shuaishuai Sun (孙帅帅)

MSc Candidate

Enrollment: 202509

Exp. Graduation: 202806

Research: Lagency effect of dead large trees

## 在about.md中使用

在 `_pages/about.md` 文件的合适位置（如"Team Members"部分）添加：

```markdown
## 👥 Team Members

<!-- 组内成员介绍模板 -->
<!-- 使用方法：使用_data/team_members.yml文件，使用Liquid循环 -->


<div class="team-members-container">
  <div class="team-members-grid">
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/chao jin 300.png" alt="Chao Jin (金超)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Chao Jin (金超)</h3>
        <p class="team-member-degree">PhD Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202209</p>
        <p class="team-member-graduation">Exp. Graduation: 202606</p>
        <p class="team-member-research">Research: Forest structural complexity and species diversity</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/sywu 300.png" alt="Siyu Wu (伍斯宇)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Siyu Wu (伍斯宇)</h3>
        <p class="team-member-degree">PhD Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202309</p>
        <p class="team-member-graduation">Exp. Graduation: 202606</p>
        <p class="team-member-research">Research: Light competition and species diversity</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/Nanjin 300.jpg" alt="Nan Jin (金楠)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Nan Jin (金楠)</h3>
        <p class="team-member-degree">PhD Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202409</p>
        <p class="team-member-graduation">Exp. Graduation: 202806</p>
        <p class="team-member-research">Research: Functional traits and elevational gradient</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/jiayao 300.jpg" alt="Jia Yao (姚嘉)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Jia Yao (姚嘉)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202309</p>
        <p class="team-member-graduation">Exp. Graduation: 202606</p>
        <p class="team-member-research">Research: Trait plasticity and species coexistence</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/jiqing 300.jpg" alt="Jiqing Zheng (郑济卿)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Jiqing Zheng (郑济卿)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202309</p>
        <p class="team-member-graduation">Exp. Graduation: 202606</p>
        <p class="team-member-research">Research: Spatial point pattern and niche differentation</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/yangliu 300.jpg" alt="Liu Yang (杨柳)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Liu Yang (杨柳)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202409</p>
        <p class="team-member-graduation">Exp. Graduation: 202706</p>
        <p class="team-member-research">Research: Species coexistence under global climate change</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/hengyi 300.jpg" alt="Hengyi Zhu (朱恒一)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Hengyi Zhu (朱恒一)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202409</p>
        <p class="team-member-graduation">Exp. Graduation: 202706</p>
        <p class="team-member-research">Research: Forest 3D structure and niche differentation</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/jinbo 300.png" alt="Jinbo Huang (黄津菠)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Jinbo Huang (黄津菠)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202509</p>
        <p class="team-member-graduation">Exp. Graduation: 202806</p>
        <p class="team-member-research">Research: Functional traits and plant interaction</p>
      </div>
    </div>
    
    <div class="team-member-card">
      <div class="team-member-photo">
        <img src="/images/team/shuaishuai 300.jpg" alt="Shuaishuai Sun (孙帅帅)" width="150" height="150">
      </div>
      <div class="team-member-info">
        <h3 class="team-member-name">Shuaishuai Sun (孙帅帅)</h3>
        <p class="team-member-degree">MSc Candidate</p>
        <p class="team-member-enrollment">Enrollment: 202509</p>
        <p class="team-member-graduation">Exp. Graduation: 202806</p>
        <p class="team-member-research">Research: Lagency effect of dead large trees</p>
      </div>
    </div>
    
  </div>
</div>


<style>
.team-members-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.team-members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  justify-content: center;
}

.team-member-card {
  display: flex;
  align-items: flex-start;
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.team-member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.team-member-photo {
  margin-right: 20px;
  flex-shrink: 0;
}

.team-member-photo img {
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.team-member-info {
  text-align: left;
  flex: 1;
}

.team-member-name {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 1.4em;
}

.team-member-degree {
  margin: 0 0 8px 0;
  color: #3498db;
  font-weight: 600;
  font-size: 1.1em;
}

.team-member-enrollment {
  margin: 0 0 4px 0;
  color: #7f8c8d;
  font-size: 0.95em;
}

.team-member-graduation {
  margin: 0 0 8px 0;
  color: #7f8c8d;
  font-size: 0.95em;
}

.team-member-research {
  margin: 0;
  color: #34495e;
  font-size: 1em;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .team-members-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-member-card {
    padding: 15px;
    flex-direction: column;
    align-items: center;
  }

  .team-member-photo {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .team-member-photo img {
    width: 125px;
    height: 125px;
  }

  .team-member-info {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .team-member-photo img {
    width: 100px;
    height: 100px;
  }
}
</style>

自定义样式

如果需要调整样式，可以修改 _includes/team-members.html 文件中的CSS部分：

修改 grid-template-columns 调整每行显示数量
修改颜色、间距等样式
调整响应式断点

注意事项

照片尺寸建议为300×300像素，正方形
照片格式支持JPG、PNG等
每行默认显示2个成员，在小屏幕上自动调整为1个
成员卡片有悬停效果，提升用户体验

布局特点

模板采用两个成员一行的网格布局：

桌面端（宽度 > 768px）

┌─────────────┐  ┌─────────────┐
│  成员1      │  │  成员2      │
│             │  │             │
│ 照片+信息   │  │ 照片+信息   │
└─────────────┘  └─────────────┘
┌─────────────┐  ┌─────────────┐
│  成员3      │  │  成员4      │
│             │  │             │
│ 照片+信息   │  │ 照片+信息   │
└─────────────┘  └─────────────┘

移动端（宽度 ≤ 768px）

┌─────────────┐
│  成员1      │
│             │
│ 照片+信息   │
└─────────────┘
┌─────────────┐
│  成员2      │
│             │
│ 照片+信息   │
└─────────────┘

示例效果

模板提供以下功能：

两个成员一行的网格布局（桌面端）
响应式设计（移动端自动调整为每行1个）
成员照片圆形显示
悬停动画效果
清晰的信息层次结构
支持数据驱动和静态两种方式

Guochun Shen

组内成员介绍模板使用说明

文件结构

使用方法

方法一：直接编辑HTML模板（简单）

方法二：使用YAML数据文件（推荐）

Chao Jin (金超)

Siyu Wu (伍斯宇)

Nan Jin (金楠)

Jia Yao (姚嘉)

Jiqing Zheng (郑济卿)

Liu Yang (杨柳)

Hengyi Zhu (朱恒一)

Jinbo Huang (黄津菠)

Shuaishuai Sun (孙帅帅)

自定义样式

注意事项

布局特点

桌面端（宽度 > 768px）

移动端（宽度 ≤ 768px）

示例效果