깃허브 블로그에서 특정 태그 내용 제거하기

들어가며

Chirpy 테마는 깔끔하고 단정하지만 순정 상태에서는 이건 개선이 필요하겠다 생각이 드는 부분이 간혹 보입니다. 간간히 수정해주고는 있지만 개인적으로 아쉬운 점이 여전히 몇 가지 남아 있었죠.

그 중 하나는 블로그 홈의 글 요약본이 이미지 캡션이나 헤더 등을 포함한 날것 그대로 보인다는 겁니다. 위처럼 이미지 캡션이나 “들어가며” 같은 불필요한 부분이 같이 표시되어 가독성이 나빠지고 있죠. 이런 건 당연히 기본 처리가 되어있어야 하는 게 아닌가 싶은데, 이번에 방법을 찾아서 수정해주었습니다.

원인 파악

<div class="card-text content mt-0 mb-3">
  <p>
    {% include no-linenos.html content=post.content %}
    {{ content | markdownify | strip_html | truncate: 200 | escape }}
  </p>
</div>

깃허브 블로그 홈에 대한 내역은 _layouts/home.html에 작성되어 있습니다. 순정 코드는 저의 경우 위와 같이 작성되어 있었으며, <div class="card-text content mt-0 mb-3"> 단락에서 포스트 요약본을 생성하고 있습니다.

코드를 살펴보니 콘텐츠는 단순히 markdownify와 strip_html만을 거쳐 텍스트로 표시되고 있습니다. 여기에 별도의 필터를 추가해 특정 태그를 제거하면 좋겠다는 생각이 들었고, 다음과 같은 과정을 거쳤습니다.

코드 작성

require 'nokogiri'

module Jekyll
  module RemoveTagFilter
    def remove_tag(input, *tags)
      doc = Nokogiri::HTML(input)
      doc.remove_namespaces!
      tags.each do |tag|
        doc.search(tag).each do |node|
          node.content = ''
        end
      end
      doc.to_html.gsub(/\A<!DOCTYPE .*?>\n?/, '').gsub(/\n\z/, '')
    end
  end
end

Liquid::Template.register_filter(Jekyll::RemoveTagFilter)

{%- if post.description -%}
  {{- post.description -}}
{%- else -%}
  ...
  {{- content | markdownify | remove_tag: 'h2', 'h3', 'em', 'blockquote', 'pre' | strip_html | newline_to_br | replace: '<br />', ' ' | strip_newlines -}}
  ...
{%- endif -%}

Ruby나 Liquid에 대해서는 배경지식이 없어 방법을 알아내느라 조금 고생했습니다. split 또는 join 등 Liquid만으로 해결하려고 했는데 원하는 결과물을 만들기 힘들어 GPT의 도움을 받았고, _plugins/remove-tags.rb 경로로 Ruby 파일을 만들어 이용하는 식으로 해결했습니다. Ruby 파일에는 태그 유형을 매개변수로 받아 내부 텍스트를 정규 표현식으로 제거하는 함수를 만들었습니다. Nokogiri라는 파싱 라이브러리를 이용했고, Liquid 파일에서 remove_tag: 'h2', 'h3', 'em', 'blockquote'와 같이 사용합니다.

Chirpy 버전이 v7.4.0으로 업데이트되면서 post-description.html이 post-summary.html로 대체되었습니다. 다만 구조는 거의 비슷하기 때문에, 다음과 같이 작성할 수 있습니다.

  ...
  {%- assign content = content
    | markdownify
    | remove_tag: 'h2', 'h3', 'em', 'blockquote', 'pre'
    | strip_html
    | newline_to_br
    | replace: '<br />', ' '
    | strip_newlines
    | strip
  -%}
  ...

개선 확인

코드를 작성하니 잘 동작합니다. 수정 전과 비교하면 불필요한 글이 제거되면서 글 요약본의 가독성이 대폭 개선되었습니다. 수정 전의 난해한 느낌이 사라지고 훨씬 자연스러워졌고, 추가적으로 제거를 원하는 태그는 remove_tag: 뒤에 추가해주면 되기 때문에 사용도 간단합니다. 앞으로 적절히 잘 사용해야겠습니다.