옵시디언 Daily Note 템플릿 만들기 3 - Templater 플러그인 - 올럭Dev

Templater 플러그인을 사용해봅시다.

이전 포스팅에서 이어집니다.

tistory 링크 - 옵시디언 Daily Note 템플릿 만들기 1 - Calendar 플러그인
obsidian 링크 - 옵시디언 Daily Note 템플릿 만들기 1 - Calendar 플러그인

tistory 링크 - 옵시디언 Daily Note 템플릿 만들기 2 - Periodic Notes 플러그인
obsidian 링크 - 옵시디언 Daily Note 템플릿 만들기 2 - Periodic Notes 플러그인

목차

• Templater 플러그인 소개
• Templater 플러그인 설치하기
• Templater 플러그인 설정하기
• Templater 플러그인 사용해보기

Templater 플러그인 소개

javascript로 프로그래밍이 가능하게 도와줘, template를 동적으로 생성할 수 있도록 도와주는 플러그인 입니다.
이전 포스팅에서 Periodic Notes 플러그인을 사용하여 Daily Note 템플릿을 만들었었는데, 이번 포스팅에서는 이어서 Templater 플러그인에 Tasks 플러그인의 tasks 쿼리를 사용하여, 전날 작성한 Daily Note에서 미완료된 task들만 추출해주는 template을 만들어 보겠습니다.

Templater 플러그인 설치하기

커뮤니티 플러그인 사용 클릭 > 커뮤니티 플러그인 > 탐색 클릭> Templater 검색, 설치

Templater 플러그인 설정하기

플러그인 활성화하고, 몇 가지 설정들을 해보겠습니다.

• General Settings을 먼저 살펴 보겠습니다.
  

  • Template folder location : temaplate를 사용할 폴더를 지정합니다. (_tmeplate)
  • Syntax Highlighting : templater 문법의 텍스트 색상을 하이라이트 해줍니다. (활성)
  • Automatic jump to cursor : 커서 위치를 초기화해줍니다. (활성) (<% tp.file.cursor(0) %>로 파일이 열렸을 때 커서 위치를 정합니다.)
  • Trigger Templater on new file creation: 파일을 생성할때 templater의 문법을 컴파일 여부를 설정합니다. 이 설정이 활성이어야 DailyNote 템플릿을 동적으로 생성 할 수 있는 Folder Templates 설정이 아래 나타납니다. (활성) - 중요!
  • Show icon in sidebar : 왼쪽 사이드바에 templater 아이콘을 보여줍니다. (활성)

• Folder Templates 설정에 templater가 적용될 폴더와 템플릿 파일를 추가하겠습니다.
  

앞에는 templater로 생성될 파일이 위치할 폴더(diary/daily), 뒤에는 템플릿 파일(_template/daily.md)을 넣어 줍니다.

• User Script Functions를 사용하여 javascript 함수를 등록해 사용할 수 있습니다.
  
  • Script files folder location : javascirpt 파일을 모아둘 폴더를 설정합니다.

테스트할 폴더(_template/js)를 추가 해주겠습니다.

Templater 플러그인 사용해보기

Templater 가이드에 나와있는 문법 몇 가지를 알아보고, Tasks 쿼리를 사용하여 DailyNote 템플릿을 만들어 보겠습니다.
그리고 User Script도 한번 사용해볼게요!

테스트는 _template/daily.md 파일에 templater 문법을 작성하고, Calendar 플러그인 달력을 클릭하여 제대로 DailyNote가 제대로 만들어지는 확인해보겠습니다.

Templater 문법 알아보기

• 기본적으로 <% %> 태그 안에 감싸서 사용합니다.

 // start    <% tp.date.now("YYYY-MM-DD") %>    // end 	

날짜가 제대로 나오네요. tp.date는 templater에서 제공해주는 날짜 관련 함수입니다. 그 다음으로 간단하게 앞뒤 공백을 없애는 법을 알아보겠습니다.

