igniteui docfx

UI DOCFX 사이트 빌더를 점화하십시오

이 프로젝트는 Node.js와 Gulp를 사용하여 구조 도구로 사용하여 앵글에 대한 Ignite UI를위한 Ignite UI DOCFX 샘플 사이트의 개발을 가속화합니다.

전제 조건

1. docfx
2. node.js
3. 순 SDK 6.0 이상

시작하기

docfx 설치

docfx를 설치하려면 Dotnet 도구로 복원 - 현재 디렉토리의 범위에있는 .NET 로컬 도구를 설치합니다.

dotnet tool restore

참고 : npm install 수행하면 DotNet 도구 종속성이 postinstall 단계로 복원됩니다.

node.js 종속성 설치 :

NPM을 사용하는 경우 실행하십시오.

npm install

원사를 사용하는 경우 실행하십시오.

yarn install

개발 서버 시작

빌드 프로세스는 환경 변수 NODE_ENV 에 따라 각도 샘플의 올바른 URL을 설정할 수 있습니다. NODE_ENV 에 development , staging 또는 production 할당하십시오.

예를 들어 환경을 할당하여 프로젝트의 루트 아래에서 .env 파일을 작성하고 NODE_ENV 설정할 수 있습니다.

 NODE_ENV=development

서버를 시작하려면 실행 :

영어 :

npm start -- --lang en

Japansese의 경우 :

npm start -- --lang jp

한국어 :

npm start -- --lang kr

명령은 adittional harment -lang [en | JP | KR]는 영어, 일본어 또는 한국 버전을 제공합니다.

정적 사이트 구축

영어 :

npm run build -- --lang en

일본어 :

npm run build -- --lang jp

한국어 :

npm run build -- --lang kr

빌드 스크립트는 각 프로젝트의 루트에서 _site라는 폴더를 생성합니다. 예를 들어, 영어의 경우 정적 사이트는 en/_site 아래에 있습니다.

준비 및 생산을위한 건축

빌드 명령은 위에서 언급 한 단계와 매우 유사합니다. 준비를위한 사이트를 구축하려면 실행 :

npm run build-staging --lang en

준비를위한 빌드 명령은 다음과 같습니다.

npm run build-production --lang jp

라이브 편집 샘플에 명시 적 편집기를 사용합니다

코드 뷰 요소의 명시 적 편집자 속성은 지정된 샘플에 대해 명시 적으로 라이브 편집기를 설정하고 "CSB"및 "stackblitz"를 값으로 지원할 수 있습니다.

 < code-view explicit-editor =" csb " ... > </ code-view > 

 < code-view explicit-editor =" stackblitz " ... > </ code-view > 

TOC 주제 레이블을 포함합니다

'[en | JP | kr] components toc.yml '특정 언어 버전의 파일. 각 TOC 주제에는 옵션 레이블 매개 변수와 함께 이름 및 HREF의 매개 변수가 포함됩니다. Igniteui-Docfx-Template의 버전 3.5.1에서 시작하여 지원되는 레이블에는 '새', '업데이트', '미리보기'및 '베타'가 포함됩니다. 원하는 레이블을 추가하려면 이름을 지정하고 그 값을 true로 설정하십시오.

예:

 - name: Update guide
  href: general/update-guide.md
  updated: true

접을 수있는 코드 스 니펫

문서 웹 사이트에서 접을 수있는 코드 스 니펫을 생성하고 표시하려면 다음을 수행하십시오.

1. 클래스 "Fancy-Details"로 <div> 섹션을 만듭니다.

2. 생성 된 <div> 섹션에 <summary> 요소를 추가하십시오.

3. 코드 스 니펫 헤더를 나타내는 요약 텍스트를 <summary> 요소에 추가하십시오.

4. 생성 된 <div> 섹션에 <code> 요소를 추가하십시오.

5. 코드 스 니펫을 <code> 요소에 추가하십시오.

6. 예:

 < div class =" fancy-details " >
    < summary > Example of a successful response body: </ summary >
    < code >
        {
            "id": "{123456}_repo",
            "modified": "2023-02-03T14:07:34.0000000",
            "created": "2023-02-03T14:07:34.0000000",
            "name": "Marketing",
            "user": {
                "id": "{123456}_u ",
                "name": "Teddy Mitkova"
            },
            "dashboardSections": [
                {
                    "id": "{123456}_f",
                    "name": "May"
                }
            ]
        }
    </ code >
</ div >