- 목차
- 목차란 블로그 글 등에서 보고 싶은 곳으로 바로 이동할 수 있도록 각 섹션으로의 페이지 내 링크를 정리한 것입니다. Webflow에서는 CMS 리치 텍스트를 분할해 ID를 붙이면 커스텀 코드 없이 만들 수 있습니다.
안녕하세요, 마사토입니다.
블로그 글을 쓰다 보니 “목차에서 보고 싶은 곳으로 바로 이동할 수 있으면 좋겠다”는 생각이 들었습니다. 그래서 이번에는 Webflow의 CMS를 사용해 링크 달린 목차를 만들어 봅니다.
그런데 이럴 수가… Webflow의 CMS 리치 텍스트 안에서는 페이지 내 링크를 만들 수 없습니다. 애초에 리치 텍스트 안에서는 ID를 붙일 수 없더군요. 그래서 이번에는 CMS로 만든 블로그 글에 어떻게든 CMS를 활용해 작업량을 최대한 줄인 “페이지 내 링크 달린 목차를 만드는 방법”을 소개합니다.
이번 방법을 대략 설명하면 리스트와 링크를 CMS 밖에서 만들고 나머지를 CMS로 만드는 방법입니다. CMS 안의 리치 텍스트를 분할하고 ID를 붙여 링크로 이동시킵니다.
Webflow 목차 만들기: 먼저 토대부터
이번에는 다음을 의식해 만듭니다.
- 추가 커스텀 코드를 쓰지 않는다
- Webflow 안의 기능만으로 완결한다
- 작업 공정을 최대한 줄인다
리스트를 추가해 제작 시작
리스트 아이템은 하나 만들면 복사해 5개로 늘려 둡시다.
※만들고 싶은 목차 수만큼 늘려도 OK. 나중에 각각 사용하게 됩니다.
CMS에서 섹션별로 분할
여기서 중요한 것은 이 2가지 항목↓
- Table of contents
“목차”입니다. 목차에 표시할 문장을 입력하는 필드입니다.
- Section1〜5
목차에서 이동시키기 위해 각 섹션에 ID를 붙입니다. 그것을 위한 항목입니다. 이미 블로그를 쓰고 있다면 섹션별로 분해해 봅시다.
텍스트에 ID 붙이기
CMS에서 리치 텍스트를 늘린 만큼 요소도 늘려야 합니다. 왜 분할해 늘리는가——바로 ID를 붙이기 위해서입니다. 늘린 리치 텍스트에 ID를 붙입시다.
ID 붙이는 법
ID는 오른쪽 위 톱니바퀴를 선택하면 맨 위에 나옵니다. 각 섹션에 CMS 필드와 같은 이름을 붙입시다(Table of contents 1〜5).
참고로 목차가 맨 위에 오는 것은 별로라서, H1과 리드문을 넣는 제목용 필드를 만들었습니다. 리치 텍스트는 합계 6개. 섹션 수를 더 원하는 분은 같은 방법으로 늘립시다.
남은 것은 각 설정을 만지기만
- 목차 텍스트에 CMS 반영
Table of contents를 순서대로 설정 - 링크를 페이지 내 ID로 이동하게 설정
각 Section을 설정 - 각 리치 텍스트에 CMS 설정
이것으로 페이지 내 섹션으로 이동하는 목차가 완성됩니다. 그런데 여기서 문제 하나.
“List” 자체는 CMS로 만들지 않았으므로 “섹션이 3개밖에 없다!”는 경우 빈 목차가 생겨 버립니다.
이 에러를 해소하는 설정이 “컨디셔널 비지빌리티(Conditional Visibility)”입니다.
여기서 설정하는 것은 “어떤 때 이 요소를 표시할 것인가”입니다. 위 사진의 설정은 “Table of contents 1에 입력이 있을 때 표시”로 되어 있습니다.
이 설정을 위에서부터 순서대로 1〜5까지 숫자를 맞춰 설정합시다. 그러면 입력이 없는 리스트는 표시되지 않아, 섹션이 3개일 때는 목차도 3개만 표시됩니다.
덤으로
목차 전체를 감싸는 DIV 블록에도 같은 설정을 하면 목차 없는 페이지 작성에도 도움이 됩니다. Table of contents에 아무것도 입력하지 않으면 되니까요.
이후 목차 배경을 바꾸거나 글자색·밑줄을 지우는 등 원하는 대로 스타일을 바꾸면 완성입니다.
문장 중간에 같은 페이지 내로 이동하는 링크는?
위 방법으로 CMS를 분할하면 가능하지만 상당히 번거롭습니다. 현재로서는 “간단히 설정하는 방법은 없다”고 생각합니다. 커스텀 코드를 쓰면 간단할 것 같긴 하지만요.
정리
이번 작업을 복습합시다.
- 리스트를 삽입해 토대 만들기
- CMS에 리스트 타이틀용 필드 작성
- CMS 콘텐츠를 섹션별로 분할
- 리치 텍스트에 ID 붙이기
- 리스트에 CMS의 링크·텍스트 반영
- 입력이 있을 때만 표시하도록 설정
- 리스트 스타일 변경
아직 글이 많지 않은 분이나 이제 블로그를 시작하는 분은 이 설정을 해 두는 것도 하나의 방법입니다.
※완성 예는 이 블로그의 목차입니다.
자주 묻는 질문
Webflow의 CMS 리치 텍스트 안에 페이지 내 링크를 만들 수 있나요?
리치 텍스트 안에서는 ID를 붙일 수 없어 그대로는 만들 수 없습니다. 리치 텍스트를 섹션별로 분할해 ID를 붙이면 CMS를 사용한 목차에서 링크로 이동시킬 수 있습니다.
커스텀 코드 없이 Webflow에 목차를 만들 수 있나요?
가능합니다. 리스트와 링크를 CMS 밖에서 만들고, CMS에 목차 텍스트용 Table of contents와 ID용 Section 필드를 준비해, 분할한 리치 텍스트에 CMS 필드와 같은 이름의 ID를 붙여 반영하는 방법입니다.
섹션이 적은 페이지에서 빈 목차가 생기면?
Conditional Visibility로 “입력이 있을 때만 표시” 설정을 각 리스트 아이템에 합니다. 목차 전체를 감싸는 DIV 블록에도 같은 설정을 하면 목차 없는 페이지 작성에도 도움이 됩니다.
문장 중간에 같은 페이지 내로 이동하는 링크는 만들 수 있나요?
CMS 리치 텍스트를 분할하면 가능하지만 상당히 번거롭습니다. 현재 간단히 설정하는 방법은 없고, 커스텀 코드를 쓰면 간단할 것으로 보입니다.