• <%_ %> : 앞 공백 없애기

 // start    <%_ tp.date.now("YYYY-MM-DD") %>    // end 	

• <% _%> : 뒤 공백 없애기

 // start    <% tp.date.now("YYYY-MM-DD") _%>    // end 	

• <%_ _%> : 앞뒤 공백 없애기

 // start    <%_ tp.date.now("YYYY-MM-DD") _%>    // end 	

• <%+ %> : 미리보기 모드에서 바로 컴파일 결과를 확인할 수 있습니다.

 <%+ tp.date.now("YYYY-MM-DD") %> // 결과 : 2023-10-07

• **<%* %> : javascript 로직을 넣을 수 있습니다. **

	// start
	<%* if (tp.file.title.startsWith("Hello")) { %> 
	This is a hello file ! 
	<%* } else { %> 
	This is a normal file ! 
	<%* } %>
	// end

// start와 // end 사이에 templater 소스가 있던 곳에 여백이 생깁니다.
이어서 여백 없앨 수 있는 방법으로 변경해보겠습니다.

• <%* -%> : 명령어가 있던 줄을 없앱니다.

	// start
	<%* if (tp.file.title.startsWith("Hello")) { -%>
	This is a hello file !
	<%* } else { -%>
	This is a normal file !
	<%* } -%>
	// end

Templater Interal Function 사용해보기

저는 지금 사용 중인 tp.config.active_file.basename 이거 하나입니다.
파일명을 추출해주는 함수인데, 나머지는 나중에 필요할 때 알아보겠습니다.

• Templater 가이드에 Internal Functions 목록 입니다.
  

Templater로 Tasks 쿼리 동적으로 만들기

• Daily Note 템플릿에 Todo List 부분을 보겠습니다.
  
  헤더가 Todo List이고, 아래 샘플로 todo라고 Task가 하나 있습니다.
  이걸 기본 틀로 잡았고, 이 틀을 기준으로 전날에 완료되지 않은 Todo List를 표시해주도록 하겠습니다.

• _template/daily.md 파일 상단에 이전 날짜을 구하는 로직을 넣어 줍니다.

<%* 
	const yesterDay = moment(tp.config.active_file.basename, "YYYY-MM-DD ( ddd )")
				.subtract(1, "days").format("YYYY-MM-DD") 
-%>

DailyNote의 파일명이 캘린더 날짜로 생성되고 있고, 그 날짜를 기준으로 이전 날짜를 구하는 로직입니다.

• 그리고 템플릿 파일 제일 아래 부분에 위에서 구한 이전 날짜를 Tasks 쿼리 안에 넣어 줬습니다.

```tasks
not done
heading includes Todo List
path includes <% yesterDay %>
description does not include Todo
```
미완료 Task,
헤더가 Todo List 아래에 있는 Task,
파일 경로에 이전 날짜가 포함되어 있는경우,
Task 중에 Todo가 포함되어있지 않은 Task

이 부분은 각자 템플릿에 맞게 수정이 필요할 수도 있겠죠!!
Tasks 쿼리 포스팅도 있으니 확인해 보셔도 좋을 것 같습니다.
Tistory 링크 - 3. Tasks 플러그인 - Obsidian TODO 체크박스
Obsidian 링크 - 3. Tasks 플러그인 - Obsidian TODO 체크박스

• 잘 작동하는지 확인해보면, 의도한 쿼리 대로 잘 나오네요. 굳!!
  

Templater User Script 사용해보기

• _template/js/test.js 파일을 만들어 보겠습니다.

function my_function (msg) {
    return `Message from my script: ${msg}`;
}

module.exports =  my_function2;

• template에서는 tp.user.[파일명](인자)으로 사용하면 됩니다.

 // tp.user.[파일명](인자) 
 <% tp.user.test("Hello World!") %>

• 잘 나오네요. 굳굳!!
  

window 알림 표시하기

우연히 구글링하다가 찾은 건데 window 알림 기능 추가할 수도 있네요.

	<%* new Notification("No Daily Note Found!") -%>