GitHub Pages使用Jekyll-theme Cayman如何设置自定义头部图片

核心错误原因梳理 #

• 不要修改_site目录下的任何文件：该目录是Jekyll构建时自动生成的输出目录，每次重新构建都会覆盖原有内容，你修改的样式自动还原就是这个原因。
• CSS不存在image属性，添加背景图需要使用background-image属性，若要保留原有渐变背景，需要用逗号分隔多个背景值。
• 你编写的自定义CSS语法错误，将HTML标签写入了CSS规则中，同时修改header标签时class属性漏了开头的双引号，导致规则完全不生效。

解决方案 #

方法1：直接插入图片标签（推荐，最简单稳定） #

1. 复制主题默认的_layouts/page.html文件到你的站点根目录的同名路径下（没有对应目录就手动新建）
2. 修改该文件中header模块的代码，删除原有标题、描述文本，插入你的自定义图片，保留原有的page-header类即可继承原有背景样式，参考代码：

<header class="page-header" role="banner">
  <!-- 替换成你自己的图片地址，可根据需求调整style参数，也可以用a标签包裹图片实现跳转 -->
  <img src="https://你的图片地址.png" alt="站点logo" style="max-width: 80%; height: auto; margin: 0 auto;">
  <!-- 如果需要保留原有的GitHub按钮、下载按钮就保留下方代码，不需要直接删除即可 -->
  {% if site.github.is_user_page %}
  <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
  {% endif %}
  {% if site.show_downloads %}
    <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
    <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
  {% endif %}
</header>

方法2：将图片设为头部背景 #

如果不需要图片可点击、只是作为背景展示，可以用CSS实现：

1. 在站点根目录新建assets/css/style.scss文件，写入以下内容：

---
---
@import "{{ site.theme }}";

.page-header {
  /* 逗号分隔两个背景，写在前面的层级更高，这里是图片在上，渐变背景在下 */
  background-image: url("https://你的图片地址.png"), linear-gradient(120deg, #155799, #159957);
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}
/* 隐藏原有标题、描述文本，不需要删布局文件 */
.page-header .project-name, .page-header .project-tagline {
  display: none;
}

2. 不需要修改布局文件，直接保存构建即可生效。

验证 #

修改完成后本地执行jekyll serve预览效果，确认没问题再推送部署即可。

内容的提问来源于stack exchange，提问作者Creepybits