Cloudwiki/설정/사이드바 푸터 커스터마이징

# 개요

Clouwiki가 지원하는 사이드바/푸터 커스터마이징 방법에 대해 다룹니다.
모든 사용자에게 표시할 텍스트 또는 관련된 외부 링크를 표시할 수 있습니다.

# 방법

## 내용 제작

https://vialinks.xyz/components-json-builder
에 접속한 뒤, 헤더와 사이드바를 원하는 대로 제작하고, 스크롤을 내려 결과물 json 코드를 복사합니다.

기존 사이드바 / 푸터 내용을 불러와 수정하고 싶은 경우, 하단 json 창에 기존 내용을 붙여넣으세요.

## 적용 및 배포

Github 레포지토리 또는 로컬에서 `wrangler.toml` 파일을 찾아 열고,

```
SIDEBAR = """

"""
FOOTER = """

"""
```

부분을 찾은 뒤, `SIDEBAR`, `FOOTER` 값에 방금 복사한 json 코드를 붙여넣고 저장하세요.

Github와 Cloudflare Workers가 연동된 경우, 파일이 저장되었을때 자동으로 배포됩니다.
로컬에서 작업한 경우, 프로젝트 폴더의 루트 경로에서 터미널을 열고 `npx wrangler deploy` 를 입력해 배포합니다.

배포는 보통 1~2분 이내에 완료됩니다.

# 사이드바 모드 선택

문서 조회 페이지에 표시되는 사이드바의 레이아웃은 `wrangler.toml` 의 `SIDEBAR_MODE` 환경변수로 전환할 수 있습니다. 위에서 다룬 `SIDEBAR` 커스텀 항목(헤더·링크·텍스트·구분선)과는 별개로 동작하며, 모드와 관계없이 커스텀 항목은 모바일 햄버거 메뉴 등에서 계속 사용됩니다.

```
SIDEBAR_MODE = "default"
```

| 값 | 우측 사이드바 | 좌측 사이드바 | 본문 상단 인라인 목차 카드 |
| --- | --- | --- | --- |
| `"default"` (기본값) | 실시간 트렌딩 + 최근 변경 + 커스텀 항목 | 없음 | 표시 |
| `"left-toc"` | 데스크탑(≥992px) 폭에서 숨김. 트렌딩/최근 변경은 본문 하단 2열 그리드로 이동 | 현재 문서 목차를 sticky 로 표시 | 표시하지 않음 |

`"left-toc"` 모드의 동작 상세:

* 문서 조회 페이지(`#articlePage`) 에만 적용됩니다. 검색·리비전·블로그·관리자 등 다른 페이지의 우측 사이드바는 그대로 유지됩니다.
* 현재 문서에 헤딩이 없으면(홈·카테고리 목록·404·비공개 등 포함) 좌측 목차 사이드바 자체를 숨겨 본문이 전폭을 사용합니다.
* 모바일(≤991.98px) 폭에서는 우측 사이드바의 오프캔버스 햄버거 메뉴 접근성을 보존하기 위해 `display:none` 을 적용하지 않습니다. 트렌딩/최근 변경은 JS 가 본문 하단으로 이동시키므로 모바일에서도 본문 아래에서 자연스럽게 노출됩니다.

배포는 보통 1~2분 이내에 완료됩니다.

# 주의사항

사이드바와 푸터에 html태그나 스크립트를 삽입하는것은 지원되지 않습니다.

`제목` 구성요소는 사이드바에서만 사용 가능합니다. `제목` 구성요소가 포함된 json 코드를 푸터에 붙여넣는 경우 오류가 발생합니다.

구글 광고 등 스크립트 삽입이 필요한 경우, [[Cloudwiki/설정/스크립트 삽입]] 문서를 참고하세요.

링크 삽입시 복사+붙여넣기를 사용하세요. 특수문자나 한글이 포함된 링크를 직접 작성시 문제가 발생할 가능성이 있습니다.