如何在Jekyll主题头部插入覆盖式内容？

核心方案 #

借助Jekyll全局引入的_includes/_masthead.html文件，嵌入你已编写的HTML/Liquid代码实现Widget插入，配合SCSS完成覆盖样式，同时通过页面Front Matter实现内容的按需自定义。

具体操作步骤 #

1. 整合Widget代码到_masthead.html #

打开_includes/_masthead.html，在头部图片容器的外层（或直接在图片元素上方）插入Widget的Liquid代码，实现内容的可变逻辑：

<!-- 头部Widget代码，放在头部图片容器之前 -->
<div class="header-widget">
  {% if page.header_widget_content %}
    {{ page.header_widget_content | markdownify }}
  {% else %}
    <!-- 全局默认内容，可按需修改 -->
    <p>默认头部覆盖内容</p>
  {% endif %}
</div>

<!-- 原有头部图片容器代码 -->
<div class="masthead-image-container">
  <img src="{{ page.masthead_image | relative_url }}" alt="页面头部图">
</div>

2. 引入SCSS样式 #

将你的header-widget.scss内容合并到主题主SCSS文件（如assets/css/main.scss），确保样式生效：

.header-widget {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  /* 其他自定义样式 */
}

.masthead-image-container {
  position: relative; /* 确保Widget相对于头部容器定位 */
}

3. 页面级自定义内容 #

在需要单独设置Widget内容的页面Front Matter中添加配置：

---
layout: page
masthead_image: "/images/custom-header.jpg"
header_widget_content: "这是**自定义**的头部覆盖内容，支持Markdown格式"
---

关键注意事项 #

• 必须给头部图片容器设置position: relative，否则Widget的绝对定位会以整个页面为基准，而非头部区域
• 使用markdownify过滤器可让自定义内容支持Markdown语法，提升内容排版灵活性
• 若需全局统一默认内容，可将默认值写入_config.yml，通过{{ site.header_default_content | markdownify }}调用

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