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专题

 

猜你喜欢