整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
hi, 大家好, 我是徐小夕,之前和大家分享了很多**「低代码可视化」「和」「前端工程化」「相关的话题, 今天继续和大家聊聊」「CMS」**系统.
?
内容管理系统 (「「CMS」」) 使没有强大技术背景的人也能够轻松发布内容。我们可以使用 「「CMS」」 来管理我们的内容和交付。市面上有不同类型的 「「CMS」」，它们执行不同的目的并具有不同的功能。
在本文中，我将和大家分享一下 「「2022」」 年使用的一些最佳 「「Node.js CMS」」，希望可以作为我们选择最佳 「「CMS」」 的指南。
内容管理系统是一种软件应用程序，它提供图形用户界面，其中包含我们可以用来创建、更新、管理和发布内容的工具。
内容存储在数据库中，并通过 CMS 提供的展示层或前端层（通常以网站模板的形式）显示给目标受众。
有不同类型的 「「CMS」」，但最常见的如下：
传统的 「「CMS」」 是一个整体且紧密耦合的系统。对于传统的 「「CMS」」，内容和前端层或“头部”紧密相连。传统的 「「CMS」」 提供了显示内容的前端层。
传统 「「CMS」」 的入门门槛较低。它提供模板、拖放界面和所见即所得编辑器，使非开发人员无需编程或技术知识即可创建网站。
「「Headless CMS」」 是仅后端且 「「API」」 优先的内容交付系统。它没有传统 「「CMS」」 的限制。
与传统的 「「CMS」」 不同，无头 「「CMS」」 不提供展示层。相反，它充当我们内容的基于云的存储。内容与前端展示解耦。
开发人员通过 「「CMS」」 提供的 「「API」」（无论是 「「REST」」 还是 「「GraphQL」」）访问他们需要向用户显示的内容。
由于基于 「「API」」，开发人员可以自由选择他们喜欢使用的工具、编程语言和框架。
混合 「「CMS」」 融合了传统和无头 「「CMS」」 体验。它为开发人员和营销人员提供了两全其美的优势。
它是无头 「「CMS」」 的 「「API」」 优先方法与传统 「「CMS」」 的模板系统的组合。
混合 「「CMS」」 为市场和内容编写者提供了传统 「「CMS」」 熟悉的界面和体验，并为开发人员提供了跨多个渠道交付内容所需的 「「API」」 访问权限。
「「Node.js CMS」」 是用 「「Node.js」」 构建的 「「CMS」」；然而，这并不意味着开发人员只能使用 「「Node.js」」。
接下来就来介绍一下 「「2022」」 年比较活跃的 「「CMS」」。
「「Strapi」」 是一种流行、灵活且开源的无头 「「CMS」」，使我们能够创建丰富的数字体验。「「Strapi」」 提供了 「「REST」」 和 「「GraphQL API」」，开发人员可以使用这些 「「API」」 来访问存储在其存储库中的内容。
我们可以通过其可调整的设置和管理面板自定义 「「Strapi」」 以满足我们的需求。我们还可以通过安装社区开发的插件来扩展 「「Strapi」」 的功能。
「「Strapi」」 支持多种数据库，例如 「「MongoDB」」、「「SQLite」」、「「MySQL PostgreSQL」」 和 「「MariaDB」」。
「「Strapi」」 提供永久免费的社区计划和其他基于用户需求的付费定价选项。
特点:
网址: https://strapi.io/
「「Ghost」」 是一个强大的发布平台，受到世界领先的作家、创作者和专业内容团队的信赖。
「「Ghost」」 专注于为出版商、企业家和开发人员简化在线发布流程。简而言之，「「Ghost」」 使博客和发布 「「Web」」 内容变得简单。
我们可以在使用 「「Ghost」」 时保持高效，因为它为专业人士日常使用的常用工具提供了集成。
「「Ghost」」 提供了一个 「「REST API」」，开发人员可以使用它来检索 「「CMS」」 数据并将其显示给目标受众。
它首先是一个开源软件，因此我们可以免费克隆存储库并将实例部署到我们的服务器上。但是，「「Ghost」」 提供不同的付费计划，其基本计划为每月 9 美元。
特点
网址: https://ghost.org/
「「Sanity」」 的用途远不止传统的 「「Web」」 体验。从投资组合和公司网站到电子商务应用程序，「「Sanity」」 的应用无处不在。
「「Sanity」」 提供了一个 「「GraphQL API」」，开发人员可以使用它来访问存储在其存储库中的内容。
「「Sanity」」 提供了广泛的插件和第三方集成，我们可以用来定制我们的工作场所并扩展其功能。它提供免费套餐并有其他定价选项。
特点
网址: https://www.sanity.io/
「「ButterCMS」」 是一个 「「API」」 驱动的 「「CMS」」 和博客引擎，用于快速网站开发，可满足开发人员和营销人员的需求。
作为 「「API」」 驱动的 「「CMS」」，它对开发人员友好。但是，凭借内置 「「SEO」」、预览、修订历史记录和日程安排等功能，「「Butter」」 使营销人员能够做到最好。
「「Butter」」 将媒体管理提升到一个新的水平。除了存储和优化图像，「「Butter」」 还提供了一个内置的图像编辑器，我们可以使用它来转换、裁剪、调整大小、应用过滤器等等。
「「Butter」」 有一个非商业用途的免费开发者计划。其基本付费计划为每月 83 美元。
特点
网址: https://buttercms.com/
「「Apostrophe CMS」」 称自己为“一个强大且灵活的网站构建平台，适用于数字机构、「「SaaS」」 公司、高等教育、企业等。”
「「Apostrophe」」 是使用 「「Node.js」」、「「Express」」、「「MongoDB」」 和 「「Vue.js」」 等技术构建的。
「「Apostrophe」」 有一个扩展和集成系统，可为 「「SSO」」、表单、营销、「「SEO」」、设计、安全等用例提供各种扩展。它还提供了拖放功能，我们可以利用它来构建网站的前端结构。
特点
网址: https://apostrophecms.com/
「「Prismic」」 是一个用于编辑在线内容的无头 「「CMS」」。我们可以使用 「「Prismic」」 构建从简单、编辑和企业网站到电子商务商店的所有内容。
「「Prismic」」 有一个功能，内容切片，我们可以用它来将我们网站的页面分成不同的部分。我们可以使用内容切片来创建可重用的自定义组件，并为登陆页面、微型网站、案例研究和推荐构建动态布局。
「「Prismic」」 提供了 「「REST」」 和 「「GraphQL API」」，开发人员可以使用这些 「「API」」 来访问存储在其存储库中的内容。它还为 「「C#」」、「「JavaScript」」、「「Ruby」」 和 「「Java」」 等不同的编程语言提供 「「SDK」」。
「「Prismic」」 是一个负担得起的低成本 「「CMS」」，它有一个免费的社区计划。
网址: https://prismic.io/
「「Tina」」 是一个免费且完全开源的无头 「「CMS」」，专为 「「Next.js」」 和 「「Gatsby」」 等基于 「「React」」 的框架构建。它为存储在 「「Markdown」」 和 「「JSON」」 中的内容提供可视化编辑体验。
**「Tina」**支持 「「MDX」」，它使开发人员能够创建动态、交互式和可自定义的内容。
「「Tina」」 提供了一个 「「GraphQL API」」，我们可以使用它来查询和获取我们的内容。还有一个 「「Cloudinary」」 包，我们可以用它来优化和管理我们的媒体文件。
特点
网址: https://tina.io/
「「Keystone」」 是一个开源可编程后端，可让您在几分钟内创建高度定制的 「「CMS」」 和 「「API」」。
我们可以使用 「「Keystone」」 来构建最基本的网站或更复杂的应用程序，例如电子商务商店。
使用 「「Keystone」」，我们为我们的内容描述了一个架构，并为内容获得了一个 「「GraphQL API」」 和漂亮的管理 「「UI」」。
我们可以在 「「Keystone」」 中为我们网站的不同部分创建自定义的可重用组件。
特点 GraphQL API 自定义响应组件 灵活的关系 强大的过滤功能 数据库迁移
网址: https://keystonejs.com/
「「Payload」」 是一个开源、自托管的无头 「「CMS」」，使用 「「Node.js」」、「「Express」」、「「React」」 和 「「MongoDB」」 构建。
「「Payload」」 提供基于配置文件中定义的内容集合自动生成的 「「REST」」 和 「「GraphQL API」」。我们还可以将本地 「「API」」 与服务器端框架（例如 「「Next.js」」）一起使用。
「「Payload」」 带有内置的电子邮件功能。我们可以使用它来处理密码重置、订单确认和其他用例。「「Payload」」 使用 「「Nodemailer」」 来处理电子邮件。
「「Payload」」 有免费计划和其他定价选项。出于开发目的，它是完全免费的，但是一旦我们想要将项目推向生产，即使我们使用免费版本，我们也必须选择可用的许可证之一。
特点
网址: https://payloadcms.com/
「「Directus」」 是用于管理自定义 「「SQL」」 数据库的开源无头 「「CMS」」。**Directus **还有一个直观的管理应用程序，供非技术用户管理内容。
「「Directus」」 提供 「「RESTful」」 和 「「GraphQL API」」 来管理数据库中的数据。
我们可以使用我们选择的数据库，因为 「「Directus」」 支持 「「PostgreSQL」」、「「MySQL」」、「「SQLite」」、「「OracleDB」」、「「MariaDB」」 和 「「MS-SQL」」 数据库。
「「Directus」」 提供自托管的免费计划；还提供付费云计划。核心团队支持仅适用于云管理项目。
特点
网址: https://directus.io/
好啦, 今天的分享就到这啦, 如果文章对你有帮助, 欢迎 「点赞」 + 「评论」, 鼓励作者创造更优质的内容~
更多技术复盘汇总: 趣谈前端
读：Node.js以亲民，容易学习且功能强大而“俘获”很多开发者，特别是基于其上的一些应用框架也不断产生，本文为你总结和推荐 5 款流行且实用的“好东西”。
自打 2009 年以来，Node.js 成为开发者们特别是前端人员热议的话题，还有一部分萌新的后端开发者也都开始使用 Node.js，开发网站和相关应用程序。
从流行榜上来看，在过去几年，它的受欢迎程度确实正在不断提升。
它在北美称为受欢迎的Web开发工具，包括Netflix和PayPal等大型互联网客户。
受欢迎程度上升的原因是加载时间的减少和性能的提高。因此，我们分析 2024 年排名前 5 的 Node.js 后端框架是一件重要的事情。
因此，本文将为各位介绍 2024 年排名前 5 的 Node.js 后端框架、它们的功能和常见用例。
Express.js 是 Node.js 著名的后端框架之一。
它是一个开源 Web 应用程序框架，可供开发者们免费使用，它亦基于 Node.js 平台构建。Express.js 是一个极简框架，新手和经验丰富的 Web 开发人员都能很快入门并实践。
目前它的场景主要用于创建 Web 应用程序与 RESTful API。
是什么让它脱颖而出？我们现在总结如下：
1.高效的路由
Express.js 提供了一种简洁的方法来管理各种 HTTP 请求并将它们分配给特定任务。
让我们来看一个代码例子：
// app.js
const express=require('express');
const app=express();
const port=3000;
// 主页的路由
app.get('/', (req, res)=> {
res.send('欢迎来到主页！');
});
// 路由 2
app.get('/user/:id', (req, res)=> {
const userId=req.params.id;
res.send(用户资料页面 - ID: ${userId} );
});2.中间件支持
Express.js 允许中间件支持处理 HTTP 请求。让我们看一个创建用于记录 HTTP 请求详细信息中间件的简单示例。
const express=require('express');
const app=express();
const port=3000;
app.use((req, res, next)=> {
console.log([${new Date().toLocaleString()}] ${req.method} ${req.url} );
next();
});3. 轻松数据库集成
Express.js 与数据库无关，也就是它不强制使用特定的数据库，开发者们可以选择自己喜欢的数据库。
Express.js 之所以容易集成数据库，主要是因为它的模块化、灵活性还有提供数据库连接和丰富的 npm 包生态系统。
4. 易于学习
Express.js 在业界中以简单和简约的设计而闻名，这使得我们很容易学习，特别是已经熟悉 JavaScript 和 Node.js的同学。
此外，我们还可以使用Bit等工具轻松开始使用 Express.js ，Bit是可组合软件的下一代构建系统。
再仔细考虑，我们会发现 Express.js 本身就是可组合的。你可以在应用程序的任何位置插入和播放组件。
例如，我们可以创建可以在任何给定时间插拔的中间件组件。
图： 使用 Bit 和独立组件设计的 Express API 的Bit Scope
我们可以看到两个组件：授权者和 API 应用。这两个组件已作为独立的 Bit 组件实现，并在其独立空间中进行维护以及版本控制。
通过这样实现，我们可以快速地以可组合的方式设计自己的应用程序！
NestJS 是一个以构建可扩展且高效的 Node.js 服务器端应用程序而闻名的框架。
Nest 使用渐进式 JavaScript，也具有用 TypeScript 编写代码的能力。尽管它完全支持 Typescript，但它可以用纯 JavaScript 编写代码，并包括面向对象编程、函数式编程和函数式反应式编程。
主要特点：
1.模块化
Nest.js 允许将代码分解为单独的可管理模块，从而使其更易于维护。让我们看看下面的模块。
import { Module } from '@nestjs/common';
@Module({
imports: [
CacheModule
],
controllers: [PaymentController],
providers: [PaymentService],
})
export class PaymentModule {}payment module可以导出到其它模块。在此示例中，已导出common模块中的cache module。
由于 nest.js 具有模块结构，也比较易于维护。
2.可扩展
Nest.js 通过将应用程序分解为可管理的模块，支持灵活的组件替换以及通过微服务和异步操作容纳高流量，实现了无缝扩展。
它确保在保持可靠性的同时高效处理增加的工作负载。
3.依赖注入
依赖注入只是向类添加外部依赖项而不是在类本身内创建依赖项的方法。让我们看一个代码例子。
import {
HttpException, Injectable, NotFoundException
} from '@nestjs/common';
@Injectable()
export class PaymentService {
constructor() {}
getReceipt() {
return 'Payment Receipt';
}
}上面我们已经创建payment service并添加了@Injectable()注释以使其可注入。可以按如下所述使用创建的服务。
import { Controller, Get, Post, Body } from '@nestjs/common';
import { PaymentService } from './payment.service';
@Controller('payment')
export class PaymentController {
constructor(private readonly paymentService: PaymentService) {}
@Get()
getPaymentReceipt() {
return this.paymentService.getReceipt();
}
}4. 类型安全
Nest.js 使用 TypeScript 提供类型安全，可用于捕获开发过程中的潜在错误，并提高代码的可维护性。请来看一个代码例子：
export class PaymentDto {
@IsNotEmpty()
@IsEnum(SERVICE_PROVIDER_SLUG, {
message: `Invalid serviceProvider. Valid options are: ${Object.values(SERVICE_PROVIDER_SLUG).join(', ')}`,
})
serviceProvider: string;
@IsNotEmpty()
@IsNumber()
value: number;
@IsNotEmpty()
@IsString()
validityPeriod: string;
@IsNotEmpty()
@IsArray()
@ArrayNotEmpty()
@ValidateNested()
@Type(()=> PaymentAttributesDto)
paymentAttributes: PaymentAttributesDto[]
}在这个例子中，我们创建了一个包含多个参数的 Paymentdto类，并添加了注释来验证参数类型。
举个例子，如果我们向“value”参数发送一个字符串类型值，它将抛出一个异常。
Koa.js 是一个更轻、更小、更具表现力的 Web 框架，也是由 Express.js 团队设计的。它允许我们通过异步函数来抛弃回调并处理错误。
框架特点如下：
1. 上下文对象（ctx）
Koa.js 包含一个名为 ctx 的功能，它用于捕获请求和响应详细信息。此上下文传递给每个中间件。可以从以下示例中看到，从methodctxrequest做对象和方法记录。
const Koa=require('koa');
const app=new Koa();
app.use(async (ctx)=> {
const { method, url, request, response }=ctx;
console.log('Method :' + method + ' Request : ' + request);
});
app.listen(3000);2. 组成中间件
与 Express Js 很是相似，Koa 支持用于处理 HTTP 请求和响应的中间件函数。在下面的示例中，我们创建了一个简单的中间件：
const Koa=require('koa');
const app=new Koa();
app.use(async (ctx, next)=> {
await next();
});
app.listen(3000);3. Async/Await 支持
Koa 使用 async/await 语法以更同步的方式编写异步代码。以下代码示例包含使用 async/await 关键字。
const Koa=require('koa');
const app=new Koa();
app.use(async (ctx)=> {
const data=await fetchData();
ctx.body=Data: ${data} ;
});
app.listen(3000);4.错误处理
Koa.Js 支持各种类型的错误处理。我们可以使用app.emit()或ctx.throw()来处理错误。下面的示例包含了上面的错误处理方法。
const koa=require('koa');
const app=new koa();
//错误处理方法一
app.use(async (ctx, next)=> {
try {
await Promise.reject('Something went error');
} catch (err) {
ctx.status=err.status || 500;
ctx.body=err.message;
ctx.app.emit('error', err, ctx);
}
});
//错误处理方法二
app.use(async (ctx, next)=> {
ctx.throw(500, 'error');
});
app.on('error', (err, ctx)=> {
console.log(err);
});
app.listen(3000);Hapi.js 是 Http-API 的缩写，是一个用于开发可扩展 Web 应用程序的开源框架。hapi 最基本的经典用例之一是构建 REST API。
沃尔玛实验室已经使用了 hapi js 来处理“黑色星期五”等活动的流量，“黑色星期五”是网上购物最繁忙的日子之一。
主要特点：
1.配置驱动设计
使用它提供的配置对象，我们能够在 Hapi.js 中配置路由、参数设置和插件等。
const Hapi=require('@hapi/hapi');
const server=Hapi.server({
port: 3000,
routes: {
cors: true,
},
});
server.route({
method: 'GET',
path: '/',
handler: (request, h)=> {
return 'Hello, Hapi!';
},
});
async function start() {
await server.start();
console.log(Server running at ${server.info.uri} );
}
start();2. 强大的插件系统
Hapi.js 允许轻松集成插件，它做的很体贴，不会让人有太多麻烦。让我们看一个代码例子。
const start=async function () {
const server=Hapi.server();
await server.register([{
plugin: require('plugin1'),
options: {}
}, {
plugin: require('plugin2'),
options: {}
}]);
};在这个例子中，我们集成了两个插件。可以使用 key 将选项传递给插件的选项列表options中。
3. 身份验证和授权
Hapi.js内置支持各种身份验证策略，并允许开发者轻松定义访问控制策略。
server.route({
method: 'GET',
path: '/private-data',
handler: (request, h)=> {
// 仅当经过身份验证时才访问私人数据
const user=request.auth.credentials;
return Welcome, ${user.username}! ;
},
options: {
auth: 'jwt', // 使用 JWT 身份验证策略
},
});基于上面的代码示例，我们可以直接将认证策略定义为‘jwt’。
4. 输入验证
输入验证是 hapi.js 的另一个重要方面。在options路由对象中，我们可以定义哪些输入需要验证。默认validate对象由以下值组成。
{
headers: true,
params: true,
query: true,
payload: true,
state: true,
failAction: 'error'
}Adonis.js 框架是 Node.js 中的全功能 MVC 框架。
它能够构建可扩展且可维护的应用程序。Adonis.js 遵循与 Laravel 框架类似的结构，并包含开箱即用的 ORM、身份验证和路由等先进功能。
主要特点：
1.全栈MVC框架
Adonis.js 遵循 MVC 架构模式。使用 MVC 模式的框架有助于组织代码，并使其更易于维护和扩展。如下图示：
2. 集成 ORM（Lucid）用于数据库交互
Adonis.js 拥有自己的 ORM，名为 Lucid。
Lucid 提供了一个富有表现力的查询生成器，并支持各种数据库系统。在 lucid 中，我们可以创建模型来读取和写入数据库。请看下面的代码例子。
const Model=use('Model')
class User extends Model {
}
module.exports=User我们正在使用此用户模型而不是数据库查询。现在我们正在创建一个路由，在其中获取用户。
使用时很简单，用User 的User.all()方法来轻松获取用户信息。
const Route=use('Route')
const User=use('App/Models/User')
Route.get('users', async ()=> {
return await User.all()
})3. 用户认证系统
Adonis.js 内置了对用户身份验证和授权的支持。
它还提供了一组用于处理用户会话、密码哈希和访问控制的方法和中间件等，期待你更多的挖掘。
以上，便是2024年的一些主流Nodes框架，虽然写的是 2024，其实就是在后续市场上有一定优势和流行趋势的框架产品。
不论你选择Express.js 是因为它的简单性，还是选择Nest.js因为它的结构良好，还是选择Adonis.js因为它的生产力，还是选择Koa.js因为它的优雅性，选择自己合适且正确的框架都是蛮重要的。
这些框架各有千秋，总是取决于你的需求。了解你的项目需要什么至关重要，并请在此基础上选择合适的框架。
本文旨在帮助你寻找最新趋势、新功能的优秀框架，希望帮助大家成功进行后端开发，提供更好的框架选型参考价值。
感谢大家的阅读！
参考：
https://blog.bitsrc.io/top-5-nodejs-frameworks-in-2024-32c7fe9d49c6
Node.js 刚刚推出了一个新的 Next.js 网站并分享了幕后细节。他们考虑过 Nextra，但最终选择了自定义 Next.js 设置。该网站是静态构建的，使用 ISR 来生成动态内容。
现在您已经注意到nodejs.org 的全新外观了！
我们在设计时非常谨慎，既向过去致敬，又展望未来。该网站有许多聚合用例、数千个页面，并且是许多人的日常资源。整个故事有一些死胡同和弯路。但最终这是集体努力的结果。凭借超过三打贡献者的贡献以及与精选合作伙伴的出色团队合作，该项目得以实现。该网站改进了信息架构，以前所未有的方式将内容带到用户的指尖，并在未来几年建立了稳定的开发平台。我们还迭代了改进的开发人员体验、更清晰的 CI/CD 反馈以及平易近人的技术堆栈。
请继续阅读，更深入地了解这段旅程并洞察即将发生的事情。
nodejs.org 网站已经存在超过 14 年了。类似于实用下载和文档主页的设计首次出现于 2011 年底。这是 Node.js 0.6天的背景。
从那时起，该网站的规模随着项目的需要而缓慢增长。它包含 1600 多页。在鼎盛时期，它拥有近 20 种本地化语言。该域每月处理30 亿个请求，传输的数据量为 2 PB。毫不夸张地说，该网站是 Node.js 社区的重要资源。确保更改不会对用户和贡献者造成不必要的干扰绝对是至关重要的。
该项目首次尝试重新设计于 2019 年开始。工作从新域和新存储库nodejs.dev开始。回想起来，这可能从一开始就无意中注定了该项目的失败。该团队面临着孤立开发的挑战。简而言之，这个代码库不是社区或贡献者所在的地方。不存在已建立的贡献者工作流程。已经很忙的人们自愿贡献出自己的时间，不想学习第二套工具。这是一个太沉重的负担。该项目无法维持维持势头所需的领导力。此外，新技术堆栈的单一切换会很复杂，并对网站的现有存在构成风险。
然而，nodejs.dev 带来了很多经验教训和更新的内容。我们创建了一系列综合学习资源，并将其运用到当前的设计中。所有这一切正在形成一个愿景：渐进式进化、就地开发以及尽可能少的干扰。
2022 年，Claudio Wunder 加入了该项目。他弥合了两项开发工作之间的差距。他引导网络团队走向一个新的方向：回到现有的存储库。考虑如何重建站点，同时仍作为生产级资源运行。
代码库开始在多个维度上显示出它的年龄。设计已经过时了。对于大多数参与该项目的 Web 开发人员来说，Metalsmith 和 Handlebars 模板已经不再受欢迎。该网站的内部结构很难扩展，而且文档也很少。尝试混合代码和内容是一个挑战。
团队仔细考虑了技术堆栈。正在进行的重新设计的第一阶段涉及nextra，一个优秀的 Next.js 静态站点生成器。这是一个很好的入门方式，但随着网站的发展，我们需要自定义设置。我们发现自己越来越“突破”nextra 的惯例，依赖于 nextra 抽象的底层 Next.js 模式和强大工具。
Next.js是一个自然的发展过程，以其灵活性和强大功能而著称。例如，该网站仍然是为了最终用户速度和基础托管独立性而静态构建的，但利用 Next.js 的增量静态重新生成来获取动态内容（例如版本）。 React 提供的创作体验不仅更符合贡献者当前的技能，而且还与我们可以使用的更大的工具生态系统更加一致。
在此过程中，我们与Vercel建立了密切的合作伙伴关系。当网站的规模在静态导出期间使 webpack 的内存管理紧张时，他们提供了直接支持。这是一种共生关系。我们的需求推动他们的平台得到改进，他们的平台使我们能够构建更好的网站。我们在公开发布之前对新版本进行了 Beta 测试，这是该框架的真实压力测试。
2023 年 4 月，我们进行了一次小型切换。这是一个有点讽刺的说法。拉取请求有 1600 个文件，将 GitHub UI 推向了渲染能力的极限。网站的基础设施会发生变化，但外观、内容和创作体验将保持不变。这是一个重要的里程碑——证明我们可以在飞行中重建飞机。
OpenJS 基金会非常友善地资助我们与设计师Hayden Bleasel一起进行重新设计。 Hayden 为该网站带来了现代设计，并帮助我们思考遇到的多方面用例。结果是我们可以用它来指导我们的开发的Figma文档。其中包括用户体验流程、暗/亮模式、页面布局、移动视口注意事项和组件细分。
接下来是将设计实现为代码，这是一项分布在世界各地的努力。重点放在基础设计元素和结构化组件层次结构的顺序构建上。我们从第一天起就构建了组件的变体，并从一开始就考虑了国际化。这减少了返工，并使新手可以轻松完成任何任务。我们开始通过Storybook和Chromatic的托管实例单独构建组件。 Storybook 是原型、迭代和测试组件的好地方。我们选择使用Tailwind CSS，但重点是设计令牌和应用 CSS。这种共同语言帮助新手了解我们的方法并翻译 Figma。
Orama搜索将网站的所有内容放在用户的指尖。它们对我们的静态内容进行索引，并以闪电般的速度提供 API 内容、学习材料、博客文章等结果。那里的团队直接贡献了这种集成，并继续帮助我们提供卓越的体验。很难想象没有这个功能。
Node.js 在我们社区中的影响力对我们来说很重要。因此，旧网站已国际化为近 20 种语言。然而，一系列不幸的事件导致我们重置了所有翻译。这是一个艰难的决定，但考虑到当时的情况，这是正确的决定。我们正在与Crowdin合作，重新建立我们的努力。这将包括仔细解析基于 MDX 的新内容。我们期待着未来几个月的持续内部化。
当我们在新的基础设施上构建并开始预览该网站并重新设计时，更深入地了解最终用户的行为是非常宝贵的。我们利用Sentry提供错误报告、监控和诊断工具。这对于识别问题和为我们的用户提供更好的体验有很大帮助。在重新设计工作之前，Sentry 也很有用，可以通过重播用户会话来识别旧站点中的问题。
在所有这些集成和开发步骤中，我们一直关注最终用户的可访问性和性能。 Vercel 和Cloudflare支持可确保网站快速可靠。我们还通过 GitHub Actions 投资了 CI/CD 管道，为贡献者提供实时反馈。这包括使用 Chromatic、Lighthouse 结果进行视觉回归测试，以及一套检查和测试，以确保网站质量保持较高水平。
在整个网站重新设计过程中，我们积极努力打造包容和热情的体验。重新设计工作与 2023 年 9 月的Grace Hopper 庆典开源日以及下个月的Hacktoberfest非常吻合。这两个活动都向整个生态系统的项目展示了新的贡献者。我们通过将“良好的第一个问题”作为离散的开发任务来为这些事件做好准备。就 Grace Hopper 而言，我们还提供了现场指导，以便与会者能够以落地公关结束这一天。我们很自豪地说，我们有许多首次为该项目做出贡献。
仅在 Grace Hopper 期间，就有 28 位作者提出了 40 个 PR。 Hacktoberfest 新增 26 个 PR。
开源项目的好坏取决于它的文档。允许新贡献者异步建立上下文至关重要。为此，我们不将 DX（开发人员体验）限制于工具。重新设计为我们提供了一个很好的机会来发现和改进文档中的差距。在此过程中，我们迭代或引入了：
新代码非常注重内联代码和配置注释、关注点分离以及明确定义的常量。整个过程中使用 TypeScript 可以帮助贡献者理解数据的形状和函数的预期行为。
重新设计为 Node.js 网站的新时代奠定了基础。我们拥有坚实的基础，可以持续多年。如果过去有任何指示的话，我们将在这个空间内迭代很长一段时间。
但工作还没有完成。出色地：
许多人和组织为实现重新设计做出了大大小小的贡献。我们要感谢：
社区很强大，我们对共同实现的目标感到兴奋。
原文链接
作者：tsingc 链接：https://juejin.cn/post/7351454390148120588
*请认真填写需求信息，我们会在24小时内与您取得联系。
