[사용자 지정 코드 없음] Webflow를 사용하여 가장 쉬운 목차를 만드는 방법

Webflow용 목차 만들기: 기초 구축부터 시작

기본적으로 웹 사이트를 만드는 방법에는 여러 가지가 있습니다.

이번에는 다음과 같은 점을 염두에두고 만들어 볼까 합니다.

• 추가 사용자 지정 코드를 사용하지 마세요
• Webflow 내의 기능만으로도 완벽합니다.
• 작업 프로세스를 최대한 줄이십시오

목록 추가 및 생성 시작

기초 부분부터 시작하겠습니다.

• 네비게이터를 참조로 사용하여 요소를 어셈블합니다.

목록 항목 1개를 만든 후 이미지에 표시된 대로 복사하고 5로 늘립니다.
※목차는 원하는 만큼 만들 수 있습니다.나중에 각각 사용할 수 있습니다.

웹플로우를 위한 목차 만들기: CMS를 사용하여 섹션으로 나누기

다들 어떤 블로그 CMS를 사용하고 계신지 궁금하고 거기에 따라서 만드는 방법도 조금씩 바꾸는 것이 좋을 것 같지만 일단은 '잘 모르겠다' 하는 사람을 흉내내서 만들어 보세요.

여기서 중요한 것은 이 두 가지 항목↓

• 목차
  이것은 일본어로 “목차”입니다.웹에서 만든 기본 코드는 영어로 되어 있으므로 여기서도 영어가 사용됩니다.
  목차에 표시할 문장을 입력하기 위한 필드입니다.

• 섹션 1-5
  목차로 건너뛰기 위해 각 섹션에 ID가 첨부되어 있습니다.해당 용도의 항목입니다.
  이미 블로깅을 하고 있다면 섹션별로 나누어 보세요.

텍스트에 ID 추가

CMS에서 리치 텍스트 수를 늘리면 요소 수도 늘려야 합니다.왜 나누어서 늘리나요? 정확히 말이에요.신분증을 첨부하기 위해서입니다.늘어난 리치 텍스트에 ID를 추가해 보겠습니다.

신분증 첨부 방법

“아이디 첨부 방법을 모르겠다”는 분들도 계실 수 있어서 그냥 소개해 드리겠습니다.(저도 처음에 찾아봤어요)

ID로 오른쪽 상단 톱니바퀴를 선택하면맨 위에 나옵니다.각 섹션에 CMS 필드와 같은 이름을 지정해 보겠습니다.(목차 1~5)

그나저나 목차가 맨 위에 있으면 저한테는 징그러울 것 같아서 H1과 선행 문장을 포함하도록 제목 필드를 만들었습니다.총 6개의 풍부한 텍스트가 있습니다.더 많은 섹션을 원하면 같은 방법으로 섹션을 늘리세요.섹션을 많이 만들어도 디자인에는 문제가 없습니다.(무거워질 수 있는 것도 있겠지만 괜찮을 것 같습니다) 블로그에 맞는 번호를 설정해 봅시다!

이제 남은 것은 각 설정을 가지고 노는 것뿐입니다.

• 목차 텍스트에 CMS 반영
  목차를 순서대로 설정
• 페이지 ID로 이동하도록 링크 설정
  각 섹션 설정
• 각 리치 텍스트에 대한 CMS 설정
  

이제 페이지 내 섹션으로 이동할 수 있는 목차를 만든 것 같습니다.하지만 여기에는 한 가지 문제가 있습니다.

“리스트” 자체는 CMS로 만든 것이 아니기 때문에
“섹션이 3개뿐입니다!”이 경우빈 목차가 생성됩니다.。

이 오류를 해결하기 위한 설정은 무엇입니까?
‍“조건부 가시성”
‍가타카나로 글을 쓰는 건 좀 우스꽝스럽죠?

간단히 말해서, 아래

그 안에설정할 수 있는 함수는 “이 요소를 표시할 시기”입니다.。위 사진의 설정에서 “목차 1에 입력이 있을 때 표시”‍설정했습니다.

1부터 5까지의 숫자를 위쪽부터 순서대로 조합하여 이 설정을 설정해 보겠습니다.(예: list2에 목차 2를 설정합니다.)
해당 설정을 하면 입력이 없는 목록은 표시되지 않습니다.섹션이 3개인 경우 목차가 3개만 표시되도록 설정할 수도 있습니다.

더 뭐야

전체 목차를 둘러싼 DIV 블록에 동일한 설정을 지정하여 목차가 없는 페이지를 만들 때도 유용합니다.이런 경우에는 목차에 아무 것도 입력하지 않아도 되기 때문에 간편합니다.

그런 다음 목차의 배경을 바꾸고 글자의 색과 밑줄을 제거하고 CSS 함수를 사용하여 스타일을 원하는대로 변경하면 끝입니다.

문장 중간에 같은 페이지로 이동하는 링크를 만들 수 있나요?

위에서 설명한 방법을 사용하여 CMS를 분할하여 이를 수행할 수 있습니다.하지만 문장을 CMS 리치 텍스트로 분할해야 하기 때문에 상당히 번거롭습니다.지금은 “쉽게 설정할 수 있는 방법이 없다”고 생각합니다.(있으면 알려주세요)

하지만 커스텀 코드를 사용하면 쉽게 할 수 있을 것 같습니다 (웃음).언젠가 커스텀 코드에 대한 글을 쓸 테니 기다려 주세요.먼저 노코드를 최대한 활용할 수 있는 방법을 찾고 싶습니다.

요약하다

이번에 만든 작품을 복습해 보겠습니다.

• 목록을 삽입하여 기초 만들기
• CMS에 목록 제목을 넣을 필드 만들기
• CMS 콘텐츠를 섹션으로 분할
• 코드 화면에 리치 텍스트 삽입 및 ID 추가
• CMS 함수 링크 및 텍스트를 목록에 반영
• 목록에 입력이 있는 경우에만 표시되도록 설정
• 목록 스타일 변경

아직 글이 많지 않은 분들이나 블로그 개업을 앞두고 계신 분들께는 이 설정을 해보는 것도 하나의 방법이 될 것 같습니다.사용자 지정 코드를 사용하고 싶으시면 조금만 기다려주세요.커스텀 코드를 사용하면 '인터넷에 공개하기 전까지는 효과를 볼 수 없다', '레벨이 조금 올라간다' 등의 것들이 있어서 지금은 노코드를 최대한 활용하고 싶습니다.

다음 번에는 “CMS 리치 텍스트로 문자 색상 변경 및 문자에 컬러 밑줄 그리기”를 제공할 예정입니다.링크를 만드는 것보다 훨씬 쉽습니다.슈퍼 파워 플레이그거야.저한테는 “이것도 괜찮아요!”저는 그렇게 생각해요.(SEO 등에 영향을 미칠 수 있습니다...)

우리 모두 최선을 다합시다.피곤할 땐 좀 쉬자.수고하신 일을 보고해 주시면 감사하겠습니다.저도 최선을 다할게요.나중에 봐요.

※완성된 그림은 이 블로그의 목차입니다.

‍

추가 정보는 무료 이메일 뉴스레터를 통해 안내해 드리겠습니다.

WEBFLOW 전문가로 비즈니스를 하고 있는 쿠리타 본인이 실제로 사용해본 경험이 있으며, 편리하다고 느꼈던 웹플로 사용 방법, 사업 계획, 경험, 프로세스 등에 대한 정보를 전파하고 있습니다.필요하지 않은 경우 1초 만에 빠르게 해독할 수 있습니다.다음으로 1천만 건의 매출을 목표로 하고 있습니다.