빠른 팁 : Jekyll에서 사용자 정의 가능한 HTML 위젯을 구축하는 방법

Jekyll 정적 웹 사이트 생성기 : Ruby 플러그인없이 사용자 정의 가능한 HTML 위젯을 만듭니다

이 가벼운 정적 웹 사이트 생성기 인 Jekyll은 강력한 기능과 사용 편의성으로 인기가 있습니다. 이 기사는 Ruby 플러그인없이 Jekyll 및 Liquid Template 언어를 사용하여 사용자 정의 가능한 HTML 위젯을 만드는 방법을 설명하며, 비 기술적 인 사람들조차도 쉽게 시작할 수 있습니다.

설정 정의 변수를 설정

이 기사에서는 인라인 변수 및 사전 대륙 메소드의 사용자 지정 변수를 설정하는 두 가지 방법을 소개합니다.

1 인라인 메소드는 위젯이 동일한 페이지에 여러 번 포함 될 수있는 최상의 옵션입니다 (예 : 블로그 게시물). 다음은 페이팔 버튼의 예입니다. 라는 새 파일을 만들고 다음 코드를 추가하십시오.

및 는 두 가지 사용자 정의 변수입니다. Markdown 기사 에이 위젯을 포함시킬 때 :

이것은 "지금 구매 | $ 30"으로 표시된 버튼을 만듭니다. 매번 다른

및 2 기사 당 한 번만 포함 된 더 긴 텍스트 문자열 및 위젯의 경우 사전 대륙 방법을 사용할 수 있습니다. 다음은 뉴스 구독 상자의 예입니다. 동일, 폴더에서 새 파일을 작성하고 다음 코드를 추가하십시오. Markdown 기사 또는 페이지의 접두사에서 Yaml을 사용하여 변수를 정의하십시오.

그런 다음 기사에 위젯을 포함시킵니다

(CSS 스타일 효과 추가) 페이지에 위젯을 여러 번 포함하고 별도로 사용자 정의 해야하는 경우 인라인 변수를 사용해야합니다.

요약 _includes paypal-widget.html 이 기사에서는 Jekyll 프로젝트에서 강력한 모듈을 만드는 두 가지 쉬운 방법을 설명합니다. 다양한 사용자 정의 위젯을 만들려면이 두 가지 방법을 유연하게 사용할 수 있습니다.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="{{ include.id }}">
  <input type="submit" class="buy-button" name="submit" value="{{ include.button }}">
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173985127475091.gif?x-oss-process=image/resize,p_40"  class="lazy"  alt="" border="0"    style="max-width:90%"  style="max-width:90%" style="display: none !important;">
</form>

위 내용은 빠른 팁 : Jekyll에서 사용자 정의 가능한 HTML 위젯을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!