第8章 增加存档页面

来源:互联网 发布:mac上使用的ios模拟器 编辑:程序博客网 时间:2024/04/29 16:33

https://github.com/nswbmw/N-blog/wiki/%E7%AC%AC8%E7%AB%A0--%E5%A2%9E%E5%8A%A0%E5%AD%98%E6%A1%A3%E9%A1%B5%E9%9D%A2

huluoyang edited this page on 25 Nov 2013 · 4 revisions

 Pages 28

  • Home
  • FAQ
  • 番外篇之——使用 _id 查询
  • 番外篇之——使用 Async
  • 番外篇之——使用 Disqus
  • 番外篇之——使用 generic pool
  • 番外篇之——使用 Handlebars
  • 番外篇之——使用 KindEditor
  • 番外篇之——使用 Mongoose
  • 番外篇之——使用 Passport
  • 番外篇之——部署到 Heroku
  • 第10章 增加pv统计和留言统计
  • 第11章 增加文章检索功能
  • 第12章 增加友情链接
  • 第13章 增加404页面
Clone this wiki locally
 Clone in Desktop

现在我们来给博客增加存档功能,当进入存档页时,按年份和日期的降序列出所有的文章。

首先,我们在主页左侧导航中添加存档页(archive)的链接,修改 header.ejs,在 <span><a title="主页" href="/">home</a></span> 下添加一行代码:

<span><a title="存档" href="/archive">archive</a></span>

打开 post.js ,在最后添加以下代码:

//返回所有文章存档信息Post.getArchive = function(callback) {  //打开数据库  mongodb.open(function (err, db) {    if (err) {      return callback(err);    }    //读取 posts 集合    db.collection('posts', function (err, collection) {      if (err) {        mongodb.close();        return callback(err);      }      //返回只包含 name、time、title 属性的文档组成的存档数组      collection.find({}, {        "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 中添加 /archive 的路由规则。打开 index.js ,在app.get('/u/:name') 前添加以下代码:

app.get('/archive', function (req, res) {  Post.getArchive(function (err, posts) {    if (err) {      req.flash('error', err);       return res.redirect('/');    }    res.render('archive', {      title: '存档',      posts: posts,      user: req.session.user,      success: req.flash('success').toString(),      error: req.flash('error').toString()    });  });});

在 views 文件夹下新建 archive.ejs 模版文件,添加如下代码:

<%- include header %><ul class="archive"><% var lastYear = 0 %><% posts.forEach(function (post, index) { %>  <% if (lastYear != post.time.year) { %>    <li><h3><%= post.time.year %></h3></li>  <% lastYear=post.time.year } %>  <li><time><%= post.time.day %></time></li>  <li><a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>"><%= post.title %></a></li><% }) %></ul><%- include footer %>

这里我们通过在模版中设置一个 lastYear 变量判断是否和上次已经显示的年份相同,相同则不再显示年份,不同则显示。

最后,在 style.css 中添加如下样式:

.archive{list-style:none;line-height:28px;}.archive h3{margin:0.5em 0;}.archive time{float:left;font-size:14px;color:#999999;margin-right:1.2em;}

现在,我们增加了文章的存档页面。

0 0
原创粉丝点击