Node. js blog instance (9) Tag and tag page

Node. js blog instance (9) Tag and tag page

 

Each article has a maximum of three tags (less than three tags can also be). When you click the link on the left-side tab of the home page, you can jump to the tab and list all existing tags. When you click any tag link, go to this tab and list all articles with this label.

First, we can add tags to the article.

Open post. ejs and go
Add:

 

Open index. js and set the following content in app. post ('/Post:

var currentUser = req.session.user,    post = new Post(currentUser.name, req.body.title, req.body.post);

To:

 

Var currentUser = req. session. user,
Tags = [req. body. tag1, req. body. tag2, req. body. tag3],
Post = new Post (currentUser. name, req. body. title, tags, req. body. post );
Open post. js and set:

 

function Post(name, title, post) {  this.name = name;  this.title= title;  this.post = post;}

To:

 

 

function Post(name, title, tags, post) {  this.name = name;  this.title = title;  this.tags = tags;  this.post = post;}

Set:

 

 

var post = {    name: this.name,    time: time,    title: this.title,    post: this.post,    comments: []};

To:

 

 

var post = {    name: this.name,    time: time,    title: this.title,    tags: this.tags,    post: this.post,    comments: []};

Now we can add tags when posting an article. Next, modify index. ejs, user. ejs, and article. ejs to display the article tag.
Modify index. ejs, user. ejs, and article. ejs:

Author: ><%= post. name %> | Date: <%= post. time. minute %>

To:

 

 

Author:> <% = post. name %> | Date: <% = post. time. minute %> | Tag: <% post. tags. forEach (function (tag, index) {%> <% if (tag) {%>><%= tag %><%}%><%}) %>

Finally, add the following style to style.css:

 

 

.tag{background-color:#ff0000;border-radius:3px;font-size:14px;color:#ffffff;display:inline-block;padding:0 5px;margin-bottom:8px;}.tag:hover{text-decoration:none;background-color:#ffffff;color:#000000;-webkit-transition:color .2s linear;}

So far, we have added the tag function to the blog.
Next, we will add tabs to the blog.
Modify header. ejs and add it in the next line of archive:

tags

Modify index. js and add the following code after app. get ('HTTP: // blog.csdn.net/archive:

 

 

App. get ('HTTP: // blog.csdn.net/tags', function (req, res) {Post. getTags (function (err, posts) {if (err) {req. flash ('error', err); return res. redirect ('/');} res. render ('tags', {title: 'tag', posts: posts, user: req. session. user, success: req. flash ('success '). toString (), error: req. flash ('error '). toString ()}) ;}); app. get ('HTTP: // blog.csdn.net/tags/:tag', function (req, res) {Post. getTag (req. params. tag, function (err, posts) {if (err) {req. flash ('error', err); return res. redirect ('/');} res. render ('tag', {title: 'tag: '+ req. params. tag, posts: posts, user: req. session. user, success: req. flash ('success '). toString (), error: req. flash ('error '). toString ()});});});

Open post. js and add:

 

 

// Return all the Post tags. getTags = function (callback) {mongodb. open (function (err, db) {if (err) {return callback (err);} db. collection ('posts', function (err, collection) {if (err) {mongodb. close (); return callback (err);} // distinct is used to find all different collection values of the given key. distinct (tags, function (err, docs) {mongodb. close (); if (err) {return callback (err) ;}callback (null, docs );});});});}; // return all posts containing specific tags. getTag = function (tag, callback) {mongodb. open (function (err, db) {if (err) {return callback (err);} db. collection ('posts', function (err, collection) {if (err) {mongodb. close (); return callback (err);} // query all documents containing tags in the tags array // return an array collection consisting of name, time, and title. find ({tags: tag}, {name: 1, time: 1, title: 1 }). sort ({time:-1 }). toArray (function (err, docs) {mongodb. close (); if (err) {return callback (err) ;}callback (null, docs );});});});};

Note: here we use distinct (for details, see the mongodb authoritative guide) to return all the different tags key values, because sometimes the tags we post are the same, this avoids duplicate tags.
Create tags. ejs in the blog/views/folder and add the following code:

<%- include header %><% posts.forEach(function (tag, index) { %>  ><%= tag %><% }) %><%- include footer %>

Create tag. ejs in the blog/views/folder and add the following code:

<%- include header %>

• <% Var lastYear = 0%> <% posts. forEach (function (post, index) {%> <% if (lastYear! = Post. time. year) {%>
• <% = Post. time. year %>
• <% LastYear = post. time. year} %>
• <% = Post. time. day %>
• /<% = Post. time. day %>/<% = post. title %> <% = post. title %>
• <%}) %>

<%-Include footer %> to ensure consistency with post. ejs. Modify edit. ejs:

<%- include header %>

<%-Include footer %> check the effect. The tag module is correct on the Publishing Page.

 

Let's publish several articles to test it.

Click the tag on the left to display all the tags. Click one of the tags to list all the articles containing the tag:

Click t1