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

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

Original tutorial.

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 add the following after <input type = "text" name = "title"/> <br/>:

<input type="text" name="tag1" /><input type="text" name="tag2" /><input type="text" name="tag3" /><br />

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:

<P class = "info"> author: <a href = "/u/<% = post. name %> "> <% = post. name %> </a> | Date: <% = post. time. minute %> </p>

To:

<P class = "info"> author: <a href = "/u/<% = post. name %> "> <% = post. name %> </a> | Date: <% = post. time. minute %> | Tag: <% post. tags. forEach (function (tag, index) {%> <% if (tag) {%> <a class = "tag" href = "/tags/<% = tag %>"> <% = tag %> </a> <% }%> <% }) %> </p>

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 the following line in <span> <a title = "archive" href = "/archive"> archive </a> </span>:

<Span> <a title = "tag" href = "/tags"> tags </a> </span>

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

App. get ('/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 ('/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) { %>  <a class="tag" href="/tags/<%= tag %>"><%= tag %></a><% }) %><%- include footer %>

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

<%- include header %><ul class="archive"><% var lastYear = 0 %><% posts.forEach(function (post, index) { %>  <% if (lastYear != post.time.year) { %>    <li>To maintain consistency with post. ejs. Modify edit. ejs:


<%-Include header %> <form method = "post"> title: <br/> <input type = "text" name = "title" value = "<% = post. title %> "disabled =" disabled "/> <br/> label: <br/> <input type = "text" name = "tag1" value = "<% = post. tags [0] %> "disabled =" disabled "/> <input type =" text "name =" tag2 "value =" <% = post. tags [1] %> "disabled =" disabled "/> <input type =" text "name =" tag3 "value =" <% = post. tags [2] %> "disabled =" disabled "/> <br/> body: <br/> <textarea name = "post" rows = "20" cols = "100"> <% = post. post %> </textarea> <br/> <input type = "submit" value = "Save changes"/> </form> <%-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










What are the blog tags?
What is a blog tag?
A Tag is a more flexible and interesting log classification method. You can add one or more tags for each log, then you can see all the logs on the tongdu blog that use the same label as you, and more contacts and communications are generated with other users.
What are the benefits of using tags?
1) An article you have added a tag will be directly connected to the webpage with the corresponding tag, so that when a browser accesses the tag, it is possible to access your article, increases the chance of your article being accessed.

2) You can easily find the articles that use the same tag as you and extend your article's horizon. You can also find the authors who use the same tag as you, as like-minded friends, you can add them as friends or friendship blogs to expand your dating range, circle of friends, and broaden your horizons.

3) The method of adding tags is completely determined by you, without any restrictions. You do not need to be restricted by the website system category or your original log category, so that you can easily organize, remember, and search information.

4) We are connected to technoriaty and the world tag system. Your article can be found by foreign friends to a greater extent.

5) You can find the desired content through the tags you are interested in.

6) You can read some tags, find your "Same person" and "friends", share your mood and happiness with your friends, and classify these logs more scientifically.

What is the difference between tags and categories?
The most significant role of a tag is classification in the traditional sense, similar to the category name. The second is to describe the content of the article to a certain extent, similar to keywords.

There are also some minor differences between tags and categories:
1) You can use multiple tags for the same article, but it can only belong to one category;
2) labels are generally added according to the general idea after writing;
3) tags can extract key words from the document, which have the significance of keywords, but are not classified;
4) tags usually reflect your main concerns, such as finance, Internet, and sports;
5) The tag gives us a link to contact others. You can use the tag to find your "Same"

Tags of Sina Blog
It cannot be deleted. The so-called "used tags" are added when you published an article before. If you want to delete them, you can also go to the previous article, delete all the labels in it.