问题描述
例如,我想将loading="lazy"
属性添加到我的所有图像中,例如:
image::myimage.jpg[]
也许有人在Creating custom HTML with asciidoctor询问过这个问题,但是这个问题还不够清楚,我无法确定。
解决方法
此文档记录在:https://asciidoctor.org/docs/user-manual/#provide-custom-templates,但感觉像是一个最小的示例将是有益的。
main.adoc
image::myimage.jpg[]
template_dir / block_image.html.erb
<%#encoding:UTF-8%><div<%= @id && %( id="#{@id}") %> class="<%= ['imageblock',@style,role].compact * ' ' %>"<%
if (attr? :align) || (attr? :float)
%> style="<%= [("text-align: #{attr :align};" if attr? :align),("float: #{attr :float};" if attr? :float)].compact * ' ' %>"<%
end %>>
<div class="content"><%
if attr? :link %>
<a class="image" href="<%= attr :link %>"><img src="<%= image_uri(attr :target) %>" loading="lazy" alt="<%= attr :alt %>"<%= (attr? :width) ? %( width="#{attr :width}") : nil %><%= (attr? :height) ? %( height="#{attr :height}") : nil %>></a><%
else %>
<img src="<%= image_uri(attr :target) %>" loading="lazy" alt="<%= attr :alt %>"<%= (attr? :width) ? %( width="#{attr :width}") : nil %><%= (attr? :height) ? %( height="#{attr :height}") : nil %>><%
end %>
</div><%
if title? %>
<div class="title"><%= captioned_title %></div><%
end %>
</div>
这是来自https://github.com/asciidoctor/asciidoctor-backends/blob/master/erb/html5/block_image.html.erb的默认模板的副本,但是通过添加loading="lazy"
修改了HTML。
宝石文件
gem 'asciidoctor','2.0.10'
gem 'concurrent-ruby','1.1.7'
gem 'tilt','2.0.10'
我们需要安装这些额外的宝石才能使其正常工作。
编译:
asciidoctor --template-dir template_dir main.adoc
就是这样,输出HTML现在包含loading="lazy"
。
在Asciidoctor 2.0.10中进行了测试。