基本问题：引导模板显示错误 Grails 3答案

【问题标题】：Basic problems: Bootstrap templates displayed wrong Grails 3基本问题：引导模板显示错误 Grails 3
【发布时间】：2017-02-23 17:20:12
【问题描述】：

总的来说，我对 Grails/Bootstrap/HTML 和网络编程很陌生。我不是 IT 专家，但我必须为一个研究项目实施一个小型监控网站。我很确定我的问题有一个简单的解决方案 - 如果有人可以帮助我，我将不胜感激！

我正在使用带有 Grails 3 的 IntelliJ，并且我正在尝试将 Start Bootstrap 中的 SB Admin2 Bootstrap 模板集成到我的项目中。

我的问题是，该网站没有按应有的方式显示。首先，我尝试遵循本教程http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/，但它对我不起作用——不知道我在哪里失败了。然后我只是将 index.html 内容复制到我的 gsp 文件中。首先只显示文本，然后我按照这篇文章Bootstrap template not getting displayed 的答案添加了一个指向 BootstrapCDN 的链接 - 它有效..但不正确。 Screenshot

现在我的布局 gsp 文件的头部如下所示：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 -Bootstrap Admin Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

希望有人可以帮助我！提前谢谢！

edit1：如果我在 html 文件中使用 IntelliJ 预览，它会完美运行。

【问题讨论】：

This 是我要使用的模板。
您是否检查过您的控制台是否有任何类似 404 的错误？
它需要引导 css 链接和其他不加载的 css。
@Shahil 我没有错误。你能解释一下你的第二条评论吗？谢谢！！
当您从外部使用引导程序时，它可以正常加载。我不确定您的其他 css 参考链接是否有效。

标签： html css twitter-bootstrap grails grails-3.0

【解决方案1】：

Grails 3 带有资产管道插件来管理静态资产，最小化它们等等，... 检查its documentation。在您的情况下，您应该将资产移动到相应的资产文件夹（javascript、样式表、图像）到 de assets 文件夹中。

例如，要包含放置在 assets/stylesheets/bootstrap/bootstrap.min.css 中的 css，您必须在 gsp 中包含以下内容：

<asset:stylesheet href="bootstrap/bootstrap.min.css"/>

其他带有 javascript 和 assetsPath 的示例：

<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>

【讨论】：

我将包含所有 css、js 和 html 文件的整个引导模板添加到资产文件中。为此，我在资产文件中创建了一个新文件 - 就像本教程告诉我的那样：grails.asia/…
您是否检查过所有资产都嵌入到 html 中，进入导航调试器？

【解决方案2】：

首先，我看到您在指向 javascript 等的链接中使用了相对路径。

    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

我更喜欢使用绝对的，比如

    <link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">

我在不同的 Grails 应用程序中使用了一些引导布局（在一个应用程序中，甚至是 sb-admin）。让我试着解释一下我的方式（顺便说一句。似乎它与您的第一个链接几乎相同，但另一种描述可能会有所帮助）...：

将index.html复制到views->layout->main.gsp
放置例如g:layoutBody 在 main.gsp 页面的适当位置，并删除对您的应用无用的元素。
```
<div id="page-wrapper">
    <g:layoutBody/>
</div>

```
将 javascripts、图像等复制到 web-app 目录并检查 main.gsp 布局中的引用，它们通过
引用了 javascripts 等
```
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
```

之后，您的视图可能如下所示：

<%@ page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
    </head>
    <body>
        <g:if test="${session.user.admin}">
            <div class="row">
                <g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
            </div>
        </g:if>
        <g:render template="/flash_message" bean="${flash}" />

        <div class="row">
            <h1><g:message code="default.list.label" args="[entityName]" /></h1>
            <hr>
        </div>

【讨论】：

感谢您的详细描述。不幸的是，我仍然无法让它工作。我第一次做任务。不知道我应该如何处理第三个任务。我将 startbootstrap 文件添加到名为“jarvis”的文件中，就像我发布的教程所说的那样。结果几乎相同。引导程序不起作用。如果我使用 <script src="<a%20href=" https: rel="nofollow" target="_blank">maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/…> </script>


    
        
        
            
                
                啊.. 没有完成我的评论，抱歉。将链接添加到 bootstrapCDN 可以像以前一样启用引导程序，但它看起来仍然不像它应该的那样。我必须将 CSS 或 JS 文件移动到另一个目录吗？很抱歉缺乏基础知识！
                
              
                
            
        
    
    
        
        
            
                
                您的代码某处是否有公共存储库，或者您可以创建一个 - 可能有一个缩短/剥离的版本，我可以看看它？
                
              
                
            
        
    
    
        
        
            
                
                github.com/Jonas1234567/SB_Admin.git 这是一个简短的版本，我只是尝试在我的原始项目中尝试集成引导程序。如果你能看一下就好了:)
                
              
                
            
        
    
    
        
        
            
                
                运行起来了。 web-app 目录在 grails3 中消失了，因此我必须使用 src/main/resources/public 目录。应该可以使用资产逻辑，但这是我目前不知道的。希望它有点帮助。我为你的仓库创建了一个拉取请求。