繁体   English   中英

Ejs 部分页眉和页脚文件在一个文件中工作,而不在另一个文件中工作(同一目录级别)

[英]Ejs partial header and footer file working in one file and not the other (same directory level)

我目前正在为网站主页上的帖子设置查看页面。 主页和视图页面都使用相同的页眉和页脚文件。 它们都在同一目录级别。 一个正在工作,另一个没有。 显示的错误似乎与页眉和页脚文件中的脚本和链接标签有关。

错误类型:(自定义脚本和链接也会抛出这些错误)

5ab70c4e84fa1b212efa0145:5 获取http://localhost:5000/home/scripts/lib/jquery-3.3.1.min.js网络::ERR_ABORTED 5ab70c4e84fa1b212efa0145:1

拒绝从' http://localhost:5000/home/scripts/lib/jquery-3.3.1.min.js '执行脚本,因为它的MIME类型('text/html')是不可执行的,并且严格的MIME类型检查已启用。

5ab70c4e84fa1b212efa0145:1 拒绝应用来自“ http://localhost:5000/home/stylesheets/main.css ”的样式,因为它的 MIME 类型(“text/html”)不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查.

我的页眉和页脚部分如下:

标题:

<!DOCTYPE>
<html>
    <head>

        <script type="text/javascript" src="scripts/lib/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="scripts/lib/bootstrap.min.js"></script>
        <link type="text/css" rel="stylesheet" href="stylesheets/bootstrap.min.css">

        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

        <link type="text/css" rel="stylesheet" href="stylesheets/main.css">

    </head>
    <body>
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                  <a class="navbar-brand" href="/"><i class="far fa-heart"></i> The Beanie Boo Network</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                  <form class="navbar-form navbar-left">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                    <% if(!currentUser){ %>
                        <li><a href="/login">Login</a></li>
                        <li><a href="/register">Register</a></li>
                    <% } else { %>
                        <li><a href="#"><%=currentUser.username%></a></li>
                        <li><a href="/logout">Logout</a></li>
                    <% } %>    
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>

        <div class="container">

页脚:

</div>
    <script type="text/javascript" src="scripts/main.js"></script>
    </body>
</html>

它的工作文件:(完整)

<% include ../partials/header %>

    <header class="jumbotron">
        <div>
            <h1>Beanie Booboard</h1>
            <h4>Keep up to date with whats going on on The Beanie Boo Network</h4>
        </div>
    </header>

    <% posts.forEach(function(post){ %>
        <div class="thumbnail">
            <div class="row">
                <div class="caption col-sm-6">
                    <div class="container">
                        <h2><%=post.title%></h2>
                        <p><%=post.content.substring(0, 50)%>...</p>
                        <p><em><%=post.author%></em></p>
                        <p><%=post.created.toDateString()%></p>
                        <a href="/home/<%=post._id%>"class="btn btn-xs btn-danger">Read More</a>
                    </div>
                </div>
                <div class="thumbnail-img col-sm-6">
                    <img class="img-responsive" src="<%=post.image%>">
                </div>
            </div>
        </div>
    <% }); %>

<% include ../partials/footer %>

文件它不起作用:(完整)

<% include ../partials/header %>


<% include ../partials/footer %>

我试图弄清楚和理解的是为什么一个文件会抛出错误而另一个文件不会,我怎样才能在将来避免这个错误,如果它出现了,并修复它?

尝试使用 <%- include(“partials/header”); -%> 用于页眉和 <%- include(“partials/footer”); -%> 用于页脚

解决方案:

该解决方案很奇怪,因为它没有解释为什么它在一页而不是另一页中工作。 但我稍微更改了脚本和链接标签。 我从页眉和页脚文件中的链接和脚本标签中删除了类型属性,并在文件路径前添加了“/”。 已经在工作的那个没有任何变化,但是现在没有工作的那个可以工作。

如果有人对内部运作有任何想法,我将非常感激和解释。 谢谢。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM