🏠 home / 📮 posts / 📽️ project / 🏗️ this blog / 블로그 breadcrumb 추가, 바이브 코딩 실패

블로그 breadcrumb 추가, 바이브 코딩 실패

2025-11-20 zola
사실 블로그에 꼭 필요한 기능이었다. 왼쪽 목차 목록도 없는데, 경로까지 눈에 보이지 않으면 방문자 입장에서 내가 어디 있는지 알 수가 없었다. ㅋㅋㅋ

이번엔 chatgpt 나 grok말고, notebooklm에다가 zola공식문서를 전부 넣고 바이브 코딩 시도했다.

<div class="bread">
    {# 1. 조상 섹션(ancestors)을 순회하며 링크 생성 #}
    path=
    {% for ancestor_path in page.ancestors %}
        {# get_section을 사용하여 섹션 메타데이터를 가져옵니다. #}
        {% set parent_section = get_section(path=ancestor_path, metadata_only=true) %}
        
        {# 섹션 경로를 get_url로 변환하여 링크 생성 #}
        {% set link_url = get_url(path=ancestor_path) %}
        /
        <a href="{{ link_url | safe }}">
            {# 섹션 제목이 있다면 제목을 사용하고, 없다면 경로의 마지막 컴포넌트를 사용 #}
            {{ parent_section.title }}
        </a> 
    {% endfor %}/ {{ page.title }}
</div>

이게 준 코드이다. page.html과 section.html 둘 다 만들어야 하지만, 둘 다 개념은 같으므로 page기준 코드만 보겠다. page.ancestors 이 변수 알려준건 아주 중요한 일을 했다. 이거 알려면 zola공식문서를 거의 다 읽어봐야 겨우 알 수 있는 변수이다.

근데 이렇게 그대로 쓰면 에러난다. 404라고 링크가 깨진다. 부모 섹션들의 _index.md경로를 받은 후 섹션 객체를 받았다. 근데, 섹션 객체를 받아놓고 _index.md경로를 이용해서 link를 생성했다.😡😡

<div class="bread">
    {# 2. 현재 섹션의 조상(Ancestor)들을 순회하며 링크 추가 #}
    {# section.ancestors는 인덱스 섹션까지의 상위 섹션 경로 배열이며, get_section에 사용할 수 있습니다. [1] #}
    {% for ancestor_path in page.ancestors %}
    {# `ancestors` 배열의 첫 번째 항목은 인덱스 섹션(루트)이므로, 이미 처리된 루트 섹션을 건너뛸 수 있도록 조건을 추가합니다. #}
    {% if loop.index > 1 %}
    / 
    {% set parent_section = get_section(path=ancestor_path, metadata_only=true) %}
    <a href="{{ parent_section.permalink | safe }}">{{ parent_section.title }}</a>
    {% endif %}
    {% endfor %}/ {{ page.title }}
</div>

section객체를 받았으면 그냥 section.permalink를 링크로 쓰면 된다.

노트북lm마저 바이브코딩에 실패했다.
요즘 ai코딩 필수라는데, 나는 못하겠다. 왜 그렇지? ㅎㅎ
에러 나면 결국은 개발 시간이 비슷해지고, 개발자의 발전은 적다.