如何为Hydejack模板的Jekyll项目页图片添加描述？

我对Jekyll并不熟悉，使用Hydejack博客模板搭建项目页时，发现页面渲染后顶部图片没有自定义文本描述，这会影响屏幕阅读器的可访问性，希望解决这个问题。

当前项目页的前置代码如下：

layout: project
title: 'MyProject'
description: >
  A new project
# featured: true
date: '12-12-2021'
image: 
  path: /assets/img/projectsImages/image1.jpg

页面显示正常，但图片无自定义描述。我尝试在前置代码中添加caption: 'some caption'，但并未生效，目前图片的alt文本似乎取自文章标题，不清楚如何添加自定义图片描述或需修改哪些布局结构。

解决方法 #

在Christian的帮助下，我通过修改_layouts/project.html文件解决了问题，修改后的文件如下（修改处已标注注释，使用时需删除注释避免报错）：

---
# Copyright (c) 2018 Florian Klampfer <https://qwtel.com/>
layout: base
---

{% assign version = jekyll.version | split:'.' %}
{% assign major = version[0] | plus:0 %}
{% assign minor = version[1] | plus:0 %}
{% assign patch = version[2] | plus:0 %}

{% assign project = page %}
{% assign separator = site.data.strings.separator | default:"|" %}
{% assign nsd = site.hydejack.no_structured_data | default:site.no_structured_data %}
{% assign proj_format = site.data.strings.date_formats.project | default:"%Y" %}
{% assign from_to_separator = strings.from_to_separator | default:strings.resume.from_to_separator | default:"–" %}

<!-- Change 1: alt声明 -->
{% assign alt_text = page.image.alt | default: '' %}

<article
  id="project"
  class="page mb6"
  role="article"
  {% unless nsd %}vocab="http://schema.org/" typeof="CreativeWork" resource="#project"{% endunless %}
  >
  <header>
    <h1 class="page-title" property="name">{{ project.title }}</h1>

    <p class="post-date heading">
      <span class="ellipsis mr1">
        {% if major >= 4 and minor >= 1 %}
          {% assign parent = site.pages | find:"show_collection",project.collection %}
        {% else %}
          {% assign parent = site.pages | where:"show_collection",project.collection | first %}
        {% endif %}

        {% if parent %}
          <a href="{{ parent.url | relative_url }}" class="flip-title" property="genre">{{ parent.title }}</a>
        {% endif %}

        {% unless site.hydejack.hide_dates %}
          {% if parent %}{{ separator }}{% endif %}
          <time datetime="{{ project.date | date_to_xmlschema }}">{{ project.date | date:proj_format }}</time>
          {% if project.end_date.size > 0 %}
            {{ from_to_separator }}
            <time datetime="{{ project.end_date | date_to_xmlschema }}">{{ project.end_date | date:proj_format }}</time>
          {% endif %}
        {% endunless %}
      </span>

      <span class="ellipsis ml1">
        <span class="sr-only">{{ separator }} {{ site.data.strings.links | default:"Links" }}{{ site.data.strings.colon }}</span>
        <span class="{{ site.data.strings.links_icon | default:'icon-link' }}" title="{{ site.data.strings.links | default:'Links' }}"></span>
        {% for link in project.links %}
          <a class="external" href="{{ link.url }}" property="sameAs">{{ link.title }}</a>
          {% unless forloop.last %}{{ separator }}{% endunless %}
        {% endfor %}
      </span>
    </p>

    {% assign screenshot = project.screenshot | default:project.image %}
    <div class="img-wrapper lead aspect-ratio sixteen-nine {% unless screenshot %}fallback-img{% endunless %}">
      {% if screenshot %}
        {% include_cached components/hy-img.html
          img=screenshot
          sizes="(min-width: 90em) 48rem, (min-width: 54em) 42rem, (min-width: 42em) 38rem, 100vw"
          
          <!-- Change 2: 之前为alt=project.title -->
          alt=alt_text
          property="image"
          width=864
          height=486
        %}
      {% endif %}
    </div>

    {% include components/message.html text=project.description hide=page.hide_description property="description" alt="" %}
    {% if project.caption %}<meta property="disambiguatingDescription" content="{{ project.caption }}"/>{% endif %}
  </header>

  {{ content }}
</article>

{% include components/dingbat.html %}

{% assign addons = page.addons | default:site.hydejack.project_addons %}
{% unless addons %}{% assign addons = "about,newsletter,other" | split:"," %}{% endunless %}
{% for addon in addons %}
  {% case addon %}
  {% when 'about' %}
     {% include_cached components/about.html author=page.author %}
  {% when 'newsletter' %}
    {% include if-non-null try="pro/newsletter.html" %}
  {% when 'other' %}
    {% include if-non-null try="pro/other-projects.html" %}
  {% when 'comments' %}
    {% include body/comments.html %}
  {% else %}
  {% endcase %}
{% endfor %}

修改完成后，就能在项目页前置代码里通过image.alt自定义图片的alt文本了，示例：

layout: project
title: 'MyProject'
description: >
  A new project
date: '12-12-2021'
image: 
  path: /assets/img/projectsImages/image1.jpg
  alt: '这是我的项目展示图片'

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