在Jekyll Chirpy主题中添加带CSS类的超链接图片问题

基于Jekyll chirpy-starter修改的模板，需为支持明暗模式切换的图片添加超链接，尝试两种写法后均未达预期：

尝试的写法及结果 #

情况1（Markdown语法） #

[![Alt Text](/assets/images/header/image-dark.png){: .dark .w-25 }](https://example.com/source)

结果：
✅ 超链接正常跳转
❌ CSS类（.dark .w-25）未生效

情况2（HTML语法） #

<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark w-25" alt="Alt Text">
</a>

结果：
❌ 点击图片触发主题默认图片弹窗，无法跳转到目标链接
✅ CSS类（.dark .w-25）生效

期望效果 #

1. 点击图片在新标签页打开目标链接，而非触发图片弹窗；
2. 图片CSS类正常生效：
   • .dark：仅在暗色模式下显示图片；
   • .w-25：图片宽度设为25%。

已尝试的操作 #

使用自定义CSS类但未达预期：

<a href="https://example.com/source">
    <img src="/assets/images/header/image-dark.png" class="dark-mode-img w-25" alt="Alt Text">
</a>

在_sass/layout/urlimage.scss中添加：

.mode-dark .dark-mode-img {
    content: url('/assets/images/header/image-dark.png');
}

转换后的HTML内容 #

<div class="content" style="text-align: justify;">
  <style>
    .content ul, .content ol {
      text-align: left !important;
    }
  </style>

  <p>Click the image to go to the source.</p>

  <p>
    1.
    <a href="https://example.com/source" class="img-link" target="_blank" rel="noopener noreferrer">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>

  <p>
    2.
    <a href="https://example.com/source" target="_blank" rel="noopener noreferrer"> </a>
    <a href="/website-theme/assets/images/header/image-dark.png" class="popup img-link dark w-25">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>

  <p>Solution (?)</p>

  <p>
    <a href="https://example.com/source" target="_blank" rel="noopener noreferrer"> </a>
    <a href="/website-theme/assets/images/header/image-dark.png" class="popup img-link dark-mode-img w-25">
      <img src="/website-theme/assets/images/header/image-dark.png" alt="Alt Text" loading="lazy">
    </a>
  </p>
</div>

从转换后的HTML可见，Chirpy主题会自动给独立<img>标签包裹带.popup类的<a>标签，导致自定义超链接被拆分。可从以下三方面解决：

1. 让Markdown写法的CSS类生效 #

Chirpy默认可能未启用kramdown的属性列表解析，在_config.yml中配置：

kramdown:
  parse_block_html: true
  parse_span_html: true
  attribute_list_syntax: fenced

配置后，Markdown写法的CSS类会正常生效，同时超链接保持跳转功能。

2. 阻止主题自动添加弹窗链接 #

方法A：使用禁用弹窗类 #

修改HTML代码，给图片添加.no-popup类（若主题支持）：

<a href="https://example.com/source" target="_blank" rel="noopener noreferrer">
    <img src="/assets/images/header/image-dark.png" class="dark w-25 no-popup" alt="Alt Text">
</a>

方法B：修改主题JS逻辑 #

找到主题中处理图片弹窗的JS文件（通常在assets/js/目录下），修改判断逻辑，跳过被<a>包裹或带.no-popup类的图片：

document.querySelectorAll('.content img:not([hidden])').forEach(img => {
  // 跳过已被<a>包裹或带禁用类的图片
  if (img.parentElement.tagName === 'A' || img.classList.contains('no-popup')) return;
  // 保留原有弹窗创建逻辑
});

修改后，HTML写法的超链接可正常跳转，CSS类也会生效。

3. 确保明暗模式切换正常 #

若使用自定义.dark-mode-img类，调整CSS规则：

/* 默认隐藏暗色图片 */
.dark-mode-img {
    display: none;
}
/* 暗色模式下显示 */
.mode-dark .dark-mode-img {
    display: block;
}

若使用主题内置.dark类，其默认逻辑已支持明暗切换，无需额外修改。

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