Question

我有Post有文件附件，通过Carrierwave。

在我看来，根据附件的类型，我想要显示一个不同的图标。

所以这就是我想出来的，现在效果很好，但是非常不合适而且不干。

如何简化这个并使其更多Rails-y？

<% if post.file? %>
    <% if post.file.file.extension.downcase =~ /mp3|wav/ %>
        <i class="fa fa-file-audio-o"></i>
    <% elsif post.file.file.extension.downcase =~ /pdf/ %>
        <i class="fa fa-file-pdf-o"></i>
    <% elsif post.file.file.extension.downcase =~ /txt/ %>
        <i class="fa fa-file-text-o"></i>
    <% elsif post.file.file.extension.downcase =~ /doc|docx/ %>
        <i class="fa fa-file-word-o"></i>
    <% elsif post.file.file.extension.downcase =~ /xls|xlsx/ %>
        <i class="fa fa-file-excel-o"></i>
    <% elsif post.file.file.extension.downcase =~ /ppt|pptx/ %>
        <i class="fa fa-file-powerpoint-o"></i>
    <% elsif post.file.file.extension.downcase =~ /mp4|m4v|mov|avi|mkv/ %>
        <i class="fa fa-file-video-o"></i>
    <% end %>
<% end %>

修改1

我还希望能够轻松检测扩展名是什么类型的文件，然后对其执行某些操作。此图标版本只是一个应用程序。

另一个例子是我的分享按钮。根据附加的文件类型，我想添加共享标题中包含的文件的名称。例如：

如果没有这个逻辑，我的Twitter分享图标看起来就像这样：

  <a class="btn btn-twitter" href='http://twitter.com/home?status=<%=u "#{post.title} - Read more at #{post_url(post)}" %>' title="Share on Twitter" target="_blank">
    <i class="fa fa-twitter"></i>
  </a>

用逻辑：

<% if post.file? %> 
  <a class="btn btn-twitter" href='http://twitter.com/home?status=<%=u "#{post.title} (#{post.file.file.extension.upcase} Included) - Read more at #{post_url(post)}" %>' title="Share on Twitter" target="_blank">
    <i class="fa fa-twitter"></i>
  </a>
<% end %>

是否有更优雅的Railsy方法来解决这个问题？

修改2

使用@ blelump的精彩，优雅的解决方案 - 我喜欢 - 我正在尝试这个：

<i class='fa attached-<%= post.file.file.extension.downcase %>'></i>

在我的post.css.scss中，我有这些规则：

.attached-mp3, .attached-wav {
    @extend .fa-file-audio-o;
}

.attached-pdf {
  @extend .fa-file-pdf-o;
}

.attached-txt {
    @extend .fa-file-text-o;
}

问题是，由此产生的HTML是：

<i class="fa attached-txt"></i>

它似乎没有调用@extend .fa-file-text-o。

我该如何解决这个问题？

编辑3

这就是我的post.css.scss关注@ blelump的建议：

.field_report{
  width: 100%;
}

.field_report #report_box{
  width: 100%;
  height: 250px;
}

.attached-mp3, .attached-wav {
    @extend .fa-file-audio-o;
}

.attached-pdf {
  @extend .fa-file-pdf-o;
}

.attached-txt {
    @extend .fa-file-text-o;
}

.attached-doc, .attached-docx {
    @extend .fa-file-word-o;
}

.attached-xls, .attached-xlsx {
    @extend .fa-file-excel-o;
}

.attached-ppt, .attached-pptx {
    @extend .fa-file-powerpoint-o;
}

.attached-mp4, .attached-m4v, .attached-mov, .attached-mkv, .attached-avi {
    @extend .fa-file-video-o;
}

Answer 1

你可能正在使用LESS或SASS，所以CSS会在这里拯救你。对于SASS，例如

.whatever-pdf {
  @extend .fa-file-pdf-o;
}

由于您使用的是FontAwesome图标，因此请确保在包含.scss调用的@import FontAwesome内声明这些类。在您的情况下，它似乎是bootstrap_and_overrides.css.scss。

然后，在您的视图中，它汇总到：

<i class="fa whatever-#{post.file.file.extension.downcase}"></i>

就是这样。

编辑1：

EN语言环境的示例：

# config/locales/en.yml:
en:
  posts: 
    file_has_been_included: "(your %{file} has been included)"
  extensions:
    pptx: powerpoint presentation
    # ...

#view:
  <a class="btn btn-twitter" href='http://twitter.com/home?status=<%=u "#{post.title} #{t("posts.file_has_been_included", file: t("extensions.#{post.file.file.extension.downcase}"))} - Read more at #{post_url(post)}" %>' title="Share on Twitter" target="_blank"></a>

Answer 2

你多次写了post.file.file.extension.downcase。您可以在新变量中声明它

filename = post.file.file.extension.downcase

而不是if else语句，你需要在语句

时使用case

<% if post.file? %>
<% case filename %>
<% when filename =~ /mp3|wav/ %>
    <i class="fa fa-file-audio-o"></i>
<% when filename =~ /pdf/ %>
    <i class="fa fa-file-pdf-o"></i>
<% when filename =~ /txt/ %>
    <i class="fa fa-file-text-o"></i>
<% when filename =~ /doc|docx/ %>
    <i class="fa fa-file-word-o"></i>
<% when filename =~ /xls|xlsx/ %>
    <i class="fa fa-file-excel-o"></i>
<% when filename =~ /ppt|pptx/ %>
    <i class="fa fa-file-powerpoint-o"></i>
<% when filename =~ /mp4|m4v|mov|avi|mkv/ %>
    <i class="fa fa-file-video-o"></i>
<% end %>

如何通过关注或帮助或其他方式干掉此视图？

2 个答案: