学术网站更新指南

概述

本指南详细说明如何更新和维护您的Jekyll学术网站，包括添加新内容、修改样式和维护网站功能。

快速开始

启动本地服务器

cd "c:\Users\xtytj\OneDrive - ETH Zurich\Personal Website\tianyi.github.io"
bundle exec jekyll serve --incremental

然后在浏览器中访问 http://127.0.0.1:4000/

内容更新

1. 添加新论文/出版物

步骤1: 创建论文文件

在 _publications/ 文件夹中创建新的 .md 文件，命名格式：YYYY-MM-DD-paper-title.md

步骤2: 添加论文信息

---
title: "论文标题"
collection: publications
category: manuscripts  # 或 conferences
permalink: /publication/paper-title
excerpt: '简短描述'
date: 2024-01-01
venue: '期刊或会议名称'
slidesurl: 'http://example.com/slides.pdf'  # 可选
paperurl: 'http://example.com/paper.pdf'
citation: '引用格式'
image: '/images/publications/paper-image.jpg'  # 可选，论文配图
---

详细的论文描述...

步骤3: 添加论文图片（可选）

将图片放在 images/publications/ 文件夹中
推荐尺寸：300x200像素
支持格式：JPG, PNG, GIF

2. 更新项目页面

编辑 _pages/projects.html 文件，在相应的项目类别中添加新项目：

<div class="project-card">
    <img src="/images/projects/project-image.jpg" alt="项目名称">
    <div class="project-overlay">
        <h3>项目名称</h3>
        <p>项目简短描述</p>
        <a href="项目链接" class="project-btn">查看详情</a>
    </div>
</div>

3. 更新个人信息

编辑关于页面

修改 _pages/about.md 文件更新个人简介、经历等信息。

更新CV

修改 _data/cv.json 文件或 _pages/cv.md 文件更新简历信息。

4. 添加新博客文章

在 _posts/ 文件夹中创建新文件，命名格式：YYYY-MM-DD-post-title.md

---
title: '博客标题'
date: 2024-01-01
permalink: /posts/2024/01/blog-post-title/
tags:
  - 标签1
  - 标签2
---

博客内容...

样式自定义

1. 修改颜色主题

主要颜色配置在以下文件中：

_sass/_themes.scss - 全局主题颜色
_includes/archive-single-publication.html - 论文卡片样式
_pages/projects.html - 项目页面样式

当前使用的”小清新”配色方案：

主色调：红棕色 #c65d3a
背景：半透明白色 rgba(255, 255, 255, 0.1)
文字：深色系

2. 修改布局

主要布局文件：

_layouts/default.html - 默认页面布局
_includes/masthead.html - 顶部导航
_includes/sidebar.html - 侧边栏
_includes/footer.html - 页脚

3. 自定义CSS

可以在以下位置添加自定义CSS：

assets/css/main.scss - 主样式文件
_sass/ 文件夹中的各个scss文件

导航菜单配置

编辑 _data/navigation.yml 文件来修改导航菜单：

main:
  - title: "Publications"
    url: /publications/
  - title: "Projects"  # 新添加的项目页面
    url: /projects/
  - title: "Talks"
    url: /talks/    
  - title: "Teaching"
    url: /teaching/
  - title: "CV"
    url: /cv/

图片管理

图片存放位置

论文图片：images/publications/
项目图片：images/projects/
个人照片：images/
通用图片：images/

图片优化建议

使用压缩过的图片以提高加载速度
推荐格式：JPG（照片）、PNG（图表）、GIF（动画）
为每张图片添加alt标签以提高可访问性

网站部署

GitHub Pages部署

将更改推送到GitHub仓库
确保仓库设置中启用了GitHub Pages
选择分支（通常是master或main）
网站将自动构建和部署

⚠️ 重要提醒: 当部署到GitHub Pages时，确保所有图片和内部链接都使用``变量，以确保路径正确。

本地测试

在推送到GitHub之前，始终在本地测试更改：

bundle exec jekyll serve --incremental

base_path使用说明

为了确保网站在GitHub Pages上正常工作，所有页面都应该：

引入base_path: 在页面头部添加 ``
使用base_path变量:
- 图片路径: https://tianyixiao.top/images/image.png
- 内部链接: https://tianyixiao.top/publication/paper-name
- 文件链接: https://tianyixiao.top/files/file.pdf
外部链接保持不变: https://external-site.com

常见问题解决

1. 图片不显示

检查图片路径是否正确
确保图片文件存在
检查文件名大小写是否匹配

2. 样式不生效

清除浏览器缓存
检查CSS语法是否正确
使用 !important 强制应用样式（谨慎使用）

3. Jekyll构建错误

检查YAML前置事项格式
确保所有必需的字段都已填写
查看终端错误信息进行调试

4. 响应式布局问题

测试不同屏幕尺寸
使用浏览器开发者工具检查
调整CSS媒体查询

定期维护

每月检查

更新论文列表
检查所有链接是否有效
更新个人信息和照片
备份网站内容

每季度检查

更新Jekyll和依赖包
检查网站性能
审查和更新内容
测试移动端体验

年度检查

全面审查网站设计
更新CV和成就
考虑新功能添加
优化SEO设置

高级功能

1. 添加评论系统

可以集成Disqus或其他评论系统到博客文章中。

2. 添加Google Analytics

在 _config.yml 中配置Google Analytics跟踪代码。

3. 添加搜索功能

可以集成Jekyll搜索插件或Algolia搜索。

4. 多语言支持

可以配置多语言版本的网站。

备份建议

Git版本控制

定期提交更改到Git
使用有意义的提交信息
创建重要更改的分支

内容备份

定期备份 _data/ 文件夹
备份重要的图片和文档
保存网站配置文件的副本

联系和支持

如果在更新过程中遇到问题，可以：

查看Jekyll官方文档
搜索GitHub Issues
参考学术网站模板文档
寻求技术社区帮助

最后更新： 2025年8月8日

版本： 1.0

此指南将随着网站功能的增加而持续更新。

Tianyi Xiao