在Play框架中使用Bootstrap图标字体

Question

在Play框架中使用Bootstrap图标字体

twitter-bootstrapplayframeworkplayframework-2.0

10

当我使用<i class="icon-search" />时，Bootstrap会在"assets/img/..."中查找图标。这种行为与Play应用程序的结构相冲突，因为图像位于"assets/images/..."中。

因此，我尝试通过为GET请求定义一个额外的路由来重新映射它到"assets/img"：

# Map static resources from the /public folder to the /assets URL path
GET     /assets/img/*file           controllers.Assets.at(path="/public/images", file)
GET     /assets/*file               controllers.Assets.at(path="/public", file)

但是，这样做会导致编译错误“方法at:（path：String，file：String）play.api.mvc.Call的参数不足。未指定值参数文件。” 在我调用的每个其他公共资产上。

我做错了什么？

- Jürgen Zornig

我认为你正在尝试通过应用程序配置来解决CSS路径问题。难道你不能修复CSS吗？ - isherwood

你不喜欢一个名为"public/template"的目录，其中包含所有引导程序（js+css+img）的内容吗？ - TizianoPiccardi

@Tiziano 当然可以，但是如果目录名为“public/assets/img”（Bootstrap CSS正在寻找的目录）或“public/template”，这有什么不同呢？问题在于Play已经提供了一个文件结构模板来放置我的文件。 - Jürgen Zornig

1

是的，是的，你的解决方案是正确的。我只是建议将整个目录移动到/assets/bootstrap/img以便访问，并将css从/assets/bootstrap/css移动（这样可以在不编辑play路由的情况下工作）。 - TizianoPiccardi

@Tiziano...看来这对我来说太简单了...;) 当然，因为引导路径已经是相对的，所以这应该可以工作，并且也是最简单的解决方案。 - Jürgen Zornig

显示剩余3条评论

3个回答

4

实际上......人们经常将一些初始结构与其必须完全相同混淆。在app文件夹的情况下，这是正确的。Play使用一些隐式导入来处理controllers和models，没有充分理由更改它会带来比它值得的更多麻烦。无论如何，public文件夹在任何默认的action/controller/view中都不会被渲染，因此它的布局可以完全自定义。

(注意：好吧，我必须承认，我没有阅读这份文档，他们写道您应该按照以下方式组织静态资源，以保持所有Play应用程序的一致性。但这是不正确的！ :))

通用规则是：不要破坏放置在public目录中的可用框架、插件等。例如，虽然您可以通过一些额外的路由很容易地修改bootstrap，但如果您尝试对Aloha编辑器做同样的事情，您可能会永久地损坏它。如果您想保持清洁的结构-例如创建一个public/frameworks/bootstrap-current文件夹，并从原始作者那里提取包，这将允许您仅通过简单的解压包更新到更新版本，同时避免头痛。

- biesior

Tiziano在问题评论中已经提到了这一点。我完全同意你的观点，那可能是最好且正确的方式。不知道为什么我一开始没有这样做; )...我接受这个答案和非常好的描述，说明它是最好的方式。 - Jürgen Zornig

2

如果您正在使用Bootstrap LESS，请更改variables.less中的路径：

// Sprite icons path
// -------------------------
@iconSpritePath:          "assets/images/techcore/glyphicons-halflings.png";

- isherwood

好的，我希望不必接触整个LESS和CoffeeScript的事情，因为这对我来说是全新的。虽然我理解它们的优点，但我仍然喜欢我的Web应用程序中有一些静态的东西;) ...好的，让我们看看我是否能学会如何做到这一点，我会尝试一下。 - Jürgen Zornig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jürgen Zornig · Accepted Answer

实际上，描述我的问题帮助我在这里进行搜索;)...stackoverflow已经有了答案。希望我的问题至少能让这个问题更相关，我会自己回答。

根据如何在play框架2.x中使用Twitter Bootstrap 2，我需要为每个单独的glyphicons文件定义静态路由，然后其他资产的请求不会被“错误路由”。

我只需添加以下代码：

# Map Bootstrap images
GET     /assets/img/glyphicons-halflings.png            controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png")
GET       /assets/img/glyphicons-halflings-white.png      controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png")

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

感谢您的建议，我希望能够在不需要特殊修改框架的情况下添加我的路由。

无论如何，还是要再次感谢您。