カスタム液体タグの実装
15068 ワード
液体タグは素晴らしい悪魔です.投稿するには、いくつかのカスタム液タグを使用して記事を投稿すると、GIST、Gitthub Repos、Twitchストリームともっとたくさん.液体タグがどのように働くかについて理解するために.
GISTの液体タグを作ります.以下のようなURLで提供された場合、gistをレンダリングします
< div >
あなたは、ボイラープレート支店< br/>でこのプロジェクトのためにボイラープレートを得ることができます
<> P >
クラスをハイライト表示する
<高橋潤子>p >
液体はSusify(erbと同様)によって作成されたテンプレート言語です.ジェムファイルに液体を加え、バンドルインストール< br/>を実行することで、プロジェクトに液体 を含める予定です
<> P >
クラスをハイライト表示する
< ulink >ユーザコンテンツの液タグを解析するには、プレビューアクション< br/>で次のことができます
<> P >
クラスをハイライト表示する
< tag >と液体タグは今では< tt/p >です
<堀田>
<堀田>
< tag >これらのデフォルトのタグを後で無効にします.
最初に我々はアプリ/リリディーズのタグを作成します/Liquidchen Tagchyベース.RB < br/>
すべての液体タグが継承するbr/>
<> P >
クラスをハイライト表示する
< tag >すべての液体タグを共有する必要のある共通のコードがある場合は、ここに置きます.p >
それから、我々は我々のGIST Liquid Tagアプリ/LiquidLearnタグ/GistThangタグをつくります.rb私たちはこのコードについては前書きしました
<> P >
クラスをハイライト表示する
上記コードは与えられたgist液体タグへの引数を解析し、適切なURIを生成します.また、液体タグに使用する部分を指定します.p >
< tag >このタグアプリケーション/ビュー/液体/アングルgistをレンダリングする方法を示す部分ファイルを作成します.HTML .ERB < br/>
<> P >
クラスをハイライト表示する
私たちが実際にGIST液体タグを使用しようとするならば、タグGISTが定義されていないと言うエラーを投げます
<高橋潤子>カスタム液体タグを読み込みます
<> P >
クラスをハイライト表示する
上記のコードは指定されたパスのLiquidCalタグを探し、それらをロードします.p >
GISTのタグを試してみると、< p/p >が動作します
<堀田>
< tag >代入のようなデフォルトのタグを指定したくないかもしれません.config/initializers/液に次のコードを追加することで、それらを無効にすることができます.RB < br/>
<> P >
クラスをハイライト表示する
これらのタグをlib/液フォルダ< br/>内に定義する
<> P >
クラスをハイライト表示する
クラスをハイライト表示する
現在のところ、割り当てのようなデフォルトのタグを使用できません.p >
プロジェクトのソースを見つけることができます
<ノート> < p/p >
< OL > Formは、ユーザーがPundit Gem を使用して液体タグにアクセスできるかどうかをチェックすることによって、もう少しをします
< OL >
Pexels からのVitaly Vlasovによるカバーイメージ
GISTの液体タグを作ります.以下のようなURLで提供された場合、gistをレンダリングします
< div >
あなたは、ボイラープレート支店< br/>でこのプロジェクトのためにボイラープレートを得ることができます
<> P >
クラスをハイライト表示する
$ git clone https://github.com/Rafi993/custom-liquid-tags
$ cd custom-liquid-tags
$ git checkout boilerplate
$ bin/setup
< div ><高橋潤子>p >
ヒア 液体テンプレート言語
液体はSusify(erbと同様)によって作成されたテンプレート言語です.ジェムファイルに液体を加え、バンドルインストール< br/>を実行することで、プロジェクトに液体 を含める予定です
<> P >
クラスをハイライト表示する
gem 'liquid', '~> 4.0', '>= 4.0.3'
< div >< ulink >ユーザコンテンツの液タグを解析するには、プレビューアクション< br/>で次のことができます
<> P >
クラスをハイライト表示する
def preview
@template = Liquid::Template.parse(params[:text])
@parsed_html = @template.render()
render "preview"
end
< div >< tag >と液体タグは今では< tt/p >です
<堀田>
<堀田>
< tag >これらのデフォルトのタグを後で無効にします.
宝石 カスタムタグ
最初に我々はアプリ/リリディーズのタグを作成します/Liquidchen Tagchyベース.RB < br/>
すべての液体タグが継承するbr/>
<> P >
クラスをハイライト表示する
class LiquidTagBase < Liquid::Tag
def self.script
""
end
def initialize(_tag_name, _content, parse_context)
super
end
end
< div >< tag >すべての液体タグを共有する必要のある共通のコードがある場合は、ここに置きます.p >
それから、我々は我々のGIST Liquid Tagアプリ/LiquidLearnタグ/GistThangタグをつくります.rb私たちはこのコードについては前書きしました
<> P >
クラスをハイライト表示する
class GistTag < LiquidTagBase
PARTIAL = "liquids/gist".freeze
VALID_LINK_REGEXP =
%r{\Ahttps://gist\.github\.com/([a-zA-Z0-9](-?[a-zA-Z0-9]){0,38})/([a-zA-Z0-9]){1,32}(/[a-zA-Z0-9]+)?\Z}
.freeze
def initialize(_tag_name, link, _parse_context)
super
raise StandardError, "Invalid Gist link: You must provide a Gist link" if link.blank?
@uri = build_uri(link)
end
def render(_context)
ApplicationController.render(
partial: PARTIAL,
locals: {
uri: @uri,
},
)
end
private
def build_uri(link)
link = ActionController::Base.helpers.strip_tags(link)
link, option = link.split(" ", 2)
link = parse_link(link)
uri = "#{link}.js"
uri += build_options(option) unless option&.empty?
uri
end
def parse_link(link)
input_no_space = link.delete(" ").gsub(".js", "")
if valid_link?(input_no_space)
input_no_space
else
raise StandardError,
"Invalid Gist link: #{link} Links must follow this format: https://gist.github.com/username/gist_id"
end
end
def build_options(option)
option_no_space = option.strip
return "?#{option_no_space}" if valid_option?(option_no_space)
raise StandardError, "Invalid Filename"
end
def valid_link?(link)
(link =~ VALID_LINK_REGEXP)&.zero?
end
def valid_option?(option)
(option =~ /\Afile=[^\\]*(\.(\w+))?\Z/)&.zero?
end
end
Liquid::Template.register_tag("gist", GistTag)
< div >上記コードは与えられたgist液体タグへの引数を解析し、適切なURIを生成します.また、液体タグに使用する部分を指定します.p >
< tag >このタグアプリケーション/ビュー/液体/アングルgistをレンダリングする方法を示す部分ファイルを作成します.HTML .ERB < br/>
<> P >
クラスをハイライト表示する
<div>
<script id="gist-ltag" src="<%= uri %>"></script>
</div>
< div >私たちが実際にGIST液体タグを使用しようとするならば、タグGISTが定義されていないと言うエラーを投げます
初期化タグ
<高橋潤子>カスタム液体タグを読み込みます
<> P >
クラスをハイライト表示する
Rails.application.config.to_prepare do
# Custom Liquid tags are loaded here
Dir.glob(Rails.root.join("app/liquid_tags/*.rb")).sort.each do |filename|
require_dependency filename
end
end
< div >上記のコードは指定されたパスのLiquidCalタグを探し、それらをロードします.p >
GISTのタグを試してみると、< p/p >が動作します
<堀田>
デフォルトタグを無効にする
< tag >代入のようなデフォルトのタグを指定したくないかもしれません.config/initializers/液に次のコードを追加することで、それらを無効にすることができます.RB < br/>
<> P >
クラスをハイライト表示する
# Tags to disable
Dir.glob(Rails.root.join("lib/liquid/*.rb")).sort.each do |filename|
require_dependency filename
end
< div >これらのタグをlib/液フォルダ< br/>内に定義する
<> P >
クラスをハイライト表示する
# lib/liquid/raw.rb
module Liquid
class Raw < Block
remove_const(:FullTokenPossiblyInvalid) if defined?(FullTokenPossiblyInvalid)
FullTokenPossiblyInvalid = /\A(.*)#{TagStart}\s*(\w+)\s*#{TagEnd}\z/om.freeze # rubocop:disable Naming/ConstantName
end
Template.register_tag("raw", Raw)
end
< div >クラスをハイライト表示する
# lib/liquid/variables.rb
module Liquid
class Variable
def initialize(_markup, _parse_context)
raise StandardError, "Liquid variables are disabled"
end
end
end
< div >現在のところ、割り当てのようなデフォルトのタグを使用できません.p >
プロジェクトのソースを見つけることができます
<ノート> < p/p >
< OL >
< OL >
Pexels からのVitaly Vlasovによるカバーイメージ
Reference
この問題について(カスタム液体タグの実装), 我々は、より多くの情報をここで見つけました https://dev.to/rafi993/implementing-custom-liquid-tags-16g0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol