添加引导 CDN答案

【问题标题】：Add Boostrap CDN添加引导 CDN
【发布时间】：2022-01-11 14:24:07
【问题描述】：

我是 drupal 9 的新手...我发现我的 drupal 页面的头部位于 html.html.twig 文件中。我想将 boostrap CDN 添加到我的文件的头部，但是当我附加它时，什么都没有出现。该脚本甚至没有显示在源页面中。我认为文档的整个头部都没有可视化。我该怎么办？

{# /**
 * @file
 * Default theme implementation for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain one or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
  {% block stylesheets %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    {% endblock %}
    {% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    {% endblock %}
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>
#}

【问题讨论】：

你清除缓存了吗？

标签： bootstrap-4 drupal

【解决方案1】：

在 Twig 文件中不要忘记换行：

您的 CSS 文件带有 {% block stylesheets %}
您的 JS 文件带有 {% block javascripts %}。

它将允许您以后轻松地为每页添加额外的 CSS 和 JS 文件。

对文件进行更改后，请务必清除应用缓存和/或浏览器缓存（在大多数浏览器中为CTRL + F5）。

如果你分享你的文件的原始代码会很棒。

【讨论】：

是的，我清除了缓存。还是不行。
我添加了我的 html.html.twig
您是否创建了过滤器？我尝试运行它，我看到的第一件事是未知safe_join 和t 过滤器的错误。另外，您有很多参数，也许您没有提供其中一个？这可能会导致错误。最后删除#} - 它不应该在那里。

【解决方案2】：

尝试以下方法之一：

使用 Bootstrap for Drupal 作为您的基本主题：https://www.drupal.org/project/bootstrap - 您始终可以在它之上构建和/或扩展它。
使用 .libraries.yml 文件并为当前主题指定所需的库。（这是一个很酷的读物： https://www.drupal.org/docs/theming-drupal/adding-stylesheets-css-and-javascript-js-to-a-drupal-theme#s-adding-attributes-to-script-elements)。
创建一个 preprocess_page 挂钩并使用它将您的脚本注入到 head 部分。

【讨论】：

【解决方案3】：

我解决了这个问题。还有一个 html.html.twig 文件覆盖了另一个文件。如果你找到合适的文件，你可以简单地添加<link type="text/css" href="myPathForCssFile.css"/>

【讨论】：