如何阻止Jekyll为<source>元素生成错误的闭合标签？

问题背景 #

MDN明确<source>是HTML空元素，无内容且无需闭合标签，但Jekyll处理模板时会错误生成</source>闭合标签。无论是使用自闭合写法<source ... />，还是改为无斜杠的<source ...>，都会出现异常（闭合标签错位或仍残留自闭合斜杠），导致W3C验证工具报错。

可行解决方法 #

• 方法1：用raw标签包裹<source>元素
  直接让Jekyll跳过对该标签的解析，保留原始HTML结构：

  {% raw %}
  <source src="{{ item.gif-mp4 }}" type="video/mp4">
  {% endraw %}
  

  注意要去掉自闭合斜杠，HTML5中空元素无需自闭合。

• 方法2：切换到kramdown处理器并配置
  在_config.yml中修改Markdown处理器设置：

  markdown: kramdown
  kramdown:
    parse_block_html: true
    parse_span_html: true
  

  之后模板里直接使用无自闭合斜杠的写法：

  <source src="{{ item.gif-mp4 }}" type="video/mp4">
  

  kramdown对HTML空元素的解析更贴合标准，不会生成多余的闭合标签。

• 方法3：自定义Liquid过滤器（进阶）
  编写一个简单的插件生成正确的<source>标签：

  1. 在项目根目录创建_plugins/source_tag.rb文件，内容如下：

     module Jekyll
       module SourceTagFilter
         def source_tag(src, type)
           "<source src=\"#{src}\" type=\"#{type}\">"
         end
       end
     end
     
     Liquid::Template.register_filter(Jekyll::SourceTagFilter)
     

  2. 在模板中调用过滤器：

     {{ item.gif-mp4 | source_tag: "video/mp4" }}
     

  这种方式完全控制标签输出，彻底避免解析异常。

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