정리용 블로그

Tags

10 분 소요

Jekyll 블로그에 태그 시스템을 추가하는 방법을 단계별로 설명하겠습니다. 이 가이드를 따라하면 블로그 포스트를 태그로 분류하고, 태그별 페이지를 자동으로 생성할 수 있습니다.

Jekyll 블로그의 태그 시스템 원리 이해하기

Jekyll은 정적 사이트 생성기로, 마크다운 파일을 HTML로 변환하여 웹사이트를 만듭니다. 태그 시스템은 이러한 Jekyll의 작동 방식을 활용하여 구현됩니다.

1. 태그 데이터 수집

  • Jekyll은 각 포스트의 Front Matter에서 태그 정보를 읽어들입니다.
  • 이 정보는 site.tags라는 전역 변수에 저장되며, 각 태그별로 관련 포스트들이 자동으로 그룹화됩니다.
  • Front Matter의 tags 필드는 YAML 배열 형식으로 작성되며, Jekyll이 빌드 시점에 이를 파싱합니다.

2. 태그 페이지 생성 과정

  • _plugins폴더에 tag_generator.rb 파일을 생성한다.
  • tag_generator.rb 플러그인은 사이트가 빌드될 때 실행됩니다.
  • 포스트에서 사용된 모든 태그를 감지하고, 각 태그별로 별도의 페이지를 자동 생성합니다.
  • 생성된 페이지는 Jekyll의 페이지 생성 파이프라인을 통해 처리됩니다.
  • 이 과정에서 Liquid 템플릿 엔진이 동적으로 태그별 포스트 목록을 생성합니다.

3. 레이아웃과 템플릿 시스템

  • Jekyll의 Liquid 템플릿 엔진을 사용하여 태그 페이지를 동적으로 구성합니다.
  • {% for %} 등의 Liquid 태그로 태그별 포스트 목록을 생성합니다.
  • 이는 빌드 시점에 실행되어 정적 HTML로 변환됩니다.
  • 레이아웃 파일은 재사용 가능한 템플릿을 제공하여 일관된 디자인을 유지합니다.

4. 사이드바와의 통합

  • _data/navigation.yml의 구조는 Jekyll의 데이터 파일 시스템을 활용합니다.
  • 이 데이터는 site.data.navigation으로 접근할 수 있으며, 템플릿에서 동적으로 메뉴를 생성하는 데 사용됩니다.
  • YAML 형식의 데이터 파일은 Jekyll이 빌드할 때 자동으로 로드되어 전역 변수로 사용됩니다.

이러한 방식으로 Jekyll은 정적 사이트임에도 불구하고, 동적인 태그 시스템을 구현할 수 있습니다. 모든 처리는 빌드 시점에 이루어지므로, 실제 서비스되는 웹사이트는 빠르고 안정적으로 동작합니다.

1. 태그 페이지 생성하기

먼저 태그 목록을 보여줄 메인 페이지를 생성합니다.

/tags/index.html 파일을 생성하고 다음 내용을 추가합니다:

---
layout: default
title: Tags
author_profile: true
sidebar:
  nav: "categories"
---

