고려 및 Netlify CMS

tldr；

사고리는 빠르고 정적인 사이트를 만드는 데 뛰어나다.만약 당신이 기술적 배경이 있다면 사이트에 내용을 추가하는 것은 상대적으로 쉽다.HTML을 직접 편집하거나 새 블로그 게시물에 새 태그 파일을 추가할 수 있습니다.그러나 기술 수준이 낮은 사용자는 내용 관리 시스템에서 이득을 보고 내용을 편집할 수 있다.Netlify는 Scully와 함께 쉽게 설정할 수 있는 CMS 옵션을 제공합니다.이 문서에서는 Scully 사이트를 만들고 Netlify CMS를 활성화하는 방법을 학습합니다.

첫걸음

먼저 새 Angle 응용 프로그램을 만들고 Scully 및 블로그를 초기화합니다.

$ ng new scully-netlify-cms --routing
...
$ ng add @scullyio/init
...
$ ng g @scullyio/init:blog
...

나는 이 절차 중의 한 걸음 한 걸음을 상세하게 토론할 생각은 없다.그것은 다른 게시물에 남기는 것이 가장 좋다.이 세 명령이 새 Angular 응용 프로그램을 만들고 Scully를 초기화하고 Scully에 블로그 지원을 추가하는 것만 알면 됩니다.다음에, 우리는 루트에 사용할 몇 개의 모듈과 구성 요소를 만들어야 한다.너는 이렇게 할 수 있다.

$ ng g m admin --routing
$ ng g c admin/home
$ ng g m home --routing
$ ng g c home/home
$ ng g c blog/list

이 슬라이드에서는 각 모듈의 기본 경로로 사용할 admin과 home, 그리고 HomeComponent을 두 개의 모듈로 구성했습니다.참고로 이것은 구성 요소 이름의 한 예일 뿐이다.너는 마음대로 그들에게 이름을 지어줄 수 있다.Netlify CMS가 정상적으로 작동하려면 관리 모듈만 필요합니다.
그런 다음 app-routing.module.ts 파일에 라우팅이 설정되어 있는지 확인합니다.

// app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule) },
  { path: 'blog', loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule) },
];

이 라우팅은 라우팅에 액세스할 때 각 모듈의 로드를 지연시킵니다.다음 섹션을 진행하기 전에 최소한 app.component.html 파일에 대한 기본 탐색 기능을 추가하여 애플리케이션의 다양한 부분에 액세스할 수 있도록 하겠습니다.

<!-- app.component.html -->

<nav *ngIf="(isAdminPage$ | async) === false">
  <a routerLink="/">Home</a>
  <a routerLink="/admin">Admin</a>
  <a routerLink="/blog">Blog Posts</a>
</nav>

<router-outlet></router-outlet>

이제 프로그램을 돌아갈 수 있습니다.당신은 *ngIf 원소의 nav을 주의하게 될 것입니다.이것은 필요합니다. CMS 관리 페이지에 들어가면 아래에서 설정할 것입니다. 이 내비게이션은 레이아웃에서 벗어나 일부 부분을 사용할 수 없습니다.그럼 걱정 안 해도 돼.관측 가능한 isAdminPage$의 논리는 app.component.ts 파일에서 다음과 같이 결정됩니다.

// app.component.ts

  isAdminPage$: Observable<boolean>;

  constructor(private _router: Router) {}

  ngOnInit() {
    this.isAdminPage$ = this._router.events.pipe(
      filter((evt: any) => {
        return evt instanceof NavigationEnd;
      }),
      map((evt: NavigationEnd) => {
        return evt.url.includes('/admin');
      }),
    );
  }

너는 지금 너의 Scully 사이트에 Netlify CMS를 설치할 준비가 되어 있어야 한다.이 단계가 되면 코드를 GitHub repo로 전송합니다.

Just like you didn't learn what all the commands above did (because it was outside the scope of this project), you won't learn all the ins and outs of Netlify CMS. You can do that on their documentation site. The Netlify related code snippets mentioned in this post come from the section of the CMS docs that show you how to add the CMS to your own site. I will repeat parts of that portion of the docs in the sections to follow, but I won't be going in to depth. I'll refer back to the CMS docs when necessary.

Netlify Web Apps의 필수 단계

Netlify 에서 모든 것이 정상적으로 작동하려면 몇 가지 절차를 수행해야 합니다.첫 번째는 Git에서 새 사이트를 만드는 것입니다.마지막 단계가 끝날 때 만든 환매 프로토콜을 선택하고 Netlify가 요구하는 필드를 작성하십시오.따라서 main 지점으로 푸시할 때 Netlify 에 사이트가 배치됩니다.웹 사이트를 만든 후에는 Netlify CMS authentication steps을 사용할 수 있습니다.이렇게 하면 CMS가 시작되고 실행된 후에 로그인할 수 있습니다.Netlify의 문서를 읽어서 Netlify 표식을 설정할 수 있습니다.

