用 MeteorJS 构建一个基于 CMS 的网站
用 MeteorJS 构建一个基于 CMS 的网站
原文：https://medium.com/hackernoon/meteor-cms-website-tutorial-2e8da489f92f
在本教程中，我将向你展示如何使用 ButterCMS 向 MeteorJS 网站添加 CMS。本教程的完成代码是 Github 上的。
Meteor 是一个使用 Node.js 编写的免费开源 JavaScript web 框架。
ButterCMS 是一个托管的 API 优先的 CMS 和内容 API ，让你使用任何编程语言构建 CMS 驱动的应用。Butter 被称为“ headless cms ”，它类似于 WordPress，只是你可以用自己选择的语言建立网站，并使用 API 插入动态内容。您可以使用您的 Github 帐户登录 ButterCMS。
入门指南
我们将从一个基本的流星网站开始，它使用火焰模板和铁路由器进行路由。如果您愿意，可以换入另一个模板解决方案，如 React。
获取启动器代码并确保其运行:
git clone [https://github.com/buttercms/meteor-cms-website-boilerplate.git](https://github.com/buttercms/meteor-cms-website-boilerplate.git)
cd meteor-cms-website-boilerplate
meteor npm install
meteor如果你是 MeteorJS 的新手，查看一下他们的快速入门指南的介绍。
设置页面模板
我们要做的第一件事是在client/main.js中创建一个基本的页面模板。使用 ButterCMS，您的客户端将能够创建使用该模板的定制页面。
<head>
<title>Meteor Website</title>
</head>
<body>
</body><template name="home">
Hello world!
</template><template name="page">
<h2>{{page.title}}</h2>
<p>{{page.summary}}</p>
{{{page.content}}}
</template>注意，我们在page.content周围使用了三个括号。 Blaze templates 中的三支撑模板标签用于插入原始 HTML。总的来说，yu 在允许原始 HTML 时应该小心，因为它暴露了安全威胁，如跨站脚本。因为我们的页面内容将由我们的客户端生成，并由内容管理系统提供，所以我们可以假设它是安全的。
设置 ButterCMS
现在我们将设置 ButterCMS 以便我们的客户端可以使用这个模板创建和管理页面。
用 Github 登录 Butter，点击侧边栏上的“新工作区”链接。我们将这个工作区称为“自定义页面”。
接下来，我们将创建一个新的内容字段。内容域提供了一个用于编辑 ButterCMS 中内容的表单域，以及一个用于访问和显示网站内容的 API 键。我们将创建一个名为pages的新集合。
在下一个屏幕上，我们将为集合中的项目设置属性。请注意，我们使用了与我们的 Meteor 模板中相同的键。
最后，点击侧边栏中的“自定义页面”链接，创建您的第一个页面。
集成巴特 CMS
我们已经在 ButterCMS 中创建了我们的第一个页面，现在让我们将它显示在我们的网站上！
首先安装 ButterCMS Node.js API 客户端:
meteor npm install buttercms然后创建一个动态路由，从 ButterCMS 获取页面内容，并使用我们之前创建的模板呈现它。
import Butter from 'buttercms';
import './main.html';const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd');Router.route('/', function() {
this.render("Home")
});// Dynamic pages
Router.route('/:slug', function() {
let slug = this.params.slug;
let resp = await butter.content.retrieve(['pages[slug='+slug+']']) // Get first item in returned collection of pages
let page = resp.data.data.pages[0]; this.render('Page', {data: {page: page}});
});浏览到[http://localhost:3000/first-page](http://localhost:3000/first-page)，你应该会看到 ButterCMS 显示的内容。
搜索引擎优化
我们的动态页面工作正常，但是来自搜索引擎和社交网络的爬虫不执行 Javascript，所以我们的博客 SEO 很糟糕。
首先，我们将安装 ms-seo 助手包，并确保我们有好的 HTML 标题和描述。
meteor add check
meteor add manuelschoebel:ms-seoRouter.route('/:slug', function() {
let slug = this.params.slug;
let resp = await butter.content.retrieve(['pages[slug='+slug+']']) // Get first item in returned collection of pages
let page = resp.data.data.pages[0]; SEO.set({
title: page.title,
meta: {
description: page.description
}
});
this.render('Page', {data: {page: page}});
});ms-seo 提供了一个简单的SEO.set方法来配置标签。您可以通过检查 DOM 来验证标签设置是否正确。
最后，我们希望服务器呈现我们的博客，以便搜索引擎和 Twitter 这样的社交网络可以抓取它。
最简单的方法是使用 Meteor 的托管平台 Galaxy ，它提供了集成的预渲染服务(Prerender.io)。Prerender.io 服务作为 Galaxy 的一部分免费提供。
遵循流星的指南部署到星系。要打开内置的 Prerender.io 集成，请添加 Galaxy SEO 包:
meteor add mdg:seo如果你不想使用 Galaxy，可以手动集成 Prerender.io，另一个选择是在你的应用中实现服务器端渲染。在撰写本文时，Meteor 本身并不支持服务器端渲染，但是您可以查看 SSR 支持的 Meteor SSR 或 Flow Router 的 alpha 版本。
包裹
MeteorJS 是一个强大的开发平台，它解决了为 web、移动和桌面构建 Javascript 应用程序的许多难题。然而，没有太多的 CMS 选项可用。
一定要看看 ButterCMS ，这是一个托管的 API 优先 CMS 和内容 API 以及博客引擎，它让你使用任何编程语言来构建 CMS 驱动的应用，包括 Ruby 、 Rails 、 Node.js 、。网、蟒蛇、凤凰、姜戈、反应、角、围棋、 PHP 、拉拉夫、仙丹、流星。
我们希望您喜欢学习如何使用 ButterCMS 在 Meteor 中构建 CMS 驱动的应用程序。如果您有任何问题，请通过 [email protected]或 Twitter 上的或联系我们。