<div id="main" role="main">
  {% include sidebar.html %}

  <div class="archive">
    <h1 class="page__title">Jekyll 블로그에 태그 시스템 추가하기</h1>
    
    {% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
    {% assign tags_list = site_tags | split:',' | sort %}

    <div class="entries-{{ entries_layout | default: 'list' }}">
      {% for item in (0..site.tags.size) %}{% unless forloop.last %}
        {% capture this_tag %}{{ tags_list[item] | strip_newlines }}{% endcapture %}
        <div class="tag-group">
          <h2 id="{{ this_tag }}" class="archive__subtitle">{{ this_tag }}</h2>
          {% for post in site.tags[this_tag] %}
            <div class="list__item">
              <article class="archive__item">
                <h3 class="archive__item-title no_toc">
                  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
                </h3>
                <p class="archive__item-excerpt">
                  <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%Y-%m-%d" }}</time>
                </p>
              </article>
            </div>
          {% endfor %}
        </div>
      {% endunless %}{% endfor %}
    </div>
  </div>
</div>

2. 태그 레이아웃 생성하기

개별 태그 페이지의 레이아웃을 정의하기 위해 /_layouts/tag.html 파일을 생성합니다:

---
layout: archive
---







<div id="main" role="main">
  
  <div class="sidebar sticky">
  


<div itemscope itemtype="https://schema.org/Person" class="h-card">

  

  <div class="author__content">
    <h3 class="author__name p-name" itemprop="name">
      <a class="u-url" rel="me" href="https://gityeop.github.io/" itemprop="url">gityeop</a>
    </h3>
    
      <div class="author__bio p-note" itemprop="description">
        <p>정리용 블로그</p>

      </div>
    
  </div>

  <div class="author__urls-wrapper">
    <button class="btn btn--inverse">팔로우</button>
    <ul class="author__urls social-icons">
      
        <li itemprop="homeLocation" itemscope itemtype="https://schema.org/Place">
          <i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i> <span itemprop="name" class="p-locality">Korea</span>
        </li>
      

      
        
          
        
          
        
          
        
          
        
          
        
          
        
      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      <!--
  <li>
    <a href="http://link-to-whatever-social-network.com/user/" itemprop="sameAs" rel="nofollow noopener noreferrer me">
      <i class="fas fa-fw" aria-hidden="true"></i> Custom Social Profile Link
    </a>
  </li>
-->
    </ul>
  </div>
</div>

  
    
      
      
      
    
    
      <nav class="nav__list">
  
  <input id="ac-toc" name="accordion-toc" type="checkbox" />
  <label for="ac-toc">토글 메뉴</label>
  <ul class="nav__items">
    
      
      
        <li>
          
            <span class="nav__sub-title">Programming</span>
          

          
          <ul>
            
              <li><a href="/datastructure-and-algorithm/">Data Structure and Algorithm</a></li>
            
              <li><a href="/python-basic/">Python 기본 문법</a></li>
            
          </ul>
          
        </li>
      
        <li>
          
            <span class="nav__sub-title">AI</span>
          

          
          <ul>
            
              <li><a href="/machine-learning/">Machine Learning</a></li>
            
              <li><a href="/math-for-ml/">인공지능을 위한 수학</a></li>
            
          </ul>
          
        </li>
      
        <li>
          
            <span class="nav__sub-title">기타</span>
          

          
          <ul>
            
              <li><a href="/github-blog/">Github Blog</a></li>
            
              <li><a href="/productivity/">생산성</a></li>
            
          </ul>
          
        </li>
      
    
  </ul>
</nav>

    
  
  <div class="sidebar-section">
      <h3><a href="/tags/">Tags</a></h3>
  </div>
  </div>



  <article class="page" itemscope itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="LangChain 튜토리얼 가이드">
    <meta itemprop="description" content="랭체인 튜토리얼">
    <meta itemprop="datePublished" content="2024-11-22T00:00:00+00:00">
    

    <div class="page__inner-wrap">
      
        <header>
          <h1 id="page-title" class="page__title" itemprop="headline">
            <a href="https://gityeop.github.io/machine-learning/LangChain-Tutorial.md/" itemprop="url">LangChain 튜토리얼 가이드
</a>
          </h1>
          

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          2 분 소요
        
      </span>
    
  </p>


        </header>
      

      <section class="page__content" itemprop="text">
        
        <!-- TOC -->

<ul>
  <li><a href="#langchain-%EC%86%8C%EA%B0%9C">LangChain 소개</a></li>
  <li><a href="#%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%84%B1-%EC%9A%94%EC%86%8C">기본 구성 요소</a>
    <ul>
      <li><a href="#llmchat-models">LLM/Chat Models</a>
        <ul>
          <li><a href="#groq-%EC%82%AC%EC%9A%A9">Groq 사용</a></li>
          <li><a href="#openai-%EC%82%AC%EC%9A%A9">OpenAI 사용</a></li>
          <li><a href="#ollama-%EC%82%AC%EC%9A%A9">Ollama 사용</a></li>
        </ul>
      </li>
      <li><a href="#%ED%94%84%EB%A1%AC%ED%94%84%ED%8A%B8-%ED%85%9C%ED%94%8C%EB%A6%BF">프롬프트 템플릿</a></li>
      <li><a href="#%EC%B6%9C%EB%A0%A5-%ED%8C%8C%EC%84%9C">출력 파서</a></li>
    </ul>
  </li>
  <li><a href="#%EC%A3%BC%EC%9A%94-%EA%B8%B0%EB%8A%A5-%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%8B%9C">주요 기능 및 사용 예시</a>
    <ul>
      <li><a href="#%EC%B2%B4%EC%9D%B8-%EA%B5%AC%EC%84%B1">체인 구성</a></li>
      <li><a href="#%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC">비동기 처리</a></li>
    </ul>
  </li>
  <li><a href="#%EC%8B%A4%EC%A0%9C-%EA%B5%AC%ED%98%84-%EC%98%88%EC%8B%9C">실제 구현 예시</a>
    <ul>
      <li><a href="#%EC%A7%88%EB%AC%B8-%EC%83%9D%EC%84%B1-%EC%8B%9C%EC%8A%A4%ED%85%9C">질문 생성 시스템</a></li>
      <li><a href="#%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B2%80%EC%A6%9D-%EC%8B%9C%EC%8A%A4%ED%85%9C">데이터 검증 시스템</a></li>
    </ul>
  </li>
</ul>

<!-- /TOC -->

<h2 id="1-langchain-소개">1. LangChain 소개</h2>
<p>LangChain은 언어 모델(LLM)을 활용한 애플리케이션 개발을 위한 프레임워크다. 다양한 LLM을 쉽게 통합하고, 체인과 에이전트를 구성하여 복잡한 작업을 수행할 수 있도록 도와준다.</p>

<h2 id="2-기본-구성-요소">2. 기본 구성 요소</h2>

<h3 id="21-llmchat-models">2.1 LLM/Chat Models</h3>

<h4 id="groq-사용">Groq 사용</h4>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">langchain_groq</span> <span class="kn">import</span> <span class="n">ChatGroq</span>

<span class="c1"># Groq LLM 초기화
</span><span class="n">chat_model</span> <span class="o">=</span> <span class="nc">ChatGroq</span><span class="p">(</span>
    <span class="n">temperature</span><span class="o">=</span><span class="mf">0.1</span><span class="p">,</span>
    <span class="n">model_name</span><span class="o">=</span><span class="sh">"</span><span class="s">model_name</span><span class="sh">"</span><span class="p">,</span>
    <span class="n">api_key</span><span class="o">=</span><span class="sh">"</span><span class="s">your_api_key</span><span class="sh">"</span>
<span class="p">)</span>
</code></pre></div></div>

<h4 id="openai-사용">OpenAI 사용</h4>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">langchain_openai</span> <span class="kn">import</span> <span class="n">ChatOpenAI</span>

<span class="c1"># OpenAI LLM 초기화
</span><span class="n">chat_model</span> <span class="o">=</span> <span class="nc">ChatOpenAI</span><span class="p">(</span>
    <span class="n">temperature</span><span class="o">=</span><span class="mf">0.7</span><span class="p">,</span>
    <span class="n">model_name</span><span class="o">=</span><span class="sh">"</span><span class="s">gpt-4</span><span class="sh">"</span><span class="p">,</span>  <span class="c1"># 또는 "gpt-3.5-turbo"
</span>    <span class="n">api_key</span><span class="o">=</span><span class="sh">"</span><span class="s">your_openai_api_key</span><span class="sh">"</span>
<span class="p">)</span>
</code></pre></div></div>

<h4 id="ollama-사용">Ollama 사용</h4>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">langchain_community.llms</span> <span class="kn">import</span> <span class="n">Ollama</span>

<span class="c1"># Ollama LLM 초기화
</span><span class="n">llm</span> <span class="o">=</span> <span class="nc">Ollama</span><span class="p">(</span>
    <span class="n">model</span><span class="o">=</span><span class="sh">"</span><span class="s">llama2</span><span class="sh">"</span><span class="p">,</span>  <span class="c1"># 또는 "mistral", "codellama" 등
</span>    <span class="n">temperature</span><span class="o">=</span><span class="mf">0.5</span><span class="p">,</span>
    <span class="n">base_url</span><span class="o">=</span><span class="sh">"</span><span class="s">http://localhost:11434</span><span class="sh">"</span>  <span class="c1"># Ollama 서버 URL
</span><span class="p">)</span>

<span class="c1"># 또는 Ollama Chat 모델 사용
</span><span class="kn">from</span> <span class="n">langchain_community.chat_models</span> <span class="kn">import</span> <span class="n">ChatOllama</span>

<span class="n">chat_model</span> <span class="o">=</span> <span class="nc">ChatOllama</span><span class="p">(</span>
    <span class="n">model</span><span class="o">=</span><span class="sh">"</span><span class="s">llama2</span><span class="sh">"</span><span class="p">,</span>
    <span class="n">temperature</span><span class="o">=</span><span class="mf">0.5</span>
<span class="p">)</span>
</code></pre></div></div>

<h3 id="22-프롬프트-템플릿">2.2 프롬프트 템플릿</h3>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">langchain.prompts</span> <span class="kn">import</span> <span class="n">PromptTemplate</span>

<span class="c1"># 프롬프트 템플릿 생성
</span><span class="n">prompt</span> <span class="o">=</span> <span class="nc">PromptTemplate</span><span class="p">(</span>
    <span class="n">template</span><span class="o">=</span><span class="sh">"</span><span class="s">Context: {context}</span><span class="se">\n</span><span class="s">Question: {question}</span><span class="se">\n</span><span class="s">Choices: {choices}</span><span class="se">\n</span><span class="s">Answer: {answer}</span><span class="sh">"</span><span class="p">,</span>
    <span class="n">input_variables</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">context</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">question</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">choices</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">answer</span><span class="sh">"</span><span class="p">]</span>
<span class="p">)</span>
</code></pre></div></div>

<h3 id="23-출력-파서">2.3 출력 파서</h3>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">langchain.output_parsers</span> <span class="kn">import</span> <span class="n">PydanticOutputParser</span>
<span class="kn">from</span> <span class="n">pydantic</span> <span class="kn">import</span> <span class="n">BaseModel</span><span class="p">,</span> <span class="n">Field</span>

<span class="c1"># Pydantic 모델 정의
</span><span class="k">class</span> <span class="nc">AnswerResponse</span><span class="p">(</span><span class="n">BaseModel</span><span class="p">):</span>
    <span class="n">answer</span><span class="p">:</span> <span class="nb">int</span> <span class="o">=</span> <span class="nc">Field</span><span class="p">(</span><span class="n">description</span><span class="o">=</span><span class="sh">"</span><span class="s">답변 번호 (1-5)</span><span class="sh">"</span><span class="p">,</span> <span class="n">ge</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">le</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span>

<span class="c1"># 파서 초기화
</span><span class="n">parser</span> <span class="o">=</span> <span class="nc">PydanticOutputParser</span><span class="p">(</span><span class="n">pydantic_object</span><span class="o">=</span><span class="n">AnswerResponse</span><span class="p">)</span>
</code></pre></div></div>

<h2 id="3-주요-기능-및-사용-예시">3. 주요 기능 및 사용 예시</h2>

<h3 id="31-체인-구성">3.1 체인 구성</h3>
<p>LangChain은 여러 컴포넌트를 체인으로 연결하여 복잡한 작업을 수행할 수 있다.</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># 프롬프트 템플릿과 출력 파서 연결
</span><span class="n">prompt</span> <span class="o">=</span> <span class="nc">PromptTemplate</span><span class="p">(</span>
    <span class="n">template</span><span class="o">=</span><span class="n">template_text</span> <span class="o">+</span> <span class="sh">"</span><span class="se">\n</span><span class="s">{format_instructions}</span><span class="sh">"</span><span class="p">,</span>
    <span class="n">input_variables</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">context</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">question</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">choices</span><span class="sh">"</span><span class="p">],</span>
    <span class="n">partial_variables</span><span class="o">=</span><span class="p">{</span><span class="sh">"</span><span class="s">format_instructions</span><span class="sh">"</span><span class="p">:</span> <span class="n">parser</span><span class="p">.</span><span class="nf">get_format_instructions</span><span class="p">()}</span>
<span class="p">)</span>
</code></pre></div></div>

<h3 id="32-비동기-처리">3.2 비동기 처리</h3>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="n">concurrent.futures</span> <span class="kn">import</span> <span class="n">ThreadPoolExecutor</span><span class="p">,</span> <span class="n">as_completed</span>

<span class="k">def</span> <span class="nf">process_batch</span><span class="p">(</span><span class="n">batch_data</span><span class="p">,</span> <span class="n">model</span><span class="p">):</span>
    <span class="k">with</span> <span class="nc">ThreadPoolExecutor</span><span class="p">()</span> <span class="k">as</span> <span class="n">executor</span><span class="p">:</span>
        <span class="n">futures</span> <span class="o">=</span> <span class="p">[]</span>
        <span class="k">for</span> <span class="n">item</span> <span class="ow">in</span> <span class="n">batch_data</span><span class="p">:</span>
            <span class="n">future</span> <span class="o">=</span> <span class="n">executor</span><span class="p">.</span><span class="nf">submit</span><span class="p">(</span><span class="n">process_single_item</span><span class="p">,</span> <span class="n">item</span><span class="p">,</span> <span class="n">model</span><span class="p">)</span>
            <span class="n">futures</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="n">future</span><span class="p">)</span>
        
        <span class="n">results</span> <span class="o">=</span> <span class="p">[]</span>
        <span class="k">for</span> <span class="n">future</span> <span class="ow">in</span> <span class="nf">as_completed</span><span class="p">(</span><span class="n">futures</span><span class="p">):</span>
            <span class="n">results</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="n">future</span><span class="p">.</span><span class="nf">result</span><span class="p">())</span>
        <span class="k">return</span> <span class="n">results</span>
