Keystone.js教程

　　 Keystone.js  是一个基于Node.js的内容管理系统CMS和博客Blog系统，基于Express和 MongoDB，本教程简述如何安装，且如何进行SEO优化和增强社交媒体分享。

1.安装

请注意：安装之前需要Node.js和MongoDB，最好的安装方式是借助yeoman的generator，运行命令：

$ npm install -g generator-keystone
$ mkdir myproject
$ cd myproject
$ yo keystone

在回答所有generator问题以后，运行下面命令：

node keystone (或 npm start)

现在你可登录管理界面： http://localhost:3000/keystone 能够快速创建一篇帖子，，就会在/blog路由目录下发表，它是高度可配置的。管理也方便。

发布一篇博文需要注意几点：

1.美丽易于阅读

2.SEO优化和社交网络分享

2.增强定制

缺省的bootstrap模板是非常简单的，推荐使用一些基于bootstrap的高阶模板，可使用 jade, handlebars 等其他模板引擎，这些在前面产生应用时是可选的。

Keystone.js默认是不会为每个页面定制<title> 和 <meta description>的，但是这对于搜索引擎抓取以及SEO等却非常重要。

在Post模型中增加两个字段：title和description

Post.add({ 

    ... 

    meta: { 
        title: { type: String}, 
        description: { type: String} 

    }, 
    categories: { type: Types.Relationship, ref: 'PostCategory', many: true } 
}); 

注意tiitle保持在70字符而描述是160个字符

如果你使用handlebar作为引擎模板，可修改在default.hbs，下面代码有一段判断，tiitle和description如果没有被事先定义，就是要post.title和post.content.brief,所有指定的目录category都是用作关键字，下面的代码将帮助你的博文有助于搜索引擎引擎收录:

{{#if data.post}}
    {{#if data.post.meta.title}}
        <title >{{data.post.meta.title}}</title > 
        <meta  property ="og:title "  content ="{{data.post.meta.title}} "> 
        <meta  name ="twitter:title "  content ="{{data.post.meta.title}} "> 
    {{else}}
        <title >{{data.post.title}}</title > 
        <meta  property ="og:title "  content ="{{data.post.title}} "> 
        <meta  name ="twitter:title "  content ="{{data.post.title}} "> 

    {{/if}}

    {{#if data.post.meta.description}}
        <meta  name ="description "  content ="{{data.post.meta.description}} "> 
        <meta  property ="og:description "  content ="{{data.post.meta.description}} "> 
        <meta  name ="twitter:description "  content ="{{data.post.meta.description}} "> 

    {{else}}
        <meta  name ="description "  content ="{{data.post.content.brief}} "> 
        <meta  property ="og:description "  content ="{{data.post.content.brief}} "> 
        <meta  name ="twitter:description "  content ="{{data.post.content.brief}} "> 

    {{/if}}
    <meta  property ="og:type "  content ="article "> 
    <meta  name ="twitter:card "  content ="summary_large_image "> 
    <meta  property ="og:image "  content ="{{data.post.image.url}} "> 
    <meta  name ="twitter:image:src "  content ="{{data.post.image.url}} "> 
    <meta  property ="og:url "  content ="{{data.post.fullPostUrl}} "> 
    <meta  name ="twitter:url "  content ="{{data.post.fullPostUrl}} "> 
    <meta  property ="article:published_time "  content ="{{data.post.publishedDate}} "> 

    {{# each data.post.categories}}
        <meta  property ="article:tag "  content ="{{name}} "> 
    {{/each}}
    <meta  name ="keywords "  content ="{{# each data.post.categories}}{{name}}, {{/each}} ">    

{{else}}

    <title >general title</title > 
    <meta  name ="description "  content ="general description ">            
    <meta  property ="og:image "  content ="{{baseUrl}}/images/logo.png "> 
    <meta  name ="twitter:image:src "  content ="{{baseUrl}}/images/logo.png "> 
    <meta  name ="keywords "  content ="Node.js, development, api "> 

{{/if}}     

此外，增加社会媒体分享按钮，我们需要得到博文的baseUrl路径，需要在Post集合中获得

fullPostUrlon ,我们定义这样一个虚拟字段：

//in keystone.js 

keystone.set('baseUrl', (keystone.get('env') == 'production') ? 'https://nodevision.com.au/' : 'http://localhost:3000/'); 

//in routes/middleware.js in initLocals 函数
locals.baseUrl = keystone.get('baseUrl'); 

//in models/Post.js 
Post.schema.virtual('fullPostUrl').get(function() { 
    return keystone.get('baseUrl') + 'blog/post/' + this.slug; 

}); 

我们获得fullPostUrl以后，能够在post.hbs模板中加入下面社交按钮：

<a class="ion-social-twitter" href="https://twitter.com/intent/tweet?text={{data.post.title}}&url={{data.post.fullPostUrl}}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"></a>
<a class="ion-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{data.post.fullPostUrl}}" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"></a>
<a class="ion-social-googleplus" href="https://plus.google.com/share?url={{data.post.fullPostUrl}}" onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;"></a>

此外，我们还可以增加所见即所得编辑器，增加发帖时markdown支持，在modes/Post.js中加入content.markdown:

content: { 
    brief: { type: Types.Html, wysiwyg: true, height: 150 }, 
    extended: { type: Types.Html, wysiwyg: true, height: 400 }, 
    markdown: { type: Types.Markdown, height: 400 } 

}, 

然后在模板文件templates/post.hbs加入：

<div  class ="post "> 
    {{#if data.post.content.markdown.html}}
        {{{data.post.content.markdown.html}}}
    {{else}}
        {{{data.post.content.extended}}}
    {{/if}}
</div >     

总之，通过以上修修改改，能够培养你对Node.js的进一步了解，也是一个渐进的学习过程。

Node.js专题