如何在 express 和 ejs 博客應用程序中呈現 html 標簽？

Question

我正在使用Express 、 EJS和 MongoDB 開發博客應用程序。

在我的posts.js控制器中，我有：

exports.getSinglePost = (req, res) => {
    let id = req.params.id;
    Post.findById(id, function(err, post){
        if(err){
            console.log('Error: ', err);
        } else {
            res.render('singlepost', {
                website_name: 'MEAN Blog',
                post: post
            });
        }
    });
};

singlepost.ejs 視圖具有以下代碼：

<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1><%= post.title %></h1>
            <span class="subheading"><%= post.short_description %></span>
          </div>
        </div>
      </div>
    </div>
  </header>

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <%= post.full_text %>
        </div>
    </div>
</div>

只要posts集合中的條目不包含HTML標簽，它就可以正常工作：

{ "_id" : ObjectId("5e3063dbfa749d9229bab26f"), "title" : "Post One", "short_description" : "Lorem ipsum dolor sit amet.", "full_text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}

但是當它確實包含 HTML 標簽時：

{ "_id" : ObjectId("5e317594fa749d9229bab271"), "title" : "Post One", "short_description" : "Dolor sit amet.", "full_text" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"}

singlepost視圖在瀏覽器中呈現 HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

在 AngularJS 中，使用ng-bind-html可以輕松解決這個問題，但我沒有在這個項目中使用 AngularJS。

那么，我該如何修復EJS 中的這個錯誤？

Answer 1

您使用以下代碼：

Post.findById(id).then(post=> res. render('singlepost', {post:post})). catch (err=>console.log(err));

然后你記錄任何帖子屬性

Answer 2

我通過用<%= post.full_text %> <%- post.full_text %> ( = with - ) 替換<%= post.full_text %>解決了這個問題。

singlepost視圖現在是這樣的：

<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1><%= post.title %></h1>
            <span class="subheading"><%= post.short_description %></span>
          </div>
        </div>
      </div>
    </div>
  </header>

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <%- post.full_text %>
        </div>
    </div>
</div>

Answer 3

<p><%- post._id %></p> 

我認為你可以做這樣的事情而不是你目前正在做的事情。 但是通過直接渲染標簽來做到這一點是不可能的。