一个简单的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>

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

posted on 2016-03-21 21:46 Yuity 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/yuity/p/5303955.html

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

一个简单的blog系统（四）实现用户页面和文章页面
一个简单的blog系统(四) 实现用户页面和文章页面 1.现在我们来给博客添加用户页面和文章页面. 1.1 所谓用户页面就是当单击某个用户名链接时,跳转到:域名/u/用户名,并且跳出该用户的所有文章. ...
一个简单的blog系统（十一）增加文章检索功能
一个简单的blog系统(十一) 增加文章检索功能 1. 现在,我们就来给博客添加文章检索功能.假定,可以根据关键字魔木查询文章标题,也就是说支持正则表达式,而且字母不会区分大小写. 1.1 首先,我们 ...
一个简单的blog系统（十二）增加友情链接页面
一个简单的blog系统(十二) 增加友情链接页面 1.首先,我们打开header.ejs,在其中添加一行代码,并作出响应修改: <li><a href="/links&qu ...
使用uliweb创建一个简单的blog
1.创建数据库 uliweb的数据库都在models.py文件里面,因此先创建该文件 vim apps/blog/models.py 添加如下两行: #coding=utf-8 from uliweb ...
c语言编写一个简单的答题系统
利用c语言编写一个简单的答题系统. 思路是先设计好题目和答案,再输入自己的答案,利用输入的答案与正确答案对比,从而得出你回答的对错. (一)捆绑题目和答案我们可以利用结构体对一个题目捆绑上一个答案. ...
一个简单的监控系统的设计
一个简单的监控系统的设计 # // // 为了实现上级需要一个监控的需求,设计一个小的监控系统,结构如下图. // 虽然是一个比较简单的功能,但是仍然对代码的结构的关系进行了设计,使其具备良好的可扩展 ...
实现一个简单的栅格系统
实现一个简单的栅格系统关于栅格系统相信大家都用过 Bootstrap (神马!你没用过?这么流行你还不快去试试),栅格系统就是 Bootstrap 的核心,现在许多 UI 库中也增加了对栅格系统的 ...
【Unity3d】教会你如何做一个简单的电梯系统（升降平台）
博主第一次写博客,语言略俗,有不足之处还请指正! 由于自己还处在unity小白阶段,受2d升降平台的影响(后续我也会上传关于2d升降平台的文章),突发奇想如何用3d做一个电梯系统,查阅网上资料后,发现 ...
15.立体几何——几何为一个简单的立体系统，左右测验，视差的深度_3
目录几何为一个简单的立体系统左右测验视差的深度结论几何为一个简单的立体系统我们要做的是,对一个非常简单的立体系统,逐步进行几何变换.我们要做的第一件事,是假设光轴是平行的.就是这些(如图 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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