一個簡單的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系统（九） 增加标签和标签页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。