Ruby on Rails 5.2 - ActionView::Helpers::AssetTagHelper

मॉड्यूल एक्शन व्यू :: हेल्पर्स :: एसेटटैग हेल्पर




ruby

मॉड्यूल एक्शन व्यू :: हेल्पर्स :: एसेटटैग हेल्पर

शामिल मॉड्यूल:
ActionView::Helpers::AssetUrlHelper , ActionView::Helpers::TagHelper

यह मॉड्यूल HTML उत्पन्न करने के लिए तरीके प्रदान करता है जो छवियों, जावा स्क्रिप्ट्स, स्टाइलशीट और फीड जैसी परिसंपत्तियों को जोड़ता है। इन विधियों को जोड़ने से पहले मौजूद आस्तियों को सत्यापित नहीं किया जाता है:

image_tag("rails.png")
# => <img src="/assets/rails.png" />
stylesheet_link_tag("application")
# => <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />

सार्वजनिक प्रवृत्ति के तरीके

ऑडियो_टैग (* स्रोत) स्रोत दिखाएं
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 451
def audio_tag(*sources)
  multiple_sources_tag_builder("audio", sources)
end

sources लिए एक HTML ऑडियो टैग देता sources । यदि sources एक स्ट्रिंग है, तो एक एकल ऑडियो टैग वापस आ जाएगा। यदि sources एक सरणी है, तो प्रत्येक स्रोत के लिए नेस्टेड स्रोत टैग वाला एक ऑडियो टैग वापस कर दिया जाएगा। sources पूर्ण पथ या फ़ाइलें हो सकते हैं जो आपके सार्वजनिक ऑडियो निर्देशिका में मौजूद हैं।

जब अंतिम पैरामीटर एक हैश है तो आप उस पैरामीटर का उपयोग करके HTML विशेषताओं को जोड़ सकते हैं।

audio_tag("sound")
# => <audio src="/audios/sound"></audio>
audio_tag("sound.wav")
# => <audio src="/audios/sound.wav"></audio>
audio_tag("sound.wav", autoplay: true, controls: true)
# => <audio autoplay="autoplay" controls="controls" src="/audios/sound.wav"></audio>
audio_tag("sound.wav", "sound.mid")
# => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio>

एक लिंक टैग लौटाता है जो ब्राउज़रों और पाठकों को खिलाता है आरएसएस, एटम, या JSON फ़ीड का स्वत: पता लगाने के लिए उपयोग कर सकता है। type हो सकता है :rss (डिफ़ॉल्ट) :atom , या :json । Url_options का उपयोग करके url_for प्रारूप में लिंक विकल्पों को नियंत्रित करें। आप LINK टैग को tag_options में ही संशोधित कर सकते हैं।

  • :rel - इस लिंक के संबंध को निर्दिष्ट करें, "वैकल्पिक" के लिए चूक

  • :type - ऑटो-जनरेट माइम प्रकार को ओवरराइड करें

  • :title - लिंक का शीर्षक निर्दिष्ट करें, type करने के लिए चूक

auto_discovery_link_tag
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:atom)
# => <link rel="alternate" type="application/atom+xml" title="ATOM" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:json)
# => <link rel="alternate" type="application/json" title="JSON" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:rss, {action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {action: "feed"}, {title: "My RSS"})
# => <link rel="alternate" type="application/rss+xml" title="My RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {controller: "news", action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/news/feed" />
auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", {title: "Example RSS"})
# => <link rel="alternate" type="application/rss+xml" title="Example RSS" href="http://www.example.com/feed.rss" />

एसेट पाइपलाइन द्वारा प्रबंधित फ़ेविकॉन के लिए लिंक टैग लौटाता है।

यदि किसी पेज में इस सहायक द्वारा उत्पन्न लिंक की तरह कोई लिंक नहीं है, तो ब्राउज़र स्वचालित रूप से /favicon.ico लिए पूछते हैं, और यदि अनुरोध सफल होता है तो फ़ाइल को कैश करें। यदि फ़ेविकॉन बदलता है तो इसे अपडेट किया जाना कठिन है।

