Jekyll에서 사용자 지정 태그 만들기, 실제 예제 포함

7125 단어 jekyllruby
Shields.io는 "GitHub readme 또는 다른 웹 페이지에 쉽게 포함될 수 있는 SVG 및 래스터 형식의 간결하고 일관되며 읽기 쉬운 배지를 위한 서비스"입니다.

shields.io

그들의 서비스는 쿼리 매개변수를 API 엔드포인트로 가져와 배지/쉴드를 생성합니다. 예를 들어:

https://img.shields.io/static/v1?label=Find%20me%20on&message=GitHub&color=181717&style=flat&logo=github

된다:



개인 블로그에 사용하려고 했는데 문제가 생겼습니다. 유지하기가 어렵습니다.
보호막의 내용을 변경하는 경우는 드물지만 내 블로그에 보호막을 배치할 수 있는 유지 관리 가능한 방법이 있으면 좋을 것입니다.

Jekyll을 사용하기 때문에 사용자 정의 'Liquid 태그'를 정의할 수 있습니다. 예를 들어 {% github repo %} 및 {% embed website %} 와 같이 액체 태그가 있는 호환 서비스의 항목을 여기 DEV.to에 포함할 수 있는 것처럼 {% shields_io payload %} 와 같은 사용자 지정 태그를 만들어 방패를 표시할 수 있습니다.

Jekyll에서 Liquid 태그는 어떻게 작동하나요?



Jekyll의 Liquid 태그는 다음 형식을 사용합니다.

{% tag_name [tag_argument] %}

여기에는 태그 이름과 하나의 선택적 인수가 있습니다.

여기에서 문제가 보이십니까? 인수로 허용되는 값은 기껏해야 하나입니다. Shields.io는 그 이상을 사용하며 여기에 쿼리 매개변수를 입력해도 아무 것도 해결되지 않습니다.

하지만 여전히 희망이 있습니다. 우리가 작성할 코드를 살펴보겠습니다.

module Jekyll
  class CustomTag < Liquid::Tag
    def initialize(tag_name, arg, parse_context)
      super
      # @type [String]
      @arg = arg
    end
    def render(_context)
      "The argument is #{@arg}" # return the render result here
    end
  end
end
arg 인수는 태그에서 전달된 인수입니다. 문자열입니다. 따라서 입력으로 무언가를 할 수 있습니다.
그리고 원래 문제를 되돌아보면 키-값 쌍 세트를 API 끝점에 전달하려고 합니다.

그래서 여기에 JSON 페이로드를 전달하기로 결정했습니다. 그것은 우리의 목적에 맞게 꾸며질 수 있으며 Ruby는 기본적으로 JSON 역직렬화를 지원합니다.

URL로 변환하는 방법



Ruby는 입력 JSON을 해시로 변환할 수 있으므로 이 해시를 반복하고 쿼리 매개변수를 구성할 수 있습니다.

따라서 아이디어는 JSON을 역직렬화하고 변수에 저장하는 것입니다.

    def initialize(tag_name, input, parse_context)
      super
      # @type [Hash]
      @config = JSON.load(input.strip)
    end

그리고 쿼리 매개변수를 구성합니다. 또한 JSON 페이로드에 다른 목적으로 href 및 alt를 포함하기로 결정했지만 요청과 관련이 없습니다. 그래서 값을 추출하고 나머지를 쿼리 매개변수로 바꾸기 전에 입력 해시에서 제거합니다.

def render(_context)
  href = @config[:href]
  alt = @config[:alt]
  @config.delete(:href)
  @config.delete(:alt)
  shield_tag = <<HTML
  <img src="https://img.shields.io/static/v1?#{hash_to_query}"
HTML
  if alt != nil
    shield_tag += " alt=\"#{alt}\" />"
  else
    shield_tag += " />"
  end
  if href != nil
    <<HTML
<a href="#{href}">
#{shield_tag}
</a>
HTML
  else
    shield_tag
  end
end

private
def hash_to_query
  @config.to_a.map { |k, v|
    "#{k}=#{v}"
  }.join '&'
end

결과



여기 내 작품이 있습니다. 마지막 두 파일을 복사하고 로컬 서버를 실행하십시오!


Machines Learning 学习笔记(Week1&2)
자판기 스마트 컨트랙트 개발

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage