# Adding Prev & Next Button
#obsidian
> [!Objectives]
> Purpose: 날짜 기반으로 이전 / 다음 노트의 링크를 자동 생성해 Prev / Next 버튼으로 구현
> Components:
> 1. navPrevNext.js: User-script, Prev/Next 버튼을 반환 [source code(github)](https://github.com/Yonkim-Life/Obsidian/blob/main/navPrevNext.js)
> 2. writings-template.md: 노트 작성용 탬플릿
>>- Front-matter
>>- 본문
>>- Writings Index 목록으로 돌아가기
>
> Target Folder: Writings/ (동일 폴더 내 .md 파일끼리만 연결)
> Condition: 각 노트의 Front-matter에 `date: YYYY-MM-DD` 필드가 있음
---
## Rendering Examples
### Web
![[Obsidian_navPrevNext1.png]]
### Mobile
![[Obsidian_navPrevNext2.png]]
# 1. Project Layout
```bash
(Obsidian Vault root dir)
└─ Templates
└─ Scripts
└─ navPrevNext.js # ① User-script
Templates/
└─ writings-template.md # ② Note template
Writings/
└─ A.md · B.md · C.md … # ③ 실제 노트
```
---
# 2. `navPrevNext.js`
| 항목 | 내용 |
| --------- | ----------------------------------------------------------------- |
| **역할** | 같은 폴더 안 날짜(`date`) 필드를 기준으로 Prev/Next 링크 테이블 반환 |
| **입력** | (자동) `tp` 객체(자동) 활성 파일 `TFile` |
| **출력** | Markdown 표 문자열(Prev/Next 링크 포함 |
| **핵심 로직** | 1) 현재 폴더 파일 수집 → 2) `date` 기준 정렬 → 3) 인덱스 위치 파악 → 4) 링크 문자열 구성 |
| **에러 처리** | - date 없는 파일 제거<br>- 활성 파일 미존재 시 빈 문자열 반환 |
| **+** | - 하위 폴더까지 포함하려면 `parent.path` 필터 제거<br>- `KEY` 값 변경으로 다른 정렬 기준 지원 |
```js
// 핵심 코드 스니펫
module.exports = async (tp) => {
const KEY = "date";
const curDir = app.workspace.getActiveFile().parent.path;
const files = app.vault.getMarkdownFiles()
.filter(f => f.parent.path === curDir)
.map(f => { /* ... */ })
.filter(Boolean)
.sort((a, b) => a.time - b.time);
/* Prev/Next 계산 후 테이블 반환 */
};
```
---
# 3. Markdown 탬플릿 (`writings-template.md`)
## 3.1 Front-matter
```yaml
---
date: <% tp.date.now("YYYY-MM-DD") %> # 노트 생성 시 현재 날짜를 자동으로 삽입
tags:
- writings # 카테고리 분류용
---
```
## 3.2 본문 구조
```yaml
<%* tR += await tp.user.navPrevNext() %> # 상단 네비게이션 삽입
#(tag)
- creation date: <% tp.frontmatter.date %> # 작성일 표시
- author: yonkim
# <% tp.file.title %> # tp.file.title로 파일명을 H1로 표시
---
- [[Return to list]]
<%* tR += await tp.user.navPrevNext() %> # 하단 네비게이션 삽입
```
---
# 4. Expected Behaviour
| 파일(frontmatter.date) | Prev 표시 | Next 표시 |
| --------------------- | ------- | ------- |
| `A.md` (`2025-06-01`) | — | `[[B]]` |
| `B.md` (`2025-06-15`) | `[[A]]` | `[[C]]` |
| `C.md` (`2025-06-30`) | `[[B]]` | — |
---
# 5. Setup Guide
1. [Templater by SilentVoid 설치](https://obsidian.md/plugins?id=templater-obsidian) (Obsidian Community Plugin)
2. User Script 폴더 경로 확인 후 해당 경로에 navPrevNext.js 저장: [source code(github)](https://github.com/Yonkim-Life/Obsidian/blob/main/navPrevNext.js)
3. Template 폴더에 writings-template.md 저장
4. Writings/ 폴더에서 새 노트 생성 시 탬플릿이 적용되며 tp.user.navPrevNext()를 호출
---
# 6. Next Enhancements
- `date` 필드가 같은 날짜일 경우 다중 파일 정렬 우선순위 지정
- 역순 네비게이션(최신 → 과거) 토글 옵션
- 자동 index 생성 스크립트 연동