Question

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

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

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

像：

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

视觉上它可以作为www.ellell，但根据W3C验证器它应该出去。

如何获取picture-tag的div.caption oustide？另外，这是从方法输出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

Answer 1

您在此行末尾缺少+：

"<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

Rails将元素插入HTML-Output上的错误位置。错误的语法？

1 个答案: