Angular Scully 블로그 사이트에 Netlify CMS 추가

18317 단어 angularscullynetlifycms

소개



이 기사는 Scully 정적 사이트 생성기로 구축되고 Netlify에 배포된 각도 프로젝트에서 netlify CMS 구성을 안내하는 것을 목표로 합니다.
우리는 a previous article에서 빌드한 Angular scully 블로그 프로젝트를 사용할 것입니다. 그렇지 않은 경우 속도를 높일 수 있도록 친절하게 확인하십시오.

데모



다음은 우리가 구축할 최종 결과입니다.
  • CMS demo 대 Angular-Scully blog
  • Github repository

    • 넷리파이 CMS



    Github, Bitbucket 또는 Gitlab과 같은 버전 제어 플랫폼의 리포지토리에 저장된 애플리케이션의 콘텐츠를 관리할 수 있는 git 기반 CMS입니다. Markdown, JSON, YAML 및 TOML과 같은 다양한 파일 형식을 지원합니다.
    이제 우리가 사용하고 있는 도구에 대한 배경 지식이 있으므로 시작하겠습니다.

    Angular-Scully 앱에 Netlify CMS 추가하기



    앱의 src 폴더에서 admin라는 이름의 폴더를 생성합니다. 여기에는 다음 두 파일이 포함됩니다. index.html 및 config.yml .

    src
 └ admin
     ├ index.html
     └ config.yml

    src/admin/index.html는 Netlify CMS 구성을 처리하는 동안 사이트의 netlify CMS 앱에 대한 액세스를 처리하는 관리자 패널을 로드/가져오는 파일입니다.
    아래 코드 스니펫을 src/admin/config.yml에 추가합니다.

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


    위의 코드 스니펫은 CDN에서 실제 관리 페이지를 로드하는 기본 html 페이지입니다.

    다음은 src/admin/index.html 에 대한 샘플 구성입니다. 이러한 설정이 수행하는 작업에 대한 자세한 정보를 보려면 configuration docs을 살펴보는 것도 중요합니다. 아래에 이 스니펫을 추가하거나 사용 사례에 맞게 사용자 정의하십시오.

    # src/admin/config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: "src/assets/images" # Media files will be stored in the repo under assets/images
public_folder: "/assets/images" # The src attribute for uploaded media will begin with /assets/images

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    #slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      #- {label: "Slug", name: "slug", widget: "string"}
      - {label: "Published", name: "published", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Post Image", name: "image", widget: "image"}
      - {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
      - {label: "Body", name: "body", widget: "markdown"}


    파일이 정적 사이트의 빌드 디렉토리에 포함될 수 있도록 Netlify CMS의 config.yml 디렉토리를 src/admin 파일에 포함합니다.

    "projects": {
    "angular-blog": {
      ...
      "architect": {
        "build": {
          ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/admin"
            ],
            ...
          },
          ...
      }
    }
  },


    명령angular.json을 실행하면 npm run build 폴더에 admin 디렉토리가 표시되어야 합니다.

    dist
├ angular-blog
|    └ admin
|        ├ index.html
|        └ config.yml
└ static
     └ admin
          ├ index.html
          └ config.yml


    Netlify CMS 인증



    Netlify 웹 앱(백엔드)에서 인증



    ID 및 Git 게이트웨이를 활성화하는 단계


  • netlify 웹 앱 플랫폼에 로그인합니다
    • .
  • 대시보드로 이동한 후 사이트 탭을 클릭합니다
    • .
  • netlify ID를 활성화할 사이트를 선택하십시오
    • .
  • 사이트 설정 탭 클릭
  • 왼쪽 탭에서 ID를 클릭합니다
    • .
  • ID 활성화 버튼을 클릭합니다
    • .
  • 등록 기본 설정에서 설정 편집을 클릭하고 초대만 옵션을 선택합니다. (데모를 위해 내 것을 열어 두었습니다.)
  • 타사 로그인을 활성화하려면 외부 공급자 섹션에서 공급자를 추가하십시오.
  • 서비스 섹션에서 Git 게이트웨이까지 아래로 스크롤하고 Git 게이트웨이 활성화 버튼을 클릭합니다.

    • 앱에서 인증(프론트엔드)



    기본적으로 이전 단계에서 구성한 백엔드에 연결하는 데 필요한 인터페이스를 처리하는 Netlify Identity Widget을 추가해야 합니다. 위젯을 포함하려면 dist에 있는 CMS 색인 파일의 script 및 기본 색인 파일head의 src/admin/index.html 아래에 head 태그를 추가합니다.

    <!-- src/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>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</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>




    <!-- src/index.html -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBlog</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>


    When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:

    <script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>


    netlify에서 빌드 프로세스를 트리거할 github 저장소에 코드를 푸시합니다.

    브라우저에서 CMS에 액세스


    src/index.html에서 사이트의 CMS에 액세스할 수 있습니다.
    CMS demo에 대한 Angular-Scully blog을 확인하십시오.Netlify Identity로 로그인을 클릭하고 가입을 선택하면 CMS에 액세스할 계정을 만들 수 있습니다.
    건강하시고 즐거운 포스팅 부탁드립니다. 읽어 주셔서 감사합니다.

    참조


  • Netlify documentation for adding Netlify CMS to your site

    • 연결하다



    저와 연결하고 싶으시면 제가 연락할 수 있습니다.
  • 불일치: yoursite.com/admin/
  • 트위터:
    • 다중 저장소 DOM 이벤트(Angular)
    【android studio(version4.0)】project 작성까지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage