Удаление содержимого определённых тегов в GitHub-блоге

Введение

Тема 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, пришлось повозиться. Пытался решить средствами самого Liquid (split, join и т.д.), но получить желаемый результат было трудно, поэтому я обратился за помощью к GPT. Решение заключалось в создании Ruby-файла по пути _plugins/remove-tags.rb. В 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:, что очень просто. Буду использовать это по мере необходимости.