Angular 및 Scully 문서 웹 사이트

올해 8월에 나는 코치로서 대형 각도 회의https://ngconf.co/에 참가할 것이다.나는 이것에 대해 매우 흥분했고 이미 과정을 하나로 통합시켜 내가 각도 설명도 방면의 모든 지식을 다른 개발자에게 전파했다.
2019 관상바이러스 질병으로 인해 이것은 특수한 세미나가 될 것이다. 왜냐하면 나는 출석할 수 없을 뿐만 아니라, 반드시 전부 온라인이어야 하기 때문이다.나는 그것을 어떻게 충분히 활용할 것인가를 생각하고 있었는데, 나는 갑자기 과정을 가지런히 기록하는 것이 가장 좋은 선택이라는 것을 깨달았다.
좋은 문서 플랫폼이 많지만, 그 중 일부는 비용을 지불한다.문서를 위한 정적 페이지 생성기도 있지만 다른javascript 프레임워크에서 작성되었습니다.

나는 내 자신의 사이트를 각도에 쓰고 싶다.

이제 나는 그것을 가질 수 있다!그래서 해냈어.
나는 일반적인 동적 각도 응용 프로그램이 있을 수 있는데, 왜 그렇지 않습니까?하지만 문서하면...내가 정말 그것을 필요로 합니까?
답이 아닐 수도 있어!하지만, 나는 확실히 약간의 요구가 있다.

코드 세그먼트를 붙이거나 github Gist

를 끼워 넣고 싶습니다.

나는 수동이 아니라 자동으로 자신의 동적 내비게이션을 업데이트하기를 바란다

나는 모든 새로운 내용 페이지를 쉽게 만들고 싶다

자동화나 프로그래밍을 바탕으로 새로운 콘텐츠를 끊임없이 배치하고 통합하고 싶다

뿔+사고려 구원!

모르면 2019년 12월부터.Angular에는 전용 정적 사이트 생성기Scully.io가 있습니다.정적 사이트 생성이 왜 당신과 당신의 사이트 성능에 좋은지 모르겠다면 this video 를 보십시오.나는 이곳에서 많은 과장된 전략과 장단점을 설명했다.
실행을 통해 모든 각도의 응용 프로그램에 Scully with schematics/CLI를 쉽게 설치할 수 있습니다

$ ng add @scullyio/init

여기 있습니다!

선결 조건

등등, 최소한 버전 8에 Angular와 CLI가 있고 10 이상의 node 버전을 실행하고 있는지 확인해야 합니다.
물론 응용 프로그램에서 라우터를 활성화해야 합니다. *Scully가 라우팅을 일반 경로에 매핑하기 때문입니다.**
지금--네, 여기 있습니다!

내장된 contentFolder 플러그인과 markdown 플러그인을 사용합니다.

다음은 docs 라는 새 모듈을 만들 것입니다.

$ ng generate module docs --route=docs --module=app-routing

경탄했어
지금 우리는 문서를 보러 간다.구성 부분html 템플릿, 강제 Scully injection 태그 추가

<scully-content></scully-content>

아름다웠어
동적 측면 탐색을 유지하기 위해 sidenav 이라는 추가 구성 요소를 만들 것입니다

측면 탐색, 중요

이 구성 요소를 생성하면 ScullyRoutesService 를 사용하여 모든 문서의 목록을 저장합니다.그것은 마땅히 이렇다. 우리는 $available 발표한 경로를 이용한다.

이 서비스는 기본적으로 Scully가 HTML 페이지를 생성할 때 생성된 /src/assets/scully-routes.json

현재 문서를 저장하기 위해 시퀀스 테이블을 만들 수 있습니다...좋아요.순서🤷🏽‍♀️

Configure Scully

이건 대단한데, 사고려는 이것에 대해 아무것도 몰라!Scully를 설치할 때, 프로그램 루트 디렉터리에 프로필을 생성합니다.찾아라!이렇게 편집합니다

정적 페이지를 만들 준비가 되었습니다

Create more awesome stuff!

Scully를 처음 실행하여 docs 컨텐트 폴더를 만듭니다.

용

$ npm run scully

사고려를 처음 운영하면 첫 번째 직위를 만들 수 있습니다.이것은 schematics 빈 폴더를 만들 수 없기 때문입니다

우리로 하여금 더 많은 것을 창조하게 하고, 어떻게 배우게 하는가

이 동작을 수동으로 실행할 필요가 없습니다.그건 너무 심심해!CLI로 이동하여 실행

$ ng generate @scullyio/init:post

이것은 당신의 post (이 예에서doc) 및 옮겨야 할 폴더의 이름을 선택하라는 것을 알려 줍니다.폴더로 선택docs

당신이 이렇게 할 때, 당신은 신기한 발생을 보게 될 것이다.루트 수준에서 docs 폴더를 찾으면 최소 2개의 태그 (.md) 파일을 볼 수 있습니다.파일 이름 중 하나는 생성 날짜입니다.두 번째는 당신이 만든

Markdown has its config, too!

이 파일들도 이런 설정이 있을 것이다

YAML 구성입니다.이것은 귀하post의 제목, 설명 및 상태를 나타냅니다(발표됨/발표되지 않음).정적 파일에 비추는 slug의 추가 경로를 설정할 수 있습니다. 아래와 같습니다

SEO 친화적이거나 향상된 URL을 제공하기 위해 사용할 수 있습니다

Gists in the markdown

하지만 당신의 요구는 당신의 문서에 코드가 있다는 것입니다

맞다너는 할 수 있어

그래, 네가 익숙한 액체 라벨이 아닐지도 몰라!적어도 아직은 아니야.이것은 나의 현재 임무이다🚀

하지만 정적 페이지에gist를 삽입할 수 있습니다.각도만 비활성화하면

Excuse me? Disable Angular?

네!잘 읽었어!Angular를 완전히 비활성화하여 초고속 정적 HTML 렌더링을 수행할 수 있습니다.가격 인하에 스크립트 삽입;)

우선, 나의 GDE 친구가 이 사용자 정의 플러그인을 설치합니다.

$ npm install scully-plugin-disable-angular --save-dev

그리고 설정을 업데이트해서 이 플러그인을 이 루트에 사용합니다.네, 맞아요!너는 다른 어느 곳에서든 완전한 동적 응용 프로그램을 가질 수 있지만, 문서를 시작할 수 없다

완성

현재 실행

$ ng build --prod --stats-json

이 플러그인은bundlestats를 사용하여 무엇을 사용하지 않는지 알 수 있습니다.마지막, 실행

$ npm run scully -- --scanRoutes

및 생성된 최신 내용 또는 노선 가져오기

Local Server Scully

정적 문서 사이트의 로컬 버전을 로컬에서 실행할 수 있다는 것을 잊지 마세요!너는

$ npm run scully serve

정적 서버는 1668 포트에서 실행됩니다(기본적으로 동적 각도 분포는 1868년에 실행됩니다)

Netlify your docs!

나 있어!보시다시피 this site live here 이것은 개념적 증명입니다. 다른 것은 아무것도 없습니다. 그러나 이것은 당신이 시작하는 데 도움을 줄 수 있습니다

지금 제 코드lives here in this repo 때문에 제가 밀어낼 때마다 CI/CD가 이 작업을 완성했습니다. 제 문서 사이트는 최신

네, 기본적인 전단입니다. 알고 있습니다. PoC가 그렇습니다;)...너는 포크로 포크를 해서 그것을 더욱 좋아지게 할 수 있다.즐겁게 놀아요

너도 내가 여기서 그것에 대해 이야기하는 것을 볼 수 있어

<br>