Angular 애플리케이션에 Netlify CMS 추가

자, 이제 Angular 프로그램의 새로운 기능에 들어갑니다.우선, 프로그램의 script 파일에 index.html 탭을 몇 개 추가해야 합니다.첫 번째는 head 라벨에 넣고, 두 번째는 body 라벨에 넣는다.

<!-- src/index.html -->
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

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

이 두 스크립트는 Netlify 인증을 통해 CMS 관리 섹션에 액세스하는 데 필요합니다.다음에 프로그램에 스크립트를 추가해야 하지만, 구성 요소에 추가해야 합니다. /admin 경로로 이동할 때 이 구성 요소는 페이지에 주입됩니다.위 단계를 수행하면 /admin/home/home.component이 됩니다.components TypeScript 파일에서는 RendererFactory2을 사용하여 스크립트를 주입합니다.이것은 Angular 응용 프로그램에 타사 스크립트를 추가하는 일반적인 방법입니다.어셈블리는 다음과 같습니다.

// admin/home/home.component.ts

export class HomeComponent implements OnInit {
  private renderer2;

  constructor(private rendererFactory2: RendererFactory2, @Inject(DOCUMENT) private _document: Document) {
    this.renderer2 = this.rendererFactory2.createRenderer(null, null);
  }

  ngOnInit(): void {
    const script: HTMLScriptElement = this.renderer2.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js`;
    script.text = '';
    this.renderer2.appendChild(this._document.body, script);
  }
}

이 구성 요소에서 RendererFactory2 서비스는 renderer의 실례를 만들었습니다.그리고 OnInit 방법에서 스크립트를 만들고 netlify-cms.js 스크립트를 문서에 추가합니다.이제 CMS는 /admin 노선으로 이동할 때 로드할 수 있습니다.
마지막 부분은 Netlify CMS에 필요한 config.yml 파일을 준비하는 것입니다.너는 the configuration in the docs을 읽을 수 있지만, 여기에 기본적인 설정 파일이 하나 있다.이것은 제출할 지점, 사용할 인증 유형, 업로드 파일을 저장할 위치를 설정하고 집합을 정의합니다.이 예제의 컬렉션은 CMS를 사용하여 작성될 블로그 글입니다.

# config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to main)
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: "Publish Date", name: "publishDate", widget: "datetime"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Published", name: "published", widget: "boolean", default: true}
media_folder: 'static/img' # Folder where user uploaded files should go

이 파일은 스컬리로 웹 사이트를 만든 후에 출력에 포함되기만 하면 원하는 곳에 놓을 수 있다.src 폴더에 추가한 다음 프로젝트의 assets 그룹에 포함할 수 있습니다.이것은favicon을 처리하는 것처럼 config.yml을 처리할 것이다.

<!-- angular.json -->
...
  "assets": ["src/favicon.ico", "src/config.yml", "src/assets"],
...

애플리케이션을 구축할 때 구성 파일은 dist/static 폴더로 복사됩니다.프로그램이 구축된 후에 이 config.yml 파일을 정확한 위치에 두면 다음 단계를 계속할 수 있습니다.모든 변경 사항을 제출하고 리포의 main 지점으로 전송하면 새로운 구축과 배치를 촉발합니다.

브라우저에서 CMS 액세스

Netlify가 프로그램을 구축하고 배치하면, 이 사이트를 방문하여/admin 경로로 이동할 수 있습니다.스크립트를 주입할 때, Netlify는 Netlify 인증을 받아야 합니다.인증 후에는 CMS 소개 페이지로 이동해야 합니다.그것은 이렇게 보인다.

여기에서 사용자의 친절한 부유한 텍스트나 가격 인하 편집기에 새로운 블로그 댓글을 추가하고 편집할 수 있습니다.너는 더 이상 가격 인하 블로그 게시물 파일을 직접 편집할 필요가 없다.

결론

Netlify CMS는 스컬리 프로그램에 경량급 CMS를 설치할 수 있는 좋은 도구입니다.모든 코드는 하나의 코드 라이브러리에 존재할 수 있으며, 모든 내용은 태그 파일에서 직접 지원됩니다.그것을 당신의 사이트에 추가하는 데는 너무 많은 시간이 걸리지 않을 뿐만 아니라, 이 모든 것들 위에 경제적이고 효율적이다.
너는 this GitHub repo에서 하나의 예를 볼 수 있다