一个简单的blog系统（九） 增加标签和标签页面

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>

至此，我们的增加了标签和标签页的功能