如何使用纯 React 应用程序设置 NetlifyCMS

Question

我有一个 react.js 应用程序，我想添加 netlify CMS 后端。我按照此处的设置教程进行操作：https://www.netlifycms.org/docs/add-to-your-site/ but when I navigate to mysite/admin I just get my site. I changed around my react-router, and netlify _redirect file, and tried putting the script tags in the body, like this repo did: https://github.com/Jinksi/netlify-cms-react-starter，但现在我只看到一个白屏。 Jinksi 似乎竭尽全力使这项工作，使用头盔等。在 netlifyCMS 站点上有使用 Gatsby 等的示例，但是 none 使用纯反应。目前有没有简单的方法可以做到这一点？或者我应该使用 Gatsby.js 重写我的网站吗？

Answer 1

NetlifyCMS 不支持在回答此问题 (v2.1.3) 时成为您的 React 应用程序中的组件。您可以使用 react-router 将它添加到您的 React 应用程序中，只要您不尝试使用 react-router 来 Link。 NetlifyCMS 是它自己的 React 应用程序，并且具有自己的路由和样式，如果您现在将其作为组件导入，将会干扰您的 React 应用程序。

创建一个简单的启动器（or fork on GitHub）

创建 create-react-app

npx create-react-app netlify-cms-cra-simple
cd netlify-cms-cra-simple

将 NetlifyCMS 应用程序的资产添加到 public/admin

public/admin/index.html

<!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>

public/admin/config.yml

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'

在 public/images 处为您的静态图像位置

创建一个 images 文件夹

在 config.yml 中更改 repo 的名称并将更改提交到您的存储库。

使用 yarn start 启动您的 cra 应用程序并在浏览器中导航至 http://localhost:3000/admin/。

添加 React-Router（see react-router branch) [Demo]

将 react-router-dom 依赖项添加到您的项目 (yarn add react-router-dom) 将 App 代码移动到名为 Home 的新组件。新 App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    );
  }
}

export default App;

注意：

上面的config.yml只是一个编辑manifest.json的文件集合的例子。阅读 docs 为您的站点设置合适的 config.yml。
您需要 setup an authentication provider 才能在您的托管网站上使用 NetlifyCMS。

如何使用纯 React 应用程序设置 NetlifyCMS

How to set up NetlifyCMS with a pure react app

reactjs

netlify

netlify-cms

创建一个简单的启动器（or fork on GitHub）

添加 React-Router（see react-router branch) [Demo]