модуль ActionView::Helpers::AssetTagHelper
Этот модуль предоставляет методы для генерации HTML-ссылок, связывающих представления с ресурсами, такими как изображения, JavaScript, таблицы стилей и ленты новостей. Эти методы не проверяют существование ресурсов перед созданием ссылок:
image_tag("rails.png")
# => <img src="/assets/rails.png" />
stylesheet_link_tag("application")
# => <link href="/assets/application.css?body=1" rel="stylesheet" />
Константы
- MAX_HEADER_SIZE
Открытые методы экземпляров
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 485
def audio_tag(*sources)
multiple_sources_tag_builder("audio", sources)
end Возвращает HTML-тег audio для sources. Если sources является строкой, возвращается один тег audio. Если sources является массивом, возвращается тег audio с вложенными тегами source для каждого источника. sources может быть полными путями или файлами, существующими в вашем каталоге public audios.
Если последний параметр является хешем, вы можете добавить атрибуты 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>
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 235
def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {})
if !(type == :rss || type == :atom || type == :json) && tag_options[:type].blank?
raise ArgumentError.new("You should pass :type tag_option key explicitly, because you have passed #{type} type other than :rss, :atom, or :json.")
end
tag(
"link",
"rel" => tag_options[:rel] || "alternate",
"type" => tag_options[:type] || Template::Types[type].to_s,
"title" => tag_options[:title] || type.to_s.upcase,
"href" => url_options.is_a?(Hash) ? url_for(url_options.merge(only_path: false)) : url_options
)
end Возвращает тег ссылки, который браузеры и читатели лент новостей могут использовать для автоматического определения RSS, Atom или JSON ленты. type может быть :rss (по умолчанию), :atom, или :json. Управление параметрами ссылки в формате url_for с помощью url_options. Вы можете изменить сам тег LINK в tag_options.
Параметры
-
:rel— Укажите отношение этой ссылки, по умолчанию «alternate» -
:type— Переопределите автоматически сгенерированный тип MIME -
: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" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 276
def favicon_link_tag(source = "favicon.ico", options = {})
tag("link", {
rel: "icon",
type: "image/x-icon",
href: path_to_image(source, skip_pipeline: options.delete(:skip_pipeline))
}.merge!(options.symbolize_keys))
end Возвращает тег ссылки для значка favicon, управляемого конвейером ресурсов.
Если на странице нет ссылки, сгенерированной этим помощником, браузеры автоматически запрашивают /favicon.ico, и кэшируют файл, если запрос успешен. Обновление значка favicon сложно, если он изменяется.
Для лучшего управления приложения могут позволить конвейеру ресурсов управлять своим значком favicon, сохраняя файл в app/assets/images, и используя этот помощник для генерации соответствующего тега ссылки.
Помощник получает имя файла значка favicon в качестве первого аргумента, по умолчанию «favicon.ico», а также поддерживает :rel и :type параметры для переопределения их значений по умолчанию, «icon» и «image/x-icon» соответственно:
favicon_link_tag # => <link href="/assets/favicon.ico" rel="icon" type="image/x-icon" /> favicon_link_tag 'myicon.ico' # => <link href="/assets/myicon.ico" rel="icon" type="image/x-icon" />
Mobile Safari ищет другой тег ссылки, указывающий на изображение, которое будет использоваться, если вы добавите страницу в домашний экран устройства 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 393
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]
options[:loading] ||= image_loading if image_loading
options[:decoding] ||= image_decoding if image_decoding
tag("img", options)
end Возвращает HTML-тег изображения для source. source может быть полным путем, файлом или прикреплением Active Storage.
Параметры
Вы можете добавить атрибуты HTML с помощью options. options поддерживает дополнительные ключи для удобства и соответствия:
-
:size— Предоставляется в виде «{Ширина}x{Высота}» или «{Число}», поэтому «30x45» становится width=«30» и height=«45», а «50» становится width=«50» и height=«50».: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">
Объекты Active Storage (изображения, загруженные пользователями вашего приложения):
image_tag(user.avatar) # => <img src="/rails/active_storage/blobs/.../tiger.jpg" /> image_tag(user.avatar.variant(resize_to_limit: [100, 100])) # => <img src="/rails/active_storage/representations/.../tiger.jpg" /> image_tag(user.avatar.variant(resize_to_limit: [100, 100]), size: '100') # => <img width="100" height="100" src="/rails/active_storage/representations/.../tiger.jpg" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 89
def javascript_include_tag(*sources)
options = sources.extract_options!.stringify_keys
path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
preload_links = []
nopush = options["nopush"].nil? ? true : options.delete("nopush")
crossorigin = options.delete("crossorigin")
crossorigin = "anonymous" if crossorigin == true
integrity = options["integrity"]
rel = options["type"] == "module" ? "modulepreload" : "preload"
sources_tags = sources.uniq.map { |source|
href = path_to_javascript(source, path_options)
if preload_links_header && !options["defer"] && href.present? && !href.start_with?("data:")
preload_link = "<#{href}>; rel=#{rel}; as=script"
preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
preload_link += "; integrity=#{integrity}" unless integrity.nil?
preload_link += "; nopush" if nopush
preload_links << preload_link
end
tag_options = {
"src" => href,
"crossorigin" => crossorigin
}.merge!(options)
if tag_options["nonce"] == true
tag_options["nonce"] = content_security_policy_nonce
end
content_tag("script", "", tag_options)
}.join("\n").html_safe
if preload_links_header
send_preload_links_header(preload_links)
end
sources_tags
end Возвращает HTML-тег script для каждого из указанных sources.
Источники могут быть путями к JavaScript-файлам. Относительные пути предполагаются относительными к assets/javascripts, полные пути предполагаются относительными к корню документа. Относительные пути являются стандартными, используйте абсолютные пути только при необходимости.
При передаче путей расширение «.js» необязательно. Если вы не хотите добавлять «.js» к пути, extname: false может быть задано в параметрах.
Вы можете изменить атрибуты HTML тега script, передав хеш в качестве последнего аргумента.
При включенном конвейере ресурсов вы можете передать имя вашего манифеста в качестве источника и включить другие JavaScript или CoffeeScript-файлы в манифесте.
Если сервер поддерживает заголовки Early Hints, ссылки на эти ресурсы будут автоматически проталкиваться.
Параметры
Если последний параметр является хешем, вы можете добавить атрибуты HTML с помощью этого параметра. Поддерживаются следующие параметры:
-
:extname— Добавить расширение к сгенерированному URL, если расширение ещё не существует. Это относится только к относительным URL. -
:protocol— Устанавливает протокол сгенерированного URL. Этот параметр применим только в случае относительного URL иhostпараметров. -
:host— При использовании относительного URL хост добавляется к этому пути. -
:skip_pipeline— Этот параметр используется для обхода конвейера ресурсов, когда он установлен в значение true. -
:nonce— При установке в значение true добавляет автоматическое значение nonce, если у вас включен Content Security Policy.
Примеры
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>
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 319
def preload_link_tag(source, options = {})
href = path_to_asset(source, skip_pipeline: options.delete(:skip_pipeline))
extname = File.extname(source).downcase.delete(".")
mime_type = options.delete(:type) || Template::Types[extname]&.to_s
as_type = options.delete(:as) || resolve_link_as(extname, mime_type)
crossorigin = options.delete(:crossorigin)
crossorigin = "anonymous" if crossorigin == true || (crossorigin.blank? && as_type == "font")
integrity = options[:integrity]
nopush = options.delete(:nopush) || false
link_tag = tag.link(**{
rel: "preload",
href: href,
as: as_type,
type: mime_type,
crossorigin: crossorigin
}.merge!(options.symbolize_keys))
preload_link = "<#{href}>; rel=preload; as=#{as_type}"
preload_link += "; type=#{mime_type}" if mime_type
preload_link += "; crossorigin=#{crossorigin}" if crossorigin
preload_link += "; integrity=#{integrity}" if integrity
preload_link += "; nopush" if nopush
send_preload_links_header([preload_link])
link_tag
end Возвращает тег ссылки, который браузеры могут использовать для предварительной загрузки source. source может быть путём к ресурсу, управляемому конвейером ресурсов, полным путём или URI.
Параметры
-
:type— Переопределите автоматически сгенерированный тип MIME, по умолчанию тип MIME дляsourceрасширения. -
:as— Переопределите автоматически сгенерированное значение для атрибута, рассчитанного с помощьюsourceрасширения и типа MIME. -
:crossorigin— Укажите атрибут crossorigin, необходимый для загрузки ресурсов из других доменов. -
:nopush— Укажите, не требуется ли использование серверного ускорения для ресурса. По умолчаниюfalse. -
:integrity— Укажите атрибут integrity.
Примеры
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" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 170
def stylesheet_link_tag(*sources)
options = sources.extract_options!.stringify_keys
path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
preload_links = []
crossorigin = options.delete("crossorigin")
crossorigin = "anonymous" if crossorigin == true
nopush = options["nopush"].nil? ? true : options.delete("nopush")
integrity = options["integrity"]
sources_tags = sources.uniq.map { |source|
href = path_to_stylesheet(source, path_options)
if preload_links_header && href.present? && !href.start_with?("data:")
preload_link = "<#{href}>; rel=preload; as=style"
preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
preload_link += "; integrity=#{integrity}" unless integrity.nil?
preload_link += "; nopush" if nopush
preload_links << preload_link
end
tag_options = {
"rel" => "stylesheet",
"crossorigin" => crossorigin,
"href" => href
}.merge!(options)
if apply_stylesheet_media_default && tag_options["media"].blank?
tag_options["media"] = "screen"
end
tag(:link, tag_options)
}.join("\n").html_safe
if preload_links_header
send_preload_links_header(preload_links)
end
sources_tags
end Возвращает тег ссылки на таблицу стилей для указанных источников.
При передаче путей расширение .css необязательно. Если вы не указываете расширение, .css будет автоматически добавлен. Если вы не хотите добавлять .css, установите extname: false в параметрах. Вы можете изменить атрибуты ссылки, передав хеш в качестве последнего аргумента.
Если сервер поддерживает заголовки Early Hints, ссылки на эти ресурсы будут автоматически проталкиваться.
Параметры
-
:extname— Добавить расширение к сгенерированному URL, если расширение ещё не существует. Это относится только к относительным URL. -
:protocol— Устанавливает протокол сгенерированного URL. Этот параметр применим только в случае относительного URL иhostпараметров. -
:host— При использовании относительного URL хост добавляется к этому пути. -
:skip_pipeline— Этот параметр используется для обхода конвейера ресурсов, когда он установлен в значение true.
Примеры
stylesheet_link_tag "style" # => <link href="/assets/style.css" rel="stylesheet" /> stylesheet_link_tag "style.css" # => <link href="/assets/style.css" rel="stylesheet" /> stylesheet_link_tag "http://www.example.com/style.css" # => <link href="http://www.example.com/style.css" rel="stylesheet" /> stylesheet_link_tag "style.less", extname: false, skip_pipeline: true, rel: "stylesheet/less" # => <link href="/stylesheets/style.less" rel="stylesheet/less"> 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" rel="stylesheet" /> # <link href="/css/stylish.css" rel="stylesheet" />
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 458
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 Возвращает HTML тег видео для sources. Если sources является строкой, будет возвращён один тег видео. Если sources является массивом, будет возвращён тег видео с вложенными тегами source для каждого источника. sources могут быть полными путями или файлами, существующими в вашем общедоступном каталоге видео.
Параметры
Когда последним параметром является хэш, вы можете добавить атрибуты HTML, используя этот параметр. Поддерживаются следующие параметры:
-
:poster— Установить изображение (например, скриншот), которое будет отображаться перед загрузкой видео. Путь вычисляется какsrcдляimage_tag. -
:size— Указывается в формате «{Ширина}x{Высота}» или «{Число}», например «30x45» становится width="30" и height="45", а «50» — width="50" и height="50".:sizeбудет проигнорирован, если значение не соответствует правильному формату. -
:poster_skip_pipelineобойдёт пайплайн активов, используя опцию:posterвместо использования актива из папки public.
Примеры
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>
© 2004–2021 David Heinemeier Hansson
Licensed under the MIT License.