如果您在这里结束了第三部分并且没有看到first也没有看到second,我强烈建议您先看一下。在上一节中,我们处理了语言内容的创建和列表,并在那里结束了项目。
本地存储是 JavaScript 为我们提供的一种将信息保存在用户浏览器中的方式,以便下次访问时可用。许多人使用它来进行简单的身份验证或保存选项,例如明暗模式。
这里使用的逻辑与主题更改的逻辑没有区别,不同之处在于将保存语言。只需对两个文件进行少量修改。这些文件是:Header组件和LanguageProvider语言上下文。如果你从另一个维度掉下来,没有看到前两篇文章,到现在还没有任何意义,我在文章开头警告你!去那里查看以前的文章,然后回到这里!
以下是 Header 组件的代码:
进入全屏模式 退出全屏模式
LanguageProvider 如下:
进入全屏模式 退出全屏模式
该文件的内容如下:
进入全屏模式 退出全屏模式
我在一些帖子和页面都将使用的函数中创建了一个type参数。这是因为此参数标识了将读取文件的目录。默认情况下,我将其配置为始终搜索帖子。由于文件名已更改,功能也已更改,因此有必要更新使用新库的文件中的_imports_。
这是另一个具有特殊名称的页面,用于创建动态路由。在此参数将是文件的“id”,它由文件lib/files的函数getAllIds()捕获。文件将被称为[lang]/[id].tsx。下面是文件的完整代码。
进入全屏模式 退出全屏模式
有了这个文件,已经可以支持通过 Markdown 创建的页面。降价文件使用以下结构:
进入全屏模式 退出全屏模式
为了更好地组织文件,我在项目的根目录中创建了一个名为/content的目录,并在其中创建了另外两个目录:posts和pages。它们将在目录中接收网站支持的每种语言的降价文件。使用此处提供的代码,页面的创建是完全自动化的,并且基于此结构。
再见!
本文的葡萄牙语版本
本教程第一部分
本教程第二部分
GitHub 上的回购
使用此代码制作的网站
如果本文对您有所帮助,请考虑捐赠。这将帮助我创建更多这样的内容!
React社区为您提供最前沿的新闻资讯和知识内容
更多推荐
SSR、ISR、CSR、SSG有什么区别
简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对
React 中具有“显示更多/更少”功能的代码列表项
React::Angular
苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,