</code></pre></div></div>

<h2 id="4-실제-구현-예시">4. 실제 구현 예시</h2>

<h3 id="41-질문-생성-시스템">4.1 질문 생성 시스템</h3>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">generate_answer</span><span class="p">(</span><span class="n">context</span><span class="p">:</span> <span class="nb">str</span><span class="p">,</span> <span class="n">question</span><span class="p">:</span> <span class="nb">str</span><span class="p">,</span> <span class="n">choices</span><span class="p">:</span> <span class="n">List</span><span class="p">[</span><span class="nb">str</span><span class="p">]):</span>
    <span class="sh">"""</span><span class="s">
    주어진 문맥과 질문에 대한 답변을 생성한다.
    
    Args:
        context: 문제의 문맥
        question: 질문 내용
        choices: 선택지 목록
    
    Returns:
        AnswerResponse: 1-5 사이의 답변 번호
    </span><span class="sh">"""</span>
    <span class="k">try</span><span class="p">:</span>
        <span class="c1"># 프롬프트 준비
</span>        <span class="n">messages</span> <span class="o">=</span> <span class="p">[</span>
            <span class="p">{</span><span class="sh">"</span><span class="s">role</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">system</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">content</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">문제를 해결하고 정답 번호를 선택하는 assistant다.</span><span class="sh">"</span><span class="p">},</span>
            <span class="p">{</span><span class="sh">"</span><span class="s">role</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">user</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">content</span><span class="sh">"</span><span class="p">:</span> <span class="sa">f</span><span class="sh">"</span><span class="s">Context: </span><span class="si">{</span><span class="n">context</span><span class="si">}</span><span class="se">\n</span><span class="s">Question: </span><span class="si">{</span><span class="n">question</span><span class="si">}</span><span class="se">\n</span><span class="s">Choices: </span><span class="si">{</span><span class="n">choices</span><span class="si">}</span><span class="sh">"</span><span class="p">}</span>
        <span class="p">]</span>
        
        <span class="c1"># LLM에 요청
</span>        <span class="n">response</span> <span class="o">=</span> <span class="n">chat_model</span><span class="p">.</span><span class="nf">invoke</span><span class="p">(</span><span class="n">messages</span><span class="p">)</span>
        
        <span class="c1"># 응답 파싱
</span>        <span class="k">return</span> <span class="n">parser</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="n">response</span><span class="p">.</span><span class="n">content</span><span class="p">)</span>
        
    <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span>
        <span class="nf">print</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">Error generating answer: </span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span>
        <span class="k">return</span> <span class="bp">None</span>
