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的进一步了解,也是一个渐进的学习过程。