बेहतर नियंत्रण अनुप्रयोगों के लिए, एसेट पाइपलाइन को app/assets/images तहत फ़ाइल को संग्रहीत करने वाले अपने फ़ेविकॉन को प्रबंधित करने और इस सहायक को इसके संबंधित लिंक टैग को उत्पन्न करने के लिए उपयोग करने दे सकता है।

सहायक को पहले तर्क के रूप में फ़ेविकॉन फ़ाइल का नाम मिलता है, जो "favicon.ico" को डिफॉल्ट करता है, और यह भी समर्थन करता है :rel क्रमशः अपने डिफॉल्ट्स, "शॉर्टकट आइकन" और "इमेज / एक्स-आइकन" को ओवरराइड करने के लिए विकल्प :type करें:

favicon_link_tag
# => <link href="/assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />

favicon_link_tag 'myicon.ico'
# => <link href="/assets/myicon.ico" rel="shortcut icon" type="image/x-icon" />

मोबाइल सफारी एक अलग लिंक टैग की तलाश करता है, एक छवि की ओर इशारा करता है जो कि अगर आप iOS डिवाइस के होम स्क्रीन पर पेज जोड़ते हैं तो इसका उपयोग किया जाएगा। निम्नलिखित कॉल इस तरह के एक टैग उत्पन्न करेगा:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
# => <link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 375
def image_alt(src)
  ActiveSupport::Deprecation.warn("image_alt is deprecated and will be removed from Rails 6.0. You must explicitly set alt text on images.")

  File.basename(src, ".*".freeze).sub(/-[[:xdigit:]]{32,64}\z/, "".freeze).tr("-_".freeze, " ".freeze).capitalize
end

HTML छवि टैग ऑल्ट विशेषता के लिए उपयुक्त स्ट्रिंग लौटाता है। src तर्क का मतलब एक इमेज फाइल पथ होना है। विधि फ़ाइल पथ के बेसन और पाचन को हटा देती है, यदि कोई हो। यह फ़ाइल नामों से हाइफ़न और अंडरस्कोर भी हटाता है और उन्हें रिक्त स्थान के साथ प्रतिस्थापित करता है, एक अंतरिक्ष-पृथक, शीर्षक स्ट्रिंग लौटाता है।

उदाहरण

image_alt('rails.png')
# => Rails

image_alt('hyphenated-file-name.png')
# => Hyphenated file name

image_alt('underscored_file_name.png')
# => Underscored file name
image_tag (स्रोत, विकल्प = {}) स्रोत दिखाएं
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 340
def image_tag(source, options = {})
  options = options.symbolize_keys
  check_for_image_tag_errors(options)
  skip_pipeline = options.delete(:skip_pipeline)

  options[:src] = resolve_image_source(source, skip_pipeline)

  if options[:srcset] && !options[:srcset].is_a?(String)
    options[:srcset] = options[:srcset].map do |src_path, size|
      src_path = path_to_image(src_path, skip_pipeline: skip_pipeline)
      "#{src_path} #{size}"
    end.join(", ")
  end

  options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
  tag("img", options)
end

source लिए एक HTML छवि टैग देता है। source पूर्ण पथ, फ़ाइल या सक्रिय संग्रहण अनुलग्नक हो सकता है।

विकल्प

आप options का उपयोग करके HTML विशेषताएँ जोड़ सकते हैं। options सुविधा और अनुरूपता के लिए अतिरिक्त कुंजी का समर्थन करते हैं:

  • :size - "{चौड़ाई} x {ऊंचाई}" या "{संख्या}" के रूप में माना जाता है, इसलिए "30x45" चौड़ाई = "30" और ऊंचाई = "45", और "50" चौड़ाई = "50" और ऊंचाई बन जाती है = "50"। :size यदि मूल्य सही प्रारूप में नहीं है तो :size की अनदेखी की जाएगी।

  • :srcset - यदि हैश या सरणी [source, descriptor] जोड़े के रूप में आपूर्ति की जाती है, तो सूची में स्ट्रिंग के रूप में स्वरूपित करने से पहले प्रत्येक छवि पथ का विस्तार किया जाएगा।

उदाहरण

संपत्ति (चित्र जो आपके ऐप का हिस्सा हैं):