</code></pre></div></div>

<h3 id="42-데이터-검증-시스템">4.2 데이터 검증 시스템</h3>
<p>```python
class QuestionFormatValidator(BaseModel):
    id: str = Field(description=”질문 ID”)
    context: str = Field(description=”문제 문맥”)
    question: str = Field(description=”질문 내용”)
    choices: List[str] = Field(description=”선택지 목록”)
    answer: str = Field(description=”정답”)
    is_error: int = Field(description=”오류 여부 (1: 오류, 0: 정상)”)
    error_type: str = Field(description=”오류 유형 설명”)</p>

        
      </section>

      <footer class="page__meta">
        
        
  


  

  <p class="page__taxonomy">
    <strong><i class="fas fa-fw fa-tags" aria-hidden="true"></i> 태그: </strong>
    <span itemprop="keywords">
    
      <a href="/tags/#langchain" class="page__taxonomy-item p-category" rel="tag">langchain</a>
    
    </span>
  </p>




  


  

  <p class="page__taxonomy">
    <strong><i class="fas fa-fw fa-folder-open" aria-hidden="true"></i> 카테고리: </strong>
    <span itemprop="keywords">
    
      <a href="/#machine-learning" class="page__taxonomy-item p-category" rel="tag">machine-learning</a>
    
    </span>
  </p>


        

  <p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> 업데이트:</strong> <time class="dt-published" datetime="2024-11-22T00:00:00+00:00">November 22, 2024</time></p>

      </footer>

      <section class="page__share">
  
    <h4 class="page__share-title">공유하기</h4>
  

  <a href="https://twitter.com/intent/tweet?text=LangChain+%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC+%EA%B0%80%EC%9D%B4%EB%93%9C%20https%3A%2F%2Fgityeop.github.io%2Fmachine-learning%2FLangChain-Tutorial.md%2F" class="btn btn--twitter" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="공유하기 Twitter"><i class="fab fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>

  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgityeop.github.io%2Fmachine-learning%2FLangChain-Tutorial.md%2F" class="btn btn--facebook" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="공유하기 Facebook"><i class="fab fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>

  <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://gityeop.github.io/machine-learning/LangChain-Tutorial.md/" class="btn btn--linkedin" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="공유하기 LinkedIn"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
</section>


      
  <nav class="pagination">
    
      <a href="/machine-learning/Inverted-index/" class="pagination--pager" title="Inverted Index란?
">이전</a>
    
    
      <a href="/github-blog/adding-tags-to-jekyll/" class="pagination--pager" title="Jekyll 블로그에 태그 시스템 추가하기
">다음</a>
    
  </nav>

    </div>

    
      <div class="page__comments">
  
  
      <h4 class="page__comments-title">댓글남기기</h4>
      <section id="utterances-comments"></section>
    
</div>

    
  </article>

  
  
    
<div class="page__related">
  
  <h2 class="page__related-title">참고</h2>
  <div class="grid__wrapper">
    
      
      



<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/machine-learning/pruning/" rel="permalink">모델 경량화 기법: Pruning(가지치기)
</a>
      
    </h2>
    <p class="page__meta">
      <i class="far fa-calendar-alt" aria-hidden="true"></i> 2024-12-23
    </p>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          2 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">1. 프루닝 개념
</p>
  </article>
</div>

    
      
      



<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/machine-learning/pruning-2/" rel="permalink">모델 경량화 기법: Pruning(가지치기) - 실전편
</a>
      
    </h2>
    <p class="page__meta">
      <i class="far fa-calendar-alt" aria-hidden="true"></i> 2024-12-23
    </p>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          1 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">1. 프루닝 구현 방법
</p>
  </article>
</div>

    
      
      



<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/aging-slowly/" rel="permalink">충분히 실천 가능한 느리게 늙는 방법 (노년내과 정희원 교수)
</a>
      
    </h2>
    <p class="page__meta">
      <i class="far fa-calendar-alt" aria-hidden="true"></i> 2024-12-18
    </p>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          4 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">
</p>
  </article>
</div>

    
      
      



<div class="grid__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/machine-learning/aws-gcp/" rel="permalink">아마존 AWS와 구글 GCP 서비스 비교
</a>
      
    </h2>
    <p class="page__meta">
      <i class="far fa-calendar-alt" aria-hidden="true"></i> 2024-12-16
    </p>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          1 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">아마존 AWS 서비스
</p>
  </article>
</div>

    
  </div>
</div>

  
  
</div>


<div class="entries-list">
  {% for post in site.tags[page.tag] %}
    {% include archive-single.html %}
  {% endfor %}
</div>

3. 태그 자동 생성 플러그인 추가하기

태그별 페이지를 자동으로 생성하기 위한 플러그인을 추가합니다. /_plugins/tag_generator.rb 파일을 생성하고 다음 내용을 추가합니다:

Jekyll::Hooks.register :posts, :post_write do |post|
  all_existing_tags = Dir.entries("_tags")
    .map { |t| t.match(/(.*).md/) }
    .compact.map { |m| m[1] }

  tags = post['tags'].reject { |t| t.empty? }
  tags.each do |tag|
    generate_tag_file(tag) if !all_existing_tags.include?(tag)
  end
end

def generate_tag_file(tag)
  File.open("_tags/#{tag}.md", "wb") do |file|
    file << "---\nlayout: tag\ntag: #{tag}\n---\n"
  end
end

4. 포스트에 태그 추가하기

이제 블로그 포스트의 Front Matter에 태그를 추가할 수 있습니다:

---
title: "포스트 제목"
categories: category-name
tags:
  - Tag1
  - Tag2
  - Tag3
---

5. 사이드바에 카테고리 메뉴 추가하기

/_data/navigation.yml 파일에 카테고리 네비게이션을 추가합니다:

# sidebar navigation
categories:
  - title: Programming
    children:
      - title: "Data Structure and Algorithm" 
        url: /datastructure-and-algorithm/
      - title: "Python 기본 문법"
        url: /python-basic/
  - title: AI
    children:
      - title: "Machine Learning"
        url: /machine-learning/
  # 필요한 만큼 카테고리 추가

주의사항

  1. GitHub Pages에서는 커스텀 플러그인을 지원하지 않습니다. 로컬에서 사이트를 빌드한 후 결과물을 푸시하거나, GitHub Actions를 사용해야 합니다.
  2. 태그 이름에는 공백 대신 하이픈(-)을 사용하는 것이 좋습니다.

결과

이제 블로그에서 다음과 같은 기능을 사용할 수 있습니다:

  • /tags 페이지에서 모든 태그와 관련 포스트 목록 확인
  • 각 태그별 전용 페이지 자동 생성
  • 사이드바에서 카테고리별 포스트 쉽게 탐색

댓글남기기

참고