OPENMARU Docs작성 가이드
website/docs/openmaru_docs_guide/index 확인시 문법을 확인 할 수 있습니다.
작업을 시작하시기 전에 '캡쳐 이미지 원본 작업 파일'과 '매뉴얼 이미지 작업 진행 상황'을 확인해 주세요.
해당 내용을 반드시 확인해 주시고, 사진 화질을 꼭 신경써주세요.
MarkDown 작성법
Gist 마크다운(Markdown) 사용법
설명서 작성에 Markdown을 사용하는 방법 | Adobe Experience Cloud
docusaurus 작성 공식문서
Build optimized websites quickly, focus on your content | Docusaurus
오픈마루 문서 사이트 메뉴얼
description
---
description: OPENMARU Docs Guide
---
다음과 같이 작성시 아래와 같이 표현된다.
description: OPENMARU Docs Guide
<OMAPMBrandText/> 사용법
<OMAPMBrandText/> 해당 컴포넌트는 접속 도메인에 따라 제품명을 바꿔 보여줍니다. 제품명을 직접 적지 말고 이 컴포넌트를 쓰십시오.
<OMAPMBrandText/>
<OMAPMBrandImage/> 사용법
<OMAPMBrandImage/> 해당 컴포넌트는 접속 도메인과 테마(라이트/다크)에 따라 알맞은 이미지를 골라 보여줍니다.
<OMAPMBrandImage src='이미지경로' /> 로 작성할 수 있습니다.
예제코드
<OMAPMBrandImage src='/img/docs/apm-user-guide/010.intro/images/was_dashboard_ko.png' />
상기 이미지의 경로는 /img/docs/openmaru_docs_guide/openmaru.png 로 작성 되어있으나
이미지 자르기 예제
<OMAPMBrandImage src='/img/docs/apm-user-guide/020.was/images/serverInfo_ko.png' cut/>
이미지는 HD(1920x1080)기준에서 동작한다.
헤더가 보이는 화면에서는 필수이다.
실제 프로젝트 구조에선 `openmaru-docs/website/static/img/docs/apm-user-guide/020.was/images/serverInfo_ko.png' 경로에 저장되어 있습니다.
<OPENMARUBadge> 사용법
OMBadge List
- <OMCloudBadge/>
- <OMVersionBadge since='5.2.0-10.0.1'/>
- <OMInstallBadge/>
- <OMAPMBrandImage src='/img/working.png'/>
- <OMInstallBadge/>
클라우드 전용 뱃지
- 클라우드 전용
버전 전용 뱃지
- Since ver 5.2.0-10.0.1
설치 전용 뱃지
- 설치형 전용
브랜드 이미지
기본 CLI 명렁어
# Bash Code Block 으로 다음과 같이작성한다.
```{language}
들어갈 내용
``` 코드블럭은 이와 같이 작성할수 있다.
su -u khanapm
:::레벨::: 블럭을 사용한다.
중요하거나 꼭 알아야하는 정보는 :::레벨::: 블럭을 사용한다.
[NOTE][TIP][IMPORTANT][CAUTION][WARNING][ADMINISTRATION][AVAILABILITY][PREREQUISITES][ERROR][ADMINISTRATION][INFO][SUCCESS]
info
tip
important
컴포넌트화 시킨것은 Title에 들어가서는 안된다.
### 상기 예시에서 보이듯 <OMAPMBrandImage /> 과 같이 컴포넌트화 된것은
# 과 같이 제목으로 들어가는 부분에 기입되면 안된다.
(백틱) 으로 만든 코드블럭은 개행을 허용하지 않는다.
- 개행이 되어있는 예시
- 개행을 허용하지 않는 예시
디렉토리나 환경변수 작성시 강조처리
디렉토리나 환경변수에는 options=openamru , /img/path/image1 과 같이 강조 처리 되어야 한다. 해당 강조처리는 경로명/ 환경변수 Backtick `(백틱)으로 감싸면 적용가능하다
기존 이미지
상기와 같이 이미지에 한글이나 코멘트가 적혀있으나 리뉴얼 버전에선 ⓐ , ⓑ , ⓒ 와 같이 기호나 숫자를 표기하고 본문에 내용을 적는 방식을 채택해야 한다.
이미지 캡쳐
- 이미지 사이즈는
HD(1280x720)로 캡쳐한다. - 하지만 APM과 같이 화면에 정보가 많아
HD(1280×720)로 화면 이 깨지거나 정보 표현이 부족하다면HD(1920x1080)사이즈로 캡쳐한다.(F11하여 전체하면 캡쳐) - 이미지의 파일명은 영문으로 작성한다.
- 이미지의 확장자는 jpg가 아닌 png로 한다.
상기 이미지는 OPENMARU APM대시보드 이미지이다. 이미지 사이즈 1280x720
높이는 다소 차이가 있을 수 있다. 로고부분 영역이 안나오는 것 이 중요하다.
두 이미지의 차이점으로서는 Header 부분이 제거 되었다 다음과 같이 로고가 보이는 영역을 제거를 하고 캡쳐를 해야한다.
상기의 두 이미지는 전체적인 화면일 경우에만 적용되며 특정 부분의 화면일 경우에는 해당 부분만 캡쳐하여 사용한다.
<OMAPMBrandImage/> 사용법
<OMAPMBrandImage/> 은 오픈마루와 칵테일 등 다른 브랜드에 적용이 필요한 이미지에 사용한다.
<OMAPMBrandImage src='/img/docs/dashboard-user-guide/01.settings/01.start/tableSearch_ko.png'/>
src에는 확장자와 en , ko 등 언어와 관련된것을 제외 적어주면 된다.
tableSearch 해당 이미지는 실제 tableSearch_ko.png , tableSearch_en.png 와 같이 존재한다.
path에는 이미지의 경로를 적어주면 된다.
path='/img/docs/dashboard-user-guide/01.settings/01.start/' 마지막 슬래시의 경우 컴파일의 오류가 날수도 있다. 반드시 / 를 제거하고 사용하도록 한다.
cut 옵션은 더 이상 동작하지 않는다
Cocktail 브랜드의 로고 영역을 잘라내려고 두었던 옵션이다. 해당 제품을 더 이상 만들지 않으므로 값을 넣어도 아무 일도 일어나지 않는다. 새 문서에는 쓰지 않는다.
이미지의 네이밍 규직은
surfix -> ko , en 과 같이 언어를 붙여준다.
예시) dashboard_ko.png , dashboard_en.png와 같다.
브랜드마다 다른 화면은 파일명이 아니라 images-<브랜드>/ 디렉터리로 나눈다.
APM 이미지 캡쳐는 사내 개발서버인 192.168.80.190 / id : admin / pwd : ChangeMeFirst 를 이용 할 수 있다.