0

这可能很简单，但我现在尝试解决它更长的时间。

我有一个picture(file, alt)用于 Markdown 转换器RedCarpet的辅助方法和自定义图像标签。

辅助方法<picture>使用给定的文件和替代文本创建一个 -tag。自定义 Redcarpet 渲染器使用此picture(file, alt)方法组成 div.image，包括图片标签和附加标题。div.caption应该在 <picture>div.image 内的 -tag 之后。但出于某种原因，我的 RedCarpet 渲染器将 div.caption 包含在 <picture>-tag 中。

喜欢：

<div class="project-body-image">
  <picture>
    ...
    <div class="caption"></div>
  </picture>
</div>

从视觉上看，它工作得很好，但根据 W3C 验证器，它应该在外面。

如何让图片标签的 div.caption 脱颖而出？此外，这是从方法输出 HTML 的好方法吗？

application_helper.rb：

def picture(file, alt)
    @html =   "<picture>" + 
                "<!--[if IE 9]><video style='display: none;''><![endif]-->" + 
                "<source media='(min-width: 0px)' sizes='1280px' srcset='" + file.url + " 1280w'>" + 
                "<!--[if IE 9]></video><![endif]-->" + 
                "<img src='" + file.url + "' alt='" + alt + "'>"
              "</picture>"
    @html.html_safe
end

custom_redcarpet.rb：

require 'redcarpet'

class CustomRedcarpet < Redcarpet::Render::HTML
  include ApplicationHelper

  # Custom Image tag like ![id](filename)
  def image(link, title, alt_text)
    # Use alt_text for record id
    # if you don't find anything return nothing: ""
    if Part.exists?(link)
      @part = Part.find(link)
      @file = @part.file
      @caption = @part.description

      @html = "<div class='project-body-image'>" + 
              picture(@file, @caption) + 
              "<div class='caption'>" + @caption + "</div>" + 
              "</div>"
      @html.html_safe
    else
      nil
    end

  end
end
4

1 回答 1

0

您+在此行的末尾缺少：

"<img src='" + file.url + "' alt='" + alt + "'>"

从而呈现未闭合的<picture>标签。但是由于我认为浏览器会自动关闭不完整的标签，这就是为什么您仍然可以<picture></picture>在代码段中看到正确关闭的原因。

“另外，这是从方法中输出 HTML 的好方法吗？”

通常，我content_tag在辅助操作中构建可渲染视图时使用。但是由于您的渲染视图有<!--[if IE 9]>，我会像您一样（使用连接字符串）。我可能做的唯一区别是使用多行字符串<<-EOS，如下所示：

      @html = <<-EOS
<picture>
  <!--[if IE 9]><video style='display: none;''><![endif]-->
  <source media='(min-width: 0px)' sizes='1280px' srcset='#{file.url} 1280w'>
  <!--[if IE 9]></video><![endif]-->
  <img src='#{file.url}' alt='#{alt}'>"
"</picture>"
      @html.html_safe
于 2016-02-09T15:11:45.037 回答