image_tag("icon")
# => <img src="/assets/icon" />
image_tag("icon.png")
# => <img src="/assets/icon.png" />
image_tag("icon.png", size: "16x10", alt: "Edit Entry")
# => <img src="/assets/icon.png" width="16" height="10" alt="Edit Entry" />
image_tag("/icons/icon.gif", size: "16")
# => <img src="/icons/icon.gif" width="16" height="16" />
image_tag("/icons/icon.gif", height: '32', width: '32')
# => <img height="32" src="/icons/icon.gif" width="32" />
image_tag("/icons/icon.gif", class: "menu_icon")
# => <img class="menu_icon" src="/icons/icon.gif" />
image_tag("/icons/icon.gif", data: { title: 'Rails Application' })
# => <img data-title="Rails Application" src="/icons/icon.gif" />
image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
# => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">
image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
# => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw">

सक्रिय भंडारण (आपके ऐप के उपयोगकर्ताओं द्वारा अपलोड की गई छवियां):

image_tag(user.avatar)
# => <img src="/rails/active_storage/blobs/.../tiger.jpg" />
image_tag(user.avatar.variant(resize: "100x100"))
# => <img src="/rails/active_storage/variants/.../tiger.jpg" />
image_tag(user.avatar.variant(resize: "100x100"), size: '100')
# => <img width="100" height="100" src="/rails/active_storage/variants/.../tiger.jpg" />
javascript_include_tag (* स्रोत) स्रोत दिखाएँ
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 87
def javascript_include_tag(*sources)
  options = sources.extract_options!.stringify_keys
  path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
  early_hints_links = []

  sources_tags = sources.uniq.map { |source|
    href = path_to_javascript(source, path_options)
    early_hints_links << "<#{href}>; rel=preload; as=script"
    tag_options = {
      "src" => href
    }.merge!(options)
    if tag_options["nonce"] == true
      tag_options["nonce"] = content_security_policy_nonce
    end
    content_tag("script".freeze, "", tag_options)
  }.join("\n").html_safe

  request.send_early_hints("Link" => early_hints_links.join("\n")) if respond_to?(:request) && request

  sources_tags
end

दिए गए प्रत्येक sources लिए एक HTML स्क्रिप्ट टैग देता है।

स्रोत जावास्क्रिप्ट फ़ाइलों के लिए पथ हो सकते हैं। रिश्तेदार पथ assets/javascripts सापेक्ष माना जाता है, पूर्ण पथ दस्तावेज़ रूट के सापेक्ष माना जाता है। सापेक्ष पथ मुहावरेदार होते हैं, जरूरत पड़ने पर ही पूर्ण पथ का उपयोग करते हैं।

जब रास्ते से गुजर रहे हैं, ".js" विस्तार वैकल्पिक है। यदि आप ".js" नहीं चाहते हैं, तो पथ extname: false को जोड़ा गया extname: false विकल्पों पर extname: false सेट किया जा सकता है।

आप अंतिम तर्क के रूप में हैश पास करके स्क्रिप्ट टैग की HTML विशेषताओं को संशोधित कर सकते हैं।

जब एसेट पाइपलाइन को सक्षम किया जाता है, तो आप अपने मेनिफ़ेस्ट का नाम स्रोत के रूप में पास कर सकते हैं, और अन्य जावास्क्रिप्ट या कॉफ़ीस्क्रिप्ट फ़ाइलों को शामिल कर सकते हैं।

यदि सर्वर इन संकेतों के लिए प्रारंभिक संकेत हेडर लिंक का समर्थन करता है तो स्वचालित रूप से धकेल दिया जाएगा।

विकल्प

