第十二章 增加头像

现在我们来添加用户头像，注册的用户根据注册时的邮箱获取 gravatar 头像，未注册的用户则根据留言填的邮箱获取 gravatar 头像。
什么是 gravatar ？详情请戳：http://www.gravatar.com

我们需要用到 Node.js 中的 crypto 模块，之前已经引入过，所以这里可以直接使用。

添加已注册用户的头像

打开 index.js ，将 app.post('/post') 中的

var currentUser = req.session.user,
    tags = [{"tag":req.body.tag1},{"tag":req.body.tag2},{"tag":req.body.tag3}],
    post = new Post(currentUser.name, req.body.title, tags, req.body.post);

修改成：

var currentUser = req.session.user,
    tags = [{"tag":req.body.tag1},{"tag":req.body.tag2},{"tag":req.body.tag3}];
var md5 = crypto.createHash('md5'),
    email_MD5 = md5.update(currentUser.email.toLowerCase()).digest('hex'),
    head = "http://www.gravatar.com/avatar/" + email_MD5 + "?s=48",
    post = new Post(currentUser.name, head, req.body.title, tags, req.body.post);

注意：需要把 currentUser.email 转化成小写再编码。

修改 post.js ，将

function Post(name, title, tags, post) {
  this.name = name;
  this.title = title;
  this.tags = tags;
  this.post = post;
}

修改为：

function Post(name, head, title, tags, post) {
  this.name = name;
  this.head = head;
  this.title = title;
  this.tags = tags;
  this.post = post;
}

将

var post = {
    name: this.name,
    time: time,
    title:this.title,
    tags: this.tags,
    post: this.post,
    comments: [],
    pv: 0
};

修改为：

var post = {
    name: this.name,
    head: this.head,
    time: time,
    title:this.title,
    tags: this.tags,
    post: this.post,
    comments: [],
    pv: 0
};

最后，修改 index.ejs 和 user.ejs ，在 </h2> 后添加一行代码：

<a href="/u/<%= post.name %>"><img src="<%= post.head %>" class="r_head" /></a>

至此，我们实现了给已注册的用户添加头像。

添加未注册用户的头像

修改 app.post('/u/:name/:day/:title') 如下：

app.post('/u/:name/:day/:title', function(req,res){
  var date = new Date(),
      time = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
  var md5 = crypto.createHash('md5'),
      email_MD5 = md5.update(req.body.email.toLowerCase()).digest('hex'),
      head = "http://www.gravatar.com/avatar/" + email_MD5 + "?s=48"; 
  var comment = {"name":req.body.name, "head":head, "email":req.body.email, "website":req.body.website, "time":time, "content":req.body.content};
  var newComment = new Comment(req.params.name, req.params.day, req.params.title, comment);
  newComment.save(function(err){
    if(err){
      req.flash('error',err); 
      return res.redirect('/');
    }
    req.flash('success', '评论成功!');
    res.redirect('back');
  });
});

打开 comment.ejs ，将

<% post.comments.forEach(function(comment, index){ %>
  <p><a href="<%= comment.website %>"><%= comment.name %></a>
  <span class="info"> 回复于 <%= comment.time %></span></p>
  <p><%- comment.content %></p>
<% }) %>

修改为：

<% post.comments.forEach(function(comment, index){ %>
<div style="padding-left:4em">
  <p><img src="<%= comment.head %>" class="l_head" /><a href="<%= comment.website %>"><%= comment.name %></a>
  <span class="info"> 回复于 <%= comment.time %></span></p>
  <p><%- comment.content %></p>
</div>
<% }) %>

最后，在 header.ejs 中添加两行样式：

.l_head{float:left;margin-left:-4em;box-shadow:0px 1px 4px #888;}
.r_head{float:right;margin-top:-2.5em;box-shadow:0px 1px 4px #888;}

现在，我们给博客添加了头像显示的功能。