仅根据需要将库附加到标题 -- theming 领域 和 8 领域 drupal 相关 的问题

Attaching a library to the header only as needed


0
vote

问题

中文

我正在构建一个新模块。由于某种原因,jQuery仅在jQuery库附加到标题而不是默认页脚时工作。在构建模块时,我正在将库附加到文件Flot_d8.module

  function flot_d8_page_attachments(array &$page) {   $attach_footer = FALSE;   $attach_header = FALSE;   if ($attach_footer) {     $page1['#attached']['library'][] = 'flot_d8/flot';   }    if ($attach_header) {     $page['#attached']['html_head'][] = [       // The data.       [         // The HTML tag to add, in this case a <script> tag.         '#tag' => 'script',         '#attributes' => array(           'language' => "javascript",           'type' => "text/javascript",           'src' => "http://test.mysite.com/core/assets/vendor/jquery/jquery.js",         ),         '#value' => '',       ],       // A key, to make it possible to recognize this HTML <HEAD>       // element when altering.       'jquery-define'     ];      // Attach the flot asset on every page.     $page['#attached']['html_head'][] = [       // The data.       [         // The HTML tag to add, in this case a <script> tag.         '#tag' => 'script',         '#attributes' => array(           'language' => "javascript",           'type' => "text/javascript",           'src' => "http://test.mysite.com/modules/flot_d8/flot/jquery.flot.js",         ),         '#value' => '',       ],       // A key, to make it possible to recognize this HTML <HEAD>       // element when altering.       'flot-define'     ];   }  }   
显然,这遗漏了在FLOT_D8.LIBRARIES.YML文件中定义的资产的全部点。我看到所谓的附加资产的"正确" 方式是将它们添加到模板上。我使用了 attach_library() redig函数并在脚本中使用"DEFER" 属性进行测试。我的模板文件(flot-d8-my-template.html.twig)是这样的:
  {{ attach_library('flot_d8/flot')}} <script type="text/javascript" defer="defer">//<![CDATA[ (function($) {   $(window).load(function(){     $(function () {       $.plot($("#{{div_id}}"), [ {% for seri in series %} {{seri|json_encode()|raw}},{% endfor %}]);     });   }) })(jQuery)//]]>  </script> <div id="{{div_id}}" style="width:600px;height:300px;"></div>   

检查页面源显示,当在枝条文件中定义库时,jQuery和Flot库都包含在页面底部的聚合JS中。此外,页脚上没有呈现此模块的页面,页脚中没有jQuery或Flot代码。但是,当我手动强制使用 hook_page_attachments()

时,代码只能渲染在标题中的夹杂物中正确渲染

所以我有两个问题。 有谁可以帮助我理解为什么在这种情况下,页脚库没有运行,如果我可以改变一些东西以使他们工作? 如果没有办法将页脚汇总的库运作,则仅在需要时迫使他们包含在标题中的最佳方法?

英文原文

I'm building a new module. For some reason the jQuery only works when the jQuery library is attached to the header instead of the default footer. While building the module I was attaching the libraries with the following in the file flot_d8.module

function flot_d8_page_attachments(array &$page) {   $attach_footer = FALSE;   $attach_header = FALSE;   if ($attach_footer) {     $page1['#attached']['library'][] = 'flot_d8/flot';   }    if ($attach_header) {     $page['#attached']['html_head'][] = [       // The data.       [         // The HTML tag to add, in this case a <script> tag.         '#tag' => 'script',         '#attributes' => array(           'language' => "javascript",           'type' => "text/javascript",           'src' => "http://test.mysite.com/core/assets/vendor/jquery/jquery.js",         ),         '#value' => '',       ],       // A key, to make it possible to recognize this HTML <HEAD>       // element when altering.       'jquery-define'     ];      // Attach the flot asset on every page.     $page['#attached']['html_head'][] = [       // The data.       [         // The HTML tag to add, in this case a <script> tag.         '#tag' => 'script',         '#attributes' => array(           'language' => "javascript",           'type' => "text/javascript",           'src' => "http://test.mysite.com/modules/flot_d8/flot/jquery.flot.js",         ),         '#value' => '',       ],       // A key, to make it possible to recognize this HTML <HEAD>       // element when altering.       'flot-define'     ];   }  } 

Obviously, this misses the whole point of having assets defined in the flot_d8.libraries.yml file. I see the supposed "correct" way of attaching assets is to add them to the template. I used the attach_library() twig function and tested it with and without the "defer" attribute in the script. My template file (flot-d8-my-template.html.twig) is this:

{{ attach_library('flot_d8/flot')}} <script type="text/javascript" defer="defer">//<![CDATA[ (function($) {   $(window).load(function(){     $(function () {       $.plot($("#{{div_id}}"), [ {% for seri in series %} {{seri|json_encode()|raw}},{% endfor %}]);     });   }) })(jQuery)//]]>  </script> <div id="{{div_id}}" style="width:600px;height:300px;"></div> 

Checking the page source shows that when the library is defined in the twig file, both the jquery and flot libraries are included in the aggregated js at the bottom of the page. Also, on pages which do not render this module, no jquery or flot code is included in the footer. However, the code only renders correctly when I manually force the inclusion in the header using hook_page_attachments()

So I have two questions. Can anyone help me understand why footer-included libraries do not function in this case, and if I can change something to make them work? If there is no way to make footer-included libraries to function, what is the best way to force their inclusion in the header only when needed?

     
         
         

回答列表

相关问题

1  添加图像上传到主题配置  ( Add image upload to theme configuration ) 
我正在尝试将图像上传到我所做的主题中的主题设置。显示图像上传字段确实出现,但实际上没有上传,并且图像永远不会得到保存。 在主题 - settings.php中我有函数 function mytheme_form_system_theme_settings_alter(&$form, $form_state, $...

0  从面包屑中取出分隔符  ( Remove separator from breadcrumb ) 
如何从面包屑中删除 < 我尝试了 implode('<', $value['data']) 但没有运气 function bootstrap_fit_breadcrumb($variables) { $breadcrumb = $variables['breadcrumb']; ...

1  某些阻止代码正确处理匿名用户  ( Certain block code processes correctly for anonymous user ) 
我在Drupal 7.41网站上安装了Bluemasters主题。在此主题中,我创建了几个新区域并将新块添加到这些区域,所有这些区域都在任何访问者可用的主页上。 我发现当我将其视为经过身份验证的用户时,主页与匿名用户一起看。作为匿名用户,我有4个独立的文本块,彼此顶部,但是当我登录此文本都是正确的地方。 我发现如果我...

27  在Twig模板中获取前往主题资产的路径  ( Get path to theme assets in twig template ) 
我有一个关于在Twig模板中获取图像的路径的问题。图像未分配给字段或其他东西。只是存储在"mytheme / image / icon / my-icon.png" 中的静态图像。 在Drupal 7中,我将在我的node.template中获取以下代码: <img src="<?php print base_p...

7  如何创建一个简单的表格?  ( How do i create a simple table ) 
我正在研究一个我需要在表中显示内容的模块。虽然我已经创建了一个简单的表,但我需要知道如何使用 theme() ,因为不能直接调用函数。 基本上,相当于以下行,在Drupal 7中完全精细,在Drupal 7? return theme(table,array(header => '$header', rows =...

2  阻止模拟主题的好方法?  ( Are blocks a ok way to model a theme ) 
我试图建立一个新的主题。阻止模拟主题的好方法?有些网站似乎推荐它们,其他网站说他们应该避免。 ...

7  创建自定义枝条过滤器时出错  ( Error when creating a custom twig filter ) 
我正在尝试在drupal 8中创建自定义枝条过滤器。目标是在模板中使用我的自定义过滤器如下: {{ a_variable|myfilter }} 我创建了一个带有3个文件的自定义模块: MODULE.info.yml MODULE.services.yml src/TwigExtension/MyExt...

0  钩形表格更改不会在确实存在的自定义表单上射击[已关闭]  ( Hook form alter not firing on a custom form that does exist ) 
此问题似乎在帮助中心中定义的范围内涉及Drupal。。 想要改进这个问题?更新问题,所以它是关于drupal答案的主题。 ...

0  什么导致菜单停止通过菜单中的半途而废  ( What causes menu to stop querying for children half way through menu ) 
我有一个'主菜单',在一个案例中呈现使用'bartik'主题(网站预览)并在另一个使用'bootstrap'主题。 (网站预览) 与引导主题,从左到右工作,孩子们将在"出版物" 之前呈现。然后没有孩子。相同的菜单介绍了Bartik的所有孩子一直穿过。透过它,孩子们不在PHP数据中($元素[#below]),并不打印...

1  我可以将数据发送到表单提交的模板页面。但分页不正常工作  ( I can send data to a template page on form submission but pagination not workin ) 
模块文件: <?php function BM_weather_API_part2_theme() { return array( 'BM_weather_API_part2' => array( 'template' => 'BM_weather_API_part2', 'v...

17  如何将纯文本呈现为模板中的HTML?  ( How can i render plain text as html in a template ) 
我遇到了从纯文本字段中尝试将SVG图像标记代码渲染为HTML。 我希望从纯文本字段中渲染SVG代码,而不覆盖其他地方的纯文本字段呈现。 纯文本格式当前转换所有HTML标记和&lt;&gt;到 &lt; &gt; 。 我创建了一个字段模板,并尝试将字段内容输出为 {{ item.content.context.va...

0  CSS和JS没有显示  ( Css and js are not showing ) 
我刚刚开始使用Drupal 8,我已经遇到了问题。在我的Info.yml文件中,我添加了库/ IES和我的Libraries.yml是那些包含的文件。当我在admin中清除缓存时,CSS不会在源代码中显示。如果这将是问题,但我甚至清除缓存,但它不是。 这是我的libraries.yml文件 global-styl...

0  覆盖现场收集输出  ( Overriding field collection output ) 
我有一个名为的内容类型: lectures 在此内容中,我具有名为的字段收集字段: field_course_video_slide_sync 此字段集合由3个字段组成: 99887662 , field_slide_title 和 field_slide_number 我想要实现的是将它们重写为此: ...

0  如何在页面加载上打开Bootstrap照片库?  ( How to open bootstrap photo gallery on page load ) 
我正在使用 bootstrap照片库,并希望在页面加载时打开幻灯片。 ...

4  将库添加到页脚  ( Add library to footer ) 
如果我使用 libraries api 模块在我的模块中添加JavaScript库,是有可能在页脚中的库负载而不是标题? 如果没有替代方法? ...

3  如何在Drupal_Root /库中放置库?  ( How to place a library in drupal root libraries ) 
在drupal 8中,当我在 .libraries.yml 文件中声明一个库时,似乎库文件必须位于模块内或主题文件夹中 .libraries.yml 文件。 例如,如果MyModule模块包含此 .libraries.yml 文件: form-alter-css: version: 1.x css: ...

1  如何修改注释-wrapper.tpl.php以更改注释表单布局?  ( How to modify comment wrapper tpl php to change the comment form layout ) 
我正在尝试更改评论表单的布局。不幸的是,当我只打印我需要和提交按钮的字段时,我不能使用该按钮,当我按下它时,没有任何反应。 我在注释-wrapper.tpl.php中使用以下代码: <div id="comment-rating"> <?php print render($content['comment...

1  如何隐藏自定义users-profile.tpl.php页面上的用户名?  ( How can i hide the username on a custom user profile tpl php page ) 
我正在制作一个自定义user-profile.tpl.php页面,并希望将标题/ username的"商业名称" 字段置于额外位置的标题/ username。 用户名未显示在列表中: 行政»配置»人员»帐户设置»管理显示,以便在那里删除它。 我的猜测是我需要将一些逻辑添加到page.tpl.php无法在用户配置文件上...

0  CSS注射器不适用于大多数当前版本  ( Css injector not serving most current version ) 
我对我的Drupal 7站点上的CSS注射器规则进行了更改。尽管几次刷新所有高速缓存,但在实时站点上包含的CSS文件不是CSS注射器规则的最新版本。当我查看页面的 <head> 部分时,我发现如下所示的CSS注射器文件: <link type="text/css" rel="stylesheet" href="h...

0  如何根据视图选择自定义块和区域  ( How to select a custom block and region according to a view ) 
我有一个需要以特定的HTML页面格式显示的视图/显示页面。 我做了 html--viewname.tpl.php 和 page--viewname.tpl.php 以显示我的视图。 page--viewname.tpl.php 我调用 print render($page['content']); 渲染我的视图。...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.