低代码前端后端【免费下载链接】plasmicVisual builder for React. Build apps, websites, and content. Integrate with your codebase.项目地址https://gitcode.com/gh_mirrors/pl/plasmic点击查看免费下载本篇技术指南以仓库中的 plasmic-cms-i18n 示例 为蓝本系统讲解如何利用 Plasmic CMS 的本地化Localization / i18n能力在 Next.js 应用中通过一个语言选择器动态切换界面内容语言。读完本文你将掌握 Plasmic Loader 的globalContextsProps机制、CMS 凭据全局上下文Credentials Provider的locale参数传递方式以及 SSG ISR 预渲染下的数据缓存写法可直接在你的 Next.js 项目中复刻一套 CMS 驱动的多语言页面。一、示例项目要解决什么问题Plasmic 是一个可视化的 React 构建器允许设计人员在 Plasmic Studio 中搭建页面再通过 Loader 集成到你的代码库中。而 Plasmic CMS 则是其配套的内容管理能力当页面中的文案、图片等字段需要按语言区分时CMS 的**本地化值localized values**机制就会发挥作用——同一个字段在不同 locale 下可以存储不同的内容。plasmic-cms-i18n示例的核心目标就是演示这条链路页面内容来自 Plasmic CMS 数据库支持多语言字段页面中放置了一个locale selector语言选择器组件用户在界面上切换语言后动态设置 localeCMS 立即返回对应语言的内容页面本身运行在 Next.js 中采用静态生成SSG与增量静态再生成ISR模式。需要特别说明的是示例背后的 CMS 数据库无法公开共享README 中明确指出因此要看到真实的本地化数据你需要连接自己的 Plasmic CMS 数据库。但动态切换 locale 的完整代码链路是开源的这正是本文要逐行剖析的重点相关实现集中在 pages/index.tsx。二、项目结构一览examples/plasmic-cms-i18n/ ├── pages/ │ ├── [...catchall].tsx # 兜底动态路由渲染其余 Plasmic 页面 │ ├── index.tsx # 首页含 locale 动态切换核心逻辑 │ └── plasmic-host.tsx # 开发态画布宿主App Host ├── plasmic-init.ts # Plasmic Loader 初始化项目 ID / Token ├── next.config.mjs # Next.js 配置 ├── package.json └── tsconfig.json整个示例只依赖plasmicapp/loader-nextjs、next、react、react-dom四个运行时依赖见 package.json是一个刻意保持最小化的演示工程。其中 next.config.mjs 仅开启了reactStrictModetsconfig.json 提供了/*路径别名与其它示例工程保持一致的规范。三、核心实现动态 locale 的完整数据流1. 用useState持有当前语言首页在组件顶层声明了一个语言状态默认值为enconst [locale, setLocale] useStatestring(en);注释里明确说明了设计意图The locale will be set when thelocaleSelectelement is changed. The locale is passed into the CMS global context to update the content.——即语言状态由页面上的localeSelect元素驱动随后被注入 CMS 全局上下文从而刷新内容。2. 把 onChange 绑定到 Plasmic 组件在渲染 Plasmic 页面组件时通过componentProps把回调注入到名为localeSelect的元素上PlasmicComponent component{pageMeta.displayName} componentProps{{ localeSelect: { onChange: (locale: string) setLocale(locale), }, }} /这里的localeSelect是你在 Plasmic Studio 里设计好的下拉选择组件组件名/Prop 名由设计稿决定示例约定它对外暴露一个onChange回调。用户在界面上切换语言时回调触发setLocaleReact 状态更新随后重新渲染。3. 通过globalContextsProps把 locale 注入 CMS 全局上下文PlasmicRootProvider是 Plasmic Loader 渲染的根组件它支持globalContextsProps属性——用于向页面中用到的**全局上下文Global Context**传入 Props。示例的关键就在这里PlasmicRootProvider loader{PLASMIC} prefetchedData{plasmicData} prefetchedQueryData{queryCache} pageRoute{pageMeta.path} pageParams{pageMeta.params} pageQuery{router.query} globalContextsProps{{ cmsCredentialsProviderProps: { locale, }, }} loader{PLASMIC}传入 plasmic-init.ts 中初始化的 Loader 实例prefetchedData/prefetchedQueryData接收getStaticProps阶段预取的数据与查询缓存保证客户端首屏无闪烁globalContextsProps键名为cmsCredentialsProviderProps对应 Plasmic CMS 包的全局上下文CmsCredentialsProvider的 Props这里只覆盖了其中的locale字段。当locale状态变化时PlasmicRootProvider会带着新的globalContextsProps重新渲染CMS 内容随之按新语言拉取。这即是动态设置 locale的完整闭环UI 状态 → React 回调 → RootProvider Props → CMS 全局上下文 → 内容刷新。四、底层原理globalContextsProps 与 CmsCredentialsProvider1. Loader 侧的 Props 分发globalContextsProps并非示例特有的拼写而是 Loader 的标准能力。在 packages/loader-react/src/loader-server.tsx 中服务端渲染路径会把它透传给GlobalContextsProvider {...globalContextsProps}在 packages/loader-react/src/PlasmicRootProvider.tsx 中它被合并进全局上下文的值并随 Provider 下发。也就是说任何注册为 Global Context 的组件都可以通过globalContextsProps从宿主应用侧注入配置。2. CMS 凭据提供者的 locale 参数CmsCredentialsProvider定义于 plasmicpkgs/plasmic-cms/src/components.tsx其注册元信息cmsCredentialsProviderMeta中明确列出了四个 PropsProp类型说明hoststringStudio 地址默认指向生产环境主机属高级选项databaseIdstringCMS数据库ID可在 CMS 设置页获取databaseTokenstringCMS 的 Public Token可在 CMS 设置页获取localestring要使用的本地化值语言留空则使用默认 locale从源码结构看CmsCredentialsProviderProps直接扩展了DatabaseConfig意味着locale与数据库连接参数一起构成 CMS 查询的上下文环境。示例中在globalContextsProps.cmsCredentialsProviderProps里只传locale说明databaseId、databaseToken等其余凭据是在 Plasmic Studio 的 CMS 组件配置中填好的宿主代码仅负责运行时动态改变语言。3. 设计态与运行态的分工值得注意的一点locale默认值是空字符串语义leave empty for the default locale而示例把运行态的初始值设为en。这体现了设计态在 Studio 配置、运行态由宿主代码控制的分工——编辑器里你可以预览各语言内容运行时则由useState的当前值接管。五、预渲染与查询缓存SSG ISR 的正确姿势index.tsx中的getStaticProps展示了如何让依赖 CMS 的页面既享受静态生成又能在语言切换时拥有数据缓存export const getStaticProps: GetStaticProps async () { const plasmicData await PLASMIC.fetchComponentData(/); const pageMeta plasmicData.entryCompMetas[0]; // Cache the necessary data fetched for the page const queryCache await extractPlasmicQueryData( PlasmicRootProvider loader{PLASMIC} prefetchedData{plasmicData} pageRoute{pageMeta.path} pageParams{pageMeta.params} PlasmicComponent component{pageMeta.displayName} / /PlasmicRootProvider ); // Use revalidate if you want incremental static regeneration return { props: { plasmicData, queryCache }, revalidate: 60 }; };拆解三个要点PLASMIC.fetchComponentData(/)按路径从 Plasmic 拉取组件渲染数据ComponentRenderData首页路径为根路径/extractPlasmicQueryData在服务端用同一棵组件树预渲染一遍把页面依赖的 CMS 查询结果提取进queryCache随props传给客户端从而避免客户端重复请求、也避免首屏 loadingrevalidate: 60开启 ISR页面每 60 秒增量重建一次兼顾内容新鲜度与静态性能。代码注释明确说明Use revalidate if you want incremental static regeneration。配合客户端的prefetchedQueryData{queryCache}首次加载即可直接使用服务端缓存的数据语言切换后新的查询结果再按需获取。这是 Loader 页面标准的数据流模板同样被 pages/[...catchall].tsx 复用那里多了maybeFetchComponentData的兜底逻辑与fallback: blocking。六、路由与开发宿主两个支撑页面pages/[...catchall].tsx通过getStaticPaths调用PLASMIC.fetchPages()枚举所有 Plasmic 页面路径并过滤掉/避免与index.tsx冲突再用maybeFetchComponentData逐个渲染。它是index.tsx的通用化版本保证了示例工程中只建一个路由就能承载 Studio 里所有页面。pages/plasmic-host.tsx渲染PlasmicCanvasHost /作为 Plasmic Studio 的 App Host 画布入口。在本地开发时你需要在 Studio 中把项目指向http://localhost:3000/plasmic-host才能在设计器中实时预览详见 plasmic-init.ts 中的注释说明。七、Loader 初始化与项目绑定plasmic-init.ts 是集成 Plasmic 的入口export const PLASMIC initPlasmicLoader({ projects: [ { id: mbmbKuYXsrojz2DccvPWPT, token: S2LgPYjopp6FR3hxisrSwLDcfWwS2Y770EGNfz0dpfRVaaXnd604aFdZQvEzsMp9aScDsqC3obE3KLHnnJkw, }, ], preview: false, });projects数组声明要加载的 Plasmic 项目示例绑定的是演示项目mbmbKuYXsrojz2DccvPWPTpreview: false表示默认使用最近一次发布的版本若在开发期改为true则会加载未发布的工作稿源码注释特别提醒仅限开发环境使用因为性能明显更慢文件末尾还预留了PLASMIC.registerComponent(...)的代码组件注册位说明该示例设计上允许扩展自定义代码组件。八、本地运行与接入自己的 CMS按照标准 Next.js 流程即可运行本示例# 安装依赖仓库使用 yarn.lock 锁定版本 yarn install # 开发模式 yarn dev # 生产构建 yarn build yarn start依赖版本以 package.json 为准Next.js 16.x、React 18、plasmicapp/loader-nextjs^1.0.396。要让多语言内容真正生效你需要自己的数据源在 Plasmic Studiostudio.plasmic.app中创建你自己的 CMS 数据库并在字段上启用本地化Localization在 Studio 的页面设计中放置 CMS 数据组件与localeSelect选择器为 CMS Credentials Provider 填入你的databaseId与databaseToken将示例 pages/index.tsx 中globalContextsProps的传递方式原样保留——宿主代码只负责把运行时 locale 交给cmsCredentialsProviderProps.locale在 Studio 设置页把项目指向本地plasmic-host地址进行可视化联调。由于示例仓库无法携带 CMS 数据若你直接运行而不配置自己的数据库页面数据区将显示空内容或加载占位这属于预期行为。九、小结这套模式还能怎么用plasmic-cms-i18n演示的不只是切换语言更是一套宿主应用与 Plasmic 设计器之间通过 Global Context Props 进行运行时协作的通用范式任何注册为 Global Context 的 Plasmic 包CMS、认证、主题等都可以从宿主侧通过globalContextsProps注入动态配置动态值locale、用户信息、环境变量与静态配置数据库凭据、主机地址分层管理前者放代码、后者放 Studio职责清晰getStaticPropsextractPlasmicQueryDatarevalidate的组合让 CMS 驱动的页面在保持静态化的同时具备实时性。如果你需要把多语言能力推广到整个站点而非仅首页只需把 pages/[...catchall].tsx 中的PlasmicRootProvider同样接上globalContextsProps即可让所有由 CMS 渲染的页面共享同一套 locale 状态。赞分享低代码前端后端【免费下载链接】plasmicVisual builder for React. Build apps, websites, and content. Integrate with your codebase.项目地址https://gitcode.com/gh_mirrors/pl/plasmic点击查看免费下载相关推荐CocosCreatorPlugins性能优化让插件运行更流畅的6个技巧CocosCreatorPlugins性能优化让插件运行更流畅的6个技巧 CocosCreatorPlugins是一套功能丰富的Cocos Creator插件Next.js App Router 国际化路由实战基于 Edge Middleware 的 i18n-routing 示例解析Next.js App Router 国际化路由实战基于 Edge Middleware 的 i18n routing 示例解析 本篇基于 Next.js 官前端后端Web框架SSR前端构建vue-i18n 语言切换Locale Changing完整实战指南从根实例到组件的动态国际化机制vue i18n 语言切换Locale Changing完整实战指南从根实例到组件的动态国际化机制 vue i18n 是 Vue.js 的国际化插件其核前端国际化上一篇5个终极秘诀免费显卡优化工具让你的游戏性能飙升200%下一篇Bazzite 官方媒体资源包Press Kit与品牌术语使用规范指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考