添加 Bootstrap CDN

Question

我是 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>
#}

Answer 1

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

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

它将允许您稍后在每页中轻松添加额外的 CSS 和 JS 文件。

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

如果您能分享您文件的原始代码，那就太好了。

Answer 2

尝试以下方法之一：

使用 Bootstrap for Drupal 作为您的基本主题：https://www.drupal.org/project/bootstrap - 您始终可以在其基础上构建 and/or 扩展它。
使用 .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 挂钩并使用它来将您的脚本注入头部。

Answer 3

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

添加 Bootstrap CDN

Add Boostrap CDN

drupal

bootstrap-4