1.现在,我们来给博客添加标签和标签页面。
假定每篇文章最多只有两个标签,当单机主页左侧标签页链接的时候,跳转到标签页并且列出所有已经有的标签,当单击任意一个标签链接时,跳转到该标签页并列出所有含有该标签的所有文章。
1.1 添加标签
首先我们来给文章添加标签的功能。打开post.ejs,添加如下代码:
<div class="form-group"> <label class="control-label">标签:</label> <input type="text" name="tag1" class="form-inline" /> <input type="text" name="tag2" class="form-inline"/> </div>
然后,打开index.js,修改如下地方,如下所示:
router.post('/post', checkLogin); router.post('/post', function(req, res) { var currentUser = req.session.user, tags = [req.body.tag1, req.body.tag2], post = new Post(currentUser.name, req.body.title, tags, req.body.post); post.save(function(err) { if(err) { req.flash('error', err); return res.redirect('/'); } req.flash('success', '发布成功!'); res.redirect('/'); //发表成功即跳转到首页 }); });
打开post.js,修改代码如下所示:
function Post(name, title, tags, post) { this.name = name; this.title = title; this.tags = tags; this.post = post; } var post = { name: this.name, time: time, title: this.title, post: this.post, tags: this.tags, comments: [] };
然后,index.ejs、user.ejs和article.ejs,增加代码如下所示:
标签: <% post.tags.forEach(function (tag, index) { %> <% if (tag) { %> <a class="tag" href="/tags/<%= tag %>"><%= tag %></a> <% } %> <% }) %> </p>
最后,我们打开style.css,添加如下代码:
.tag{ background-color:#f0c; border-radius:3px; font-size:14px; color:#fff; display:inline-block; padding:0 5px; margin-bottom:8px; } .tag:hover{ text-decoration:none; background-color:#ccc; color:#000; -webkit-transition:color .2s linear; }
1.2 添加标签页
首先,我们修改header.ejs,增加一行代码如下所示:
<li><a href="/tags" title='标签'>标签</a></li>
然后,修改post.js,增加的代码如下所示:
//返回所有标签 Post.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 用来找出给定键的所有不同值 collection.distinct("tags", function (err, docs) { mongodb.close(); if (err) { return callback(err); } callback(null, docs); }); }); }); };
然后,打开index.js,增加的代码如下所示:
//标签页面路由 router.get('/tags', function (req, res) { Post.getTags(function (err, posts) { if (err) { req.flash('error', err); return res.redirect('/'); } res.render('tags', { title: '标签', posts: posts, user: req.session.user, success: req.flash('success').toString(), error: req.flash('error').toString() }); }); });
最后,我们在views文件夹下面新建tags.ejs,添加的代码如下所示:
<%- include common/header %>
<div class='container'>
<h2>标签页</h2>
<hr/>
<% posts.forEach(function (tag, index) { %>
<a class="tag" href="/tags/<%= tag %>"><%= tag %></a>
<% }) %>
</div>
<%- include common/footer %>
1.3 添加特定标签的页面
首先,修改post.js,增加的代码如下所示:
//返回含有特定标签的所有文章 Post.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); } //查询所有 tags 数组内包含 tag 的文档 //并返回只含有 name、time、title 组成的数组 collection.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); }); }); }); };
然后,我们修改index.js,增加的代码如下所示:
//详细标签页页面路由 router.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() }); }); });
然后,我们在views文件夹下新建tag.js,添加如下所示的代码:
<%- include common/header %> <div class='container'> <ul class="list-group"> <% var lastYear = 0 %> <% posts.forEach(function (post, index) { %> <% if (lastYear != post.time.year) { %> <li class="list-group-item"><%= post.time.year %></li> <% lastYear = post.time.year } %> <li class="list-group-item list-group-item-info"><%= post.time.day %></li> <li class="list-group-item"> <span class="badge"><%= post.name %></span> <a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>" style="color: purple;"><%= post.title %></a> </li> <% }) %> </ul> </div> <%- include common/footer %>
最后,不能忘了edit.ejs,为了保持和post.ejs一直,我们增加其中的代码为:
<div class="form-group"> <label for="name" class="control-label">标签:</label>
//这里我们假设编辑时不能编辑文章的标题和标签 <input type="text" name="tag1" class="form-inline" value="<%= post.tags[0] %>" disabled="disabled"/> <input type="text" name="tag2" class="form-inline" value="<%= post.tags[1] %>" disabled="disabled"/> </div>
至此,我们的增加了标签和标签页的功能