जब अंतिम पैरामीटर एक हैश है तो आप उस पैरामीटर का उपयोग करके HTML विशेषताओं को जोड़ सकते हैं। निम्नलिखित विकल्प समर्थित हैं:

  • :extname - जब तक एक्सटेंशन पहले से मौजूद न हो, तब तक जनरेट किए गए URL में एक्सटेंशन जोड़ें। यह केवल सापेक्ष URL के लिए लागू होता है।

  • :protocol - उत्पन्न URL का प्रोटोकॉल सेट करता है। यह विकल्प केवल तब लागू होता है जब एक रिश्तेदार URL और host विकल्प प्रदान किए जाते हैं।

  • :host - जब एक रिश्तेदार URL प्रदान किया जाता है तो होस्ट को उस पथ में जोड़ा जाता है।

  • :skip_pipeline - यह विकल्प एसेट पाइपलाइन को बायपास करने के लिए उपयोग किया जाता है जब यह सही पर सेट होता है।

  • <tt>: nonce <tt> - जब आप सही पर सेट होते हैं, तो सामग्री सुरक्षा नीति सक्षम होने पर एक स्वचालित गैर-मान जोड़ता है।

उदाहरण

javascript_include_tag "xmlhr"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "xmlhr", host: "localhost", protocol: "https"
# => <script src="https://localhost/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "template.jst", extname: false
# => <script src="/assets/template.debug-1284139606.jst"></script>

javascript_include_tag "xmlhr.js"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "common.javascript", "/elsewhere/cools"
# => <script src="/assets/common.javascript.debug-1284139606.js"></script>
#    <script src="/elsewhere/cools.debug-1284139606.js"></script>

javascript_include_tag "http://www.example.com/xmlhr"
# => <script src="http://www.example.com/xmlhr"></script>

javascript_include_tag "http://www.example.com/xmlhr.js"
# => <script src="http://www.example.com/xmlhr.js"></script>

javascript_include_tag "http://www.example.com/xmlhr.js", nonce: true
# => <script src="http://www.example.com/xmlhr.js" nonce="..."></script>

एक लिंक टैग देता है जो ब्राउज़र source को प्रीलोड करने के लिए उपयोग कर सकता है। source परिसंपत्ति पाइपलाइन, एक पूर्ण पथ, या एक यूआरआई द्वारा प्रबंधित संसाधन का मार्ग हो सकता है।

  • :type - ऑटो-जनरेट किए गए माइम प्रकार को ओवरराइड करें, source एक्सटेंशन के लिए माइम प्रकार के लिए डिफ़ॉल्ट।

  • :as - विशेषता के रूप में ऑटो-जेनरेट किए गए मान को ओवरराइड करें, source एक्सटेंशन और माइम प्रकार का उपयोग करके गणना की गई।

  • :crossorigin - क्रॉस-ओरिजिनल संसाधनों को लोड करने के लिए आवश्यक क्रॉसोरिगिन विशेषता को निर्दिष्ट करें।

  • :nopush - निर्दिष्ट करें कि सर्वर पुश का उपयोग संसाधन के लिए वांछित नहीं है। false अवहेलना करता false

preload_link_tag("custom_theme.css")
# => <link rel="preload" href="/assets/custom_theme.css" as="style" type="text/css" />

preload_link_tag("/videos/video.webm")
# => <link rel="preload" href="/videos/video.mp4" as="video" type="video/webm" />

preload_link_tag(post_path(format: :json), as: "fetch")
# => <link rel="preload" href="/posts.json" as="fetch" type="application/json" />

preload_link_tag("worker.js", as: "worker")
# => <link rel="preload" href="/assets/worker.js" as="worker" type="text/javascript" />

preload_link_tag("//example.com/font.woff2")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="use-credentials" />

preload_link_tag("/media/audio.ogg", nopush: true)
# => <link rel="preload" href="/media/audio.ogg" as="audio" type="audio/ogg" />

तर्क के रूप में निर्दिष्ट स्रोतों के लिए एक स्टाइलशीट लिंक टैग लौटाता है। यदि आप कोई एक्सटेंशन निर्दिष्ट नहीं करते हैं, तो .css को स्वचालित रूप से जोड़ दिया जाएगा। आप अंतिम तर्क के रूप में हैश पास करके लिंक विशेषताओं को संशोधित कर सकते हैं। ऐतिहासिक कारणों से, 'मीडिया' विशेषता हमेशा "स्क्रीन" के लिए मौजूद रहेगी और डिफॉल्ट करेगी, इसलिए आपको इसे सभी मीडिया प्रकारों पर लागू करने के लिए स्टाइलशीट (ओं) के लिए स्पष्ट रूप से "सभी" पर सेट करना होगा।

यदि सर्वर इन संकेतों के लिए प्रारंभिक संकेत हेडर लिंक का समर्थन करता है तो स्वचालित रूप से धकेल दिया जाएगा।

stylesheet_link_tag "style"
# => <link href="/assets/style.css" media="screen" rel="stylesheet" />

stylesheet_link_tag "style.css"
# => <link href="/assets/style.css" media="screen" rel="stylesheet" />

stylesheet_link_tag "http://www.example.com/style.css"
# => <link href="http://www.example.com/style.css" media="screen" rel="stylesheet" />

stylesheet_link_tag "style", media: "all"
# => <link href="/assets/style.css" media="all" rel="stylesheet" />

stylesheet_link_tag "style", media: "print"
# => <link href="/assets/style.css" media="print" rel="stylesheet" />

stylesheet_link_tag "random.styles", "/css/stylish"
# => <link href="/assets/random.styles" media="screen" rel="stylesheet" />
#    <link href="/css/stylish.css" media="screen" rel="stylesheet" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 424
def video_tag(*sources)
  options = sources.extract_options!.symbolize_keys
  public_poster_folder = options.delete(:poster_skip_pipeline)
  sources << options
  multiple_sources_tag_builder("video", sources) do |tag_options|
    tag_options[:poster] = path_to_image(tag_options[:poster], skip_pipeline: public_poster_folder) if tag_options[:poster]
    tag_options[:width], tag_options[:height] = extract_dimensions(tag_options.delete(:size)) if tag_options[:size]
  end
end

sources लिए एक HTML वीडियो टैग देता sources । यदि sources एक स्ट्रिंग है, तो एक एकल वीडियो टैग वापस किया जाएगा। यदि sources एक सरणी है, तो प्रत्येक स्रोत के लिए नेस्टेड स्रोत टैग वाला एक वीडियो टैग वापस कर दिया जाएगा। sources आपके सार्वजनिक वीडियो निर्देशिका में पूर्ण पथ या फ़ाइलें हो सकते हैं।

विकल्प

जब अंतिम पैरामीटर एक हैश है तो आप उस पैरामीटर का उपयोग करके HTML विशेषताओं को जोड़ सकते हैं। निम्नलिखित विकल्प समर्थित हैं:

  • :poster - वीडियो लोड होने से पहले दिखाया जाने वाला चित्र (स्क्रीनशॉट की तरह) सेट करें। पथ की गणना image_tag के src की तरह की image_tag

  • :size - "{चौड़ाई} x {ऊंचाई}" या "{संख्या}" के रूप में माना जाता है, इसलिए "30x45" चौड़ाई = "30" और ऊंचाई = "45", और "50" चौड़ाई = "50" और ऊंचाई बन जाती है = "50"। :size यदि मूल्य सही प्रारूप में नहीं है तो :size की अनदेखी की जाएगी।

  • :poster_skip_pipeline संपत्ति पाइपलाइन को बाईपास करेगा जब :poster सार्वजनिक फ़ोल्डर में परिसंपत्ति का उपयोग करने के बजाय :poster विकल्प का उपयोग करें।

उदाहरण

video_tag("trailer")
# => <video src="/videos/trailer"></video>
video_tag("trailer.ogg")
# => <video src="/videos/trailer.ogg"></video>
video_tag("trailer.ogg", controls: true, preload: 'none')
# => <video preload="none" controls="controls" src="/videos/trailer.ogg"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png")
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="/assets/screenshot.png"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png", poster_skip_pipeline: true)
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="screenshot.png"></video>
video_tag("/trailers/hd.avi", size: "16x16")
# => <video src="/trailers/hd.avi" width="16" height="16"></video>
video_tag("/trailers/hd.avi", size: "16")
# => <video height="16" src="/trailers/hd.avi" width="16"></video>
video_tag("/trailers/hd.avi", height: '32', width: '32')
# => <video height="32" src="/trailers/hd.avi" width="32"></video>
video_tag("trailer.ogg", "trailer.flv")
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"])
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"], size: "160x120")
# => <video height="120" width="160"><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>