Mar*_*and 3 reactjs netlify netlify-cms
我有一个react.js 应用程序,我想添加netlify CMS 后端。我按照此处的设置教程进行操作: https: //www.netlifycms.org/docs/add-to-your-site/,但是当我导航到 mysite/admin 时,我只是得到了我的网站。我改变了我的react-router和netlify_redirect文件,并尝试将脚本标签放入正文中,就像这个repo所做的那样: https: //github.com/Jinksi/netlify-cms-react-starter,但现在我只是出现白屏。Jinksi 似乎不遗余力地使用头盔等来完成这项工作。在 netlifyCMS 网站上有使用 Gatsby 等的示例,但没有一个使用纯 React。目前有没有一种简单的方法可以做到这一点?或者我应该使用 Gatsby.js 重写我的网站?
在本答案(v2.1.3)发布时, NetlifyCMS不支持成为您的 React 应用程序中的组件。只要您不尝试使用 .react-router,您就可以将其添加到您的 React 应用程序Link中react-router。NetlifyCMS 是它自己的 React 应用程序,并且拥有自己的路由和样式,如果您现在将其作为组件导入,则会干扰您的 React 应用程序。
创建一个create-react-app
npx create-react-app netlify-cms-cra-simple
cd netlify-cms-cra-simple
Run Code Online (Sandbox Code Playgroud)
将 NetlifyCMS 应用程序的资产添加到public/admin
public/admin/index.html
npx create-react-app netlify-cms-cra-simple
cd netlify-cms-cra-simple
Run Code Online (Sandbox Code Playgroud)
public/admin/config.yml
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
为您的静态图像位置 创建一个images文件夹public/images
repo更改中的名称config.yml并将更改提交到您的存储库。
使用浏览器启动您的 cra 应用程序yarn start并导航到。http://localhost:3000/admin/
将依赖项添加react-router-dom到您的项目 ( yarn add react-router-dom) 将App代码移至名为 的新组件Home。新的App.js
backend:
name: github
repo: talves/netlify-cms-cra-simple
media_folder: "public/images"
public_folder: "images"
collections:
- name: settings
label: Settings
files:
- file: public/manifest.json
name: manifest
label: 'Manifest Settings'
fields:
- name: short_name
label: 'Short Name'
widget: string
required: true
- name: name
label: 'Name'
widget: string
required: true
- name: start_url
label: 'Start URL'
widget: string
default: '.'
required: true
- name: display
label: 'Display Type'
widget: string
default: 'standalone'
required: true
- name: theme_color
label: 'Theme Color'
widget: string
default: '#000000'
required: true
- name: background_color
label: 'Theme Color'
widget: string
default: '#FFFFFF'
required: true
- name: icons
widget: list
label: 'Icons'
allow_add: true
fields:
- widget: string
name: src
label: Source
- widget: string
name: sizes
label: 'Sizes'
- widget: string
name: type
label: 'Mime Type'
Run Code Online (Sandbox Code Playgroud)
笔记:
config.yml只是编辑manifest.json. 阅读为您的网站docs设置正确的设置config.yml。NetlifyCMS。| 归档时间: |
|
| 查看次数: |
4026 次 |
| 最近记录: |