TLDR;
Cosmic JS为博客提供了出色的后端。 它是功能齐全的内容管理系统(CMS),具有直观的用户界面,非技术客户可以使用该界面来管理其站点内容。
请点击以下链接获取代码和演示:
TL; DR:
介绍
每个博客都需要一个可靠的CMS。 这样一来,内容所有者就可以控制其内容,而不必雇用开发人员来对其网站进行任何单个更改。 许多开发人员在考虑CMS时会立即想到WordPress。 不过,我想建议使用Cosmic JS作为替代方案。 从开发人员的角度进行集成并从客户的角度进行管理非常简单。 在这篇操作方法文章中,我们将把React + Next.js应用程序连接到Cosmic JS,并介绍一些功能。
入门
首先,您需要使用Cosmic JS创建一个免费帐户。 导航到https://cosmicjs.com 。 点击标题中的“创建免费帐户”按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/3a2e980e5bdde213b28e8b42768bf432.png)
然后填写您的信息,或直接单击“使用GitHub注册”。
![](https://i-blog.csdnimg.cn/blog_migrate/a08093f35b2f4118b1cd7a3fcaa2ec0d.png)
使用Cosmic JS创建后端的第一步是创建一个Bucket 。 可以将Bucket视为Objects的容器。 对象是您要存储的任何数据。 对象可以是博客文章,图像,任何类型的元数据或实际上任何类型的任何东西。 我们将在下一节中讨论对象 。 现在,只需知道您需要一个Bucket来保存所有项目数据。 您现在应该位于https://cosmicjs.com/buckets 。 点击“添加新存储桶”。 输入项目名称,然后点击“保存存储桶”。
![](https://i-blog.csdnimg.cn/blog_migrate/2e19f4e23972dee307dd6478c12f110d.png)
仪表板和设置
您现在应该位于https://cosmicjs.com/****/dashboard,****是一个唯一的字符串,用于标识存储桶(也称为slug )。 您网站的所有数据都可以在控制台中进行管理。 我们要做的第一件事是定义一个Object Type 。 对象类型定义数据结构。 在本教程中,我们将定义4种不同的对象类型: Globals , Posts , Authors和Social Links 。 让我们从Posts开始。 Post Objects将保存在我们的网站上显示博客文章所需的所有信息。 点击“添加对象类型”按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/3eb85fa0be4a8e75a6135e51bd60f349.png)
在“唯一名称”字段中键入“发布”。 “复数名称”和“ API端点”字段应自动填充。
![](https://i-blog.csdnimg.cn/blog_migrate/38d980dfe63d8daf7f57ad40f8da7f65.png)
然后点击“ Metafields模板”标签。 点击“添加元字段”。
![](https://i-blog.csdnimg.cn/blog_migrate/8629833f504ceaf380dfd918522fc8f4.png)
选择“图像/文件”。
![](https://i-blog.csdnimg.cn/blog_migrate/6a5d913e67d4c97ee25653140b83c402.png)
在“标题”字段中输入“英雄”。 “密钥”字段应自动填充“英雄”。
![](https://i-blog.csdnimg.cn/blog_migrate/a11eef9b35312624a2cbac19e4ee5d92.png)
让我们再添加一个元字段。 再次单击“添加元字段”。 这次选择“ HTML文本区域”。
![](https://i-blog.csdnimg.cn/blog_migrate/baf8f197523bcd4da97f556b720c34ef.png)
给它起名为“ Teaser”。 然后点击“保存对象类型”。
![](https://i-blog.csdnimg.cn/blog_migrate/e564c63c6acefe5f5cfa8d423d614447.png)
太棒了! 您已经创建了第一个Object Type 。 让我们再做三遍!
- 创建一个对象类型 Author 。 这代表博客作者。 添加一个“图像/文件”元字段,并将其命名为“图像”。
- 创建一个对象类型 Global 。 这就是我们如何存储有关博客的元数据,例如标题,标签和徽标。 不要添加任何元字段。
- 创建一个对象类型 , 社交链接 。 我们将使用它来存储有关外部社交链接的数据。 添加“纯文本输入”元字段并将其称为“网址”。 添加一个“图像/文件”元字段,并将其称为“图标”。
设置几乎完成。 让我们回到Post Object Type ,再添加一个metafield。 我们刚刚定义了另一个对象类型 Author 。 如果我们可以将每个帖子都连接到它的作者 ,那不是很好吗? 再次单击“添加元字段”。 这次选择“单个对象关系”。 在出现的对话框中,为“标题”键入“作者”。 然后选择“按对象类型限制搜索”,然后选择“作者”。 然后点击“保存”。
![](https://i-blog.csdnimg.cn/blog_migrate/9b6daf6dd7aa356e94a303055b990646.png)
安装完成! 您刚刚为项目创建了整个后端。 无需配置数据库或服务器! 🎉
添加一些内容
在继续将Cosmic JS连接到我们的应用程序之前,让我们先添加一些数据。 在仪表板菜单中单击“全局”。 然后点击“添加全局”。
![](https://i-blog.csdnimg.cn/blog_migrate/28acc724c22e60d2bda89042b566730a.png)
在“标题”字段中,键入“标题”。 然后,我们将添加3个元字段。
- 添加“纯文本输入”元字段。 在“标题”中键入“网站标题”,在“值”中键入“我的宇宙博客”。 选中“必需”复选框。
- 添加另一个“纯文本输入”元字段。 在“标题”中输入“网站标签”,在“值”中输入“一个干净,简约,内容优先的由Cosmic JS支持的博客”。
- 添加一个“图像/文件”元字段。 为“标题”键入“站点徽标”,然后从计算机中选择图像。
点击“发布”。
![](https://i-blog.csdnimg.cn/blog_migrate/b03e4559b4410ba113df6284c55f4dca.png)
现在,让我们添加一个Author 。 点击“作者”,然后点击“添加作者”。 输入“标题”的名称。 在“内容”部分为自己添加一个简短的简介。 选择一个图像。 然后点击“发布”。
然后,我们将添加一个Post 。 点击“帖子”,然后点击“添加帖子”。 输入标题,一些内容,预告片,添加英雄图像,然后从作者下拉菜单中选择您的名字。
希望您现在就可以使用仪表板了。 非常直观。
我们要做的最后一件事是添加一些社交链接 。 重复与其他对象类型相同的过程。 添加至少两个社交链接。
内容✔️,让我们写一些代码
现在我们可以看代码了! 克隆,下载或仅在https://github.com/chrisoverstreet/cosmic-blog上签出源代码。
这不是一个React或Next.js教程,所以我只关注/server.js
文件。 Next.js允许您通过在项目的根目录中创建server.js文件来实现自己的服务器。 我们将创建一个快速服务器 。
连接到Cosmic JS后端的最简单方法是使用官方Cosmic JS JavaScript客户端 。 要安装客户端,请在您的终端中键入:
npm i -S cosmicjs
返回server.js ,导入并初始化cosmicjs:
const Cosmic = require ( 'cosmicjs' ); < br > const api = Cosmic();
现在,我们将实现自己的API以连接到Cosmic JS 。 我们这样做是为了在我们的应用程序和数据之间创建一个层。 每当我们想在我们的应用程序中获取数据时,我们都可以使用cosmicjs客户端,但是我们敏感的存储桶数据将暴露给客户端(例如API写入访问密钥)。 返回Cosmic JS仪表板,找到您的铲斗。 在“设置”菜单下,选择“基本设置”。 您的“桶塞”应该可见。 复制它。
![](https://i-blog.csdnimg.cn/blog_migrate/5c741cf347c00d20f0589f2ea0077cbe.png)
返回server.js ,我们将创建我们的API可以使用的存储桶对象。
const bucket = api.bucket({ slug: 5 b7536d0 -59f 8 -11e8 -8958 -e7a8aba9942d });
使用该存储桶对象,我们可以通过以下方式获取并返回数据:
// API endpoint for site metadata (i.e. title, tag, logo)
server.get( '/api/meta' , (req, res) => bucket.getObject({ slug : 'header' })
.then( object => res.send(object))
.catch( err => res.status( 404 ).json({
message : 'Error fetching header data' ,
error : err,
})));
bucket.getObject()
是用于定义对象的段。 您还可以获取对象列表。
// API endpoint for social links
server.get( '/api/social-links' , (req, res) => {
const params = {
type : 'social-links' ,
};
return bucket.getObjects(params)
.then( objects => res.send(objects))
.catch( err => res.status( 404 ).json({
message : 'Error fetching social links' ,
error : err,
}));
});
这是完整的server.js代码:
/* eslint-disable no-console */
require ( 'dotenv' ).config({ path : './.env.production' });
const express = require ( 'express' );
const next = require ( 'next' );
const routes = require ( './routes' );
const Cosmic = require ( 'cosmicjs' );
const port = parseInt (process.env.PORT, 10 ) || 3000 ;
const dev = process.env.NODE_ENV !== 'production' ;
const app = next({ dev });
const handler = routes.getRequestHandler(app);
const api = Cosmic();
const bucket = api.bucket({ slug : process.env.BUCKET_SLUG });
app.prepare()
.then( () => {
const server = express();
// API endpoint for site metadata (i.e. title, tag, logo)
server.get( '/api/meta' , (req, res) => bucket.getObject({ slug : 'header' })
.then( object => res.send(object))
.catch( err => res.status( 404 ).json({
message : 'Error fetching header data' ,
error : err,
})));
// API endpoint for social links
server.get( '/api/social-links' , (req, res) => {
const params = {
type : 'social-links' ,
};
return bucket.getObjects(params)
.then( objects => res.send(objects))
.catch( err => res.status( 404 ).json({
message : 'Error fetching social links' ,
error : err,
}));
});
// API endpoint for a list of posts (by page)
server.get( '/api/posts/page/:page' , (req, res) => {
const validatedPage = ! Number .isNaN(req.params.page) && parseInt (req.params.page, 10 ) >= 0
? parseInt (req.params.page, 10 )
: 1 ;
const postsPerPage = 10 ;
const params = {
limit : postsPerPage,
skip : (validatedPage - 1 ) * postsPerPage,
sort : '+created_at' ,
status : 'published' ,
type : 'posts' ,
};
return bucket.getObjects(params)
.then( objects => res.send(objects))
.catch( err => res.status( 404 ).json({
message : `Error fetching posts for page ${validatedPage} ` ,
error : err,
}));
});
// API endpoint for an individual post
server.get( '/api/post/:slug' , (req, res) => bucket.getObject({ slug : req.params.slug })
.then( object => res.send(object))
.catch( err => res.status( 404 ).json({
message : `Error fetching post with slug, ${req.params.slug} ` ,
error : err,
})));
// Our regular NextJS pages
server.get( '*' , (req, res) => handler(req, res));
server
.listen(port, (err) => {
if (err) throw err;
console .log( `> Ready on http://localhost: ${port} ` );
});
});
现在我们可以在应用程序内点击API端点以检索我们的数据。 例如,要检索单个帖子,我们可以使用以下代码:
const fetchPost = slug => fetch( ` ${API_URL} /post/ ${slug} ` )
.then( res => res.json())
.then( json => console .log(json));
就这么简单!
奥托罗
这只是将Cosmic JS与React + Next.js结合使用的简要概述 。 如果您像我一样,最好的学习方法是直接尝试并尝试一些东西。 我邀请您下载该项目的源代码并进行修改。 Cosmic JS提供的功能远远超过本文中提到的内容。 在“开发人员”标签下查看其网站上的文章和其他信息。
谢谢阅读! 编码愉快!
本文最初以Cosmic JS文章的形式出现。
From: https://hackernoon.com/powering-a-react-next-js-blog-with-cosmic-js-bc182b2b2c94