7 lines
8.5 KiB
JavaScript
7 lines
8.5 KiB
JavaScript
const p=s=>'<p>'+s+'</p>';const ul=xs=>'<ul>'+xs.map(s=>'<li>'+s+'</li>').join('')+'</ul>';
|
|
export default {
|
|
155:({a,img})=>p('Trilium은 용도에 따라 여러 노트 유형을 지원합니다. 기본 유형은 '+a(0,'텍스트')+'입니다.')+'<h2>다른 유형으로 새 노트 만들기</h2>'+p(a(1,'노트 트리')+'에서 기준 노트를 마우스 오른쪽 버튼으로 누릅니다. 다음에 노트 삽입은 같은 단계에 새 노트를 만들고 하위 노트 삽입은 선택한 노트 아래에 만듭니다.')+p(img(0,'노트 유형 선택'))+p(a(2,'링크')+'를 '+a(3,'텍스트 노트')+'에 추가할 때 새 제목을 입력하고 Enter를 누르면 유형을 선택할 수 있습니다. 새 탭에서도 같은 방법을 사용합니다.')+'<h2>기존 노트의 유형 변경</h2>'+p(a(4,'상단 리본')+'의 기본 속성에서 변경합니다. 보통 내용이 없는 노트에서 변경하는 것이 좋습니다. 유형 변경으로 '+a(5,'노트 소스')+'를 편집할 수도 있습니다.')+'<h2>지원하는 유형</h2>'+ul([a(6,'텍스트')+' — 글자 서식과 이미지 및 안내 상자를 지원합니다. 오른쪽에서 왼쪽으로 쓰기도 가능합니다.',a(7,'코드')+' — 고정폭 글꼴과 구문 강조를 사용합니다. 긴 코드나 일반 텍스트를 담기에 적합합니다.',a(8,'저장된 검색')+' — 검색어와 조건을 저장해 다시 실행합니다. 많은 노트를 빠르게 추릴 수 있습니다.',a(9,'관계도')+' — 노트와 노트 사이의 관계를 만듭니다. 가계도처럼 관계가 중요한 자료에 적합합니다.',a(10,'노트 지도')+' — 노트 사이의 관계와 상하위 구조를 보여 줍니다.',a(11,'렌더링 노트')+' — '+a(12,'스크립트')+'로 다른 노트의 HTML을 표시합니다. 스크립트로 생성한 동적 내용도 보여 줄 수 있습니다.',a(13,'책')+' — 하위 노트를 격자나 목록 또는 달력으로 보여 줍니다. 짧은 노트를 모아 읽기 좋습니다.',a(14,'Mermaid 도표')+' — 막대그래프와 순서도 및 상태도 등을 만듭니다. 도표를 전용 문법으로 작성해야 합니다.',a(15,'캔버스')+' — 스케치와 도표 및 손글씨를 그립니다. '+a(16,'Excalidraw')+'와 같은 기술을 사용합니다.',a(17,'웹 보기')+' — 브라우저처럼 외부 웹페이지를 표시합니다.',a(18,'마인드맵')+' — 생각을 계층 구조로 정리합니다.',a(19,'지리 지도')+' — 하위 노트를 지도에 표시합니다. 여행 계획에 활용할 수 있으며 경로 표시와 지도에서 노트 만들기도 지원합니다.',a(20,'파일')+' — 업로드한 PDF와 이미지 및 동영상과 음성 파일 등을 담습니다.']),
|
|
156:({a})=>p('관계는 '+a(0,'라벨')+'과 비슷하지만 텍스트 값 대신 다른 노트를 가리킵니다.')+'<h2>활용 방법</h2>'+ul(['책 노트와 저자 노트를 연결하는 등 자료의 관계를 나타냅니다. '+a(1,'주요 속성')+'으로 표시하면 더 편하게 사용할 수 있습니다.',a(2,'렌더링 노트')+'와 '+a(3,'공개 공유')+' 및 '+a(4,'템플릿')+'을 설정합니다.','노트의 이벤트나 조건에 맞춰 실행할 스크립트를 연결합니다.'])+'<h2>편집 화면에서 만들기</h2>'+p(a(5,'상단 리본')+'의 소유한 속성에서 더하기 버튼을 누르고 새 관계 추가를 선택합니다. 노트나 소유한 속성에 초점이 있을 때 Alt+L을 눌러도 편집 화면이 열립니다.')+p('관계 이름과 대상 노트를 지정합니다. 관계에는 대상 노트가 반드시 있어야 합니다. 하위 노트에도 적용하려면 상속 가능을 선택하세요. '+a(6,'속성 상속')+'을 참고하세요.')+'<h2>직접 입력하기</h2>'+p(a(7,'상단 리본')+'의 소유한 속성에서 <code>~myRelation=@</code>를 입력합니다. 자동 완성 목록에 대상 제목을 입력한 다음 Enter를 누르거나 원하는 노트를 선택합니다. '+a(8,'노트 트리')+'에서 노트를 복사했다면 <code>@</code> 없이 <code>=</code> 뒤에 붙여 넣을 수도 있습니다.')+p('상속 가능한 관계는 <code>~myRelation</code> 대신 <code>~myRelation(inheritable)</code>로 입력합니다.')+'<h2>미리 정의된 관계</h2>'+p('다음 관계는 Trilium에서 특별한 기능을 수행합니다. 이름 끝의 별표는 같은 접두사로 시작하는 여러 관계를 뜻합니다.')+ul(['<code>runOn*</code> — '+a(9,'이벤트')+'에 따라 스크립트를 실행합니다.','<code>template</code> — 상하위 관계가 없어도 속성을 상속합니다. 템플릿 규칙에 따라 비어 있는 인스턴스에 본문과 하위 트리를 추가합니다.','<code>inherit</code> — 상하위 관계가 없어도 속성을 상속합니다. 비슷한 개념인 '+a(10,'템플릿')+'과 '+a(11,'속성 상속')+'을 참고하세요.','<code>renderNote</code> — '+a(12,'렌더링 노트')+'에서 표시할 HTML 또는 스크립트 코드 노트를 가리킵니다.','<code>widget_relation</code> — 대상 노트를 실행하고 사이드바 위젯으로 표시합니다.','<code>shareCss</code> — 공유 페이지에 넣을 CSS 노트입니다. 해당 노트도 공유 하위 트리에 있어야 합니다. 필요에 따라 <code>share_hidden_from_tree</code>와 <code>share_omit_default_css</code>를 함께 사용합니다.','<code>shareJs</code> — 공유 페이지에 넣을 JavaScript 노트입니다. 해당 노트도 공유 하위 트리에 있어야 합니다. 필요하면 <code>share_hidden_from_tree</code>로 트리에서 숨깁니다.','<code>shareTemplate</code> — 공유 노트 표시용 템플릿으로 사용할 임베디드 JavaScript 노트입니다. 지정하지 않으면 기본 템플릿을 사용합니다. 필요하면 <code>share_hidden_from_tree</code>로 숨깁니다.','<code>shareFavicon</code> — 공유 페이지의 아이콘 노트입니다. 보통 공유 루트에 지정하고 상속 가능으로 설정합니다. 아이콘도 공유 하위 트리에 있어야 합니다. 필요하면 <code>share_hidden_from_tree</code>로 숨깁니다.']),
|
|
157:({a,img,pre})=>'<h2>기본 테마</h2>'+p('기본값은 밝은 테마입니다. 왼쪽 위 앱 메뉴에서 설정 → 모양을 열면 어두운 테마나 다른 테마로 바꿀 수 있습니다.')+p(img(0,'어두운 테마'))+'<h2>CSS로 테마 만들기</h2>'+p(a(0,'코드 노트')+'를 만들고 언어를 CSS로 지정합니다. '+a(1,'속성')+'에 <code>#appTheme=my-theme-name</code>을 추가합니다. <code>my-theme-name</code>은 원하는 테마 이름으로 바꿉니다. 본문에 다음과 같은 스타일을 작성합니다.')+pre(0)+'<h3>테마 적용</h3>'+p('설정 → 모양의 테마 목록에서 <code>#appTheme</code> '+a(2,'라벨')+'에 지정한 이름을 선택합니다. CSS를 수정한 뒤에는 Ctrl+R로 화면을 새로고침합니다.')+'<h3>공유와 가져오기</h3>'+p('원문에서 안내하는 테마 내보내기 형식은 <code>.tar</code>입니다. 외부 테마에는 실행 가능한 스크립트가 들어 있을 수 있으므로 신뢰할 수 있는 출처인지 확인하세요. 기본 예제에는 강철빛 파랑 테마가 있습니다.')+p(img(1,'강철빛 파랑 테마'))+'<h2>화면 일부에 CSS 적용</h2>'+p('테마와 별개로 특정 요소만 꾸밀 수도 있습니다. CSS '+a(3,'코드 노트')+'를 만들고 <code>#appCss</code> '+a(4,'라벨')+'을 추가한 다음 스타일을 작성합니다.')+pre(1).replace('Custom CSS to style specific elements','특정 화면 요소에 적용할 CSS').replace('Change tree item color','트리 항목의 글자색 변경')+p('앱 화면이 시작될 때 <code>appCss</code>가 지정된 모든 노트의 CSS를 불러옵니다. 수정한 뒤 Ctrl+R로 새로고침하세요.')+p(img(2,'노트 트리에 사용자 스타일 적용'))+'<h3>특정 노트 꾸미기</h3>'+p('<code>cssClass</code> '+a(5,'속성')+'의 값에 CSS 클래스 이름을 지정합니다. <code>iconClass</code>에는 '+a(6,'Box Icons')+'의 아이콘 클래스나 직접 만든 클래스를 지정할 수 있습니다. PNG 이미지 노트처럼 특정 유형에 적용하려면 <code>type-image mime-image-png</code> 같은 클래스를 사용합니다.')+'<h3>다른 사용자의 테마</h3>'+p(a(7,'테마 모음')+'에서 커뮤니티가 만든 테마를 살펴보세요.')+'<h3>기본 파일 경로</h3>'+p('기본 이미지 등을 참조할 때 버전 번호 대신 <code>vX</code> 별칭을 사용하면 업데이트에 대응하기 쉽습니다. 예를 들어 <code>/assets/v0.57.0-beta/images/icon-grey.png</code> 대신 <code>/assets/vX/images/icon-grey.png</code>를 사용합니다.')
|
|
};
|