试图了解如何使用自定义 Drupal 主题显示图像答案

【问题标题】：Trying to understand how display images with a custom Drupal theme试图了解如何使用自定义 Drupal 主题显示图像
【发布时间】：2019-11-29 20:07:02
【问题描述】：

我正在尝试了解如何创建 Drupal 8 自定义主题。我对此有一些疑问，我在文档或其他方面找不到真正的答案。有人可以帮帮我吗？

我用这些信息创建了一个 libraries.yml 和 theme_info.yml ：

name: Cosplay Academy
type: theme
description: 'A cuddly theme that offers extra fluffiness.'
core: 8.x
libraries:
- cosplayacademy/global-styling-and-scripts
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

global-styling-and-scripts:
  version: VERSION
  css:
    theme:
      css/plugins/bootstrap.min.css: {}
      css/style.css: {}
      css/skin-modes.css: {}
      css/icons.css: {}
      css/plugins/horizontal-menu.css: {}
      css/colors/color6.css: {}

我在我的 html 标记中看到我的 css 文件，但在它之前有很多 css 文件。为什么？我可以删除它们吗？

另外，我正在尝试将图像显示到 data-image-src 中，但它不会显示：/ 当我查看我的 html 标记并复制图像 url 时，它可以工作，我可以看到它，但我无法在我的页面中看到它...我完全迷路了：/

如下图所示，我的css文件最后加载了，我的图片没有出现……

【问题讨论】：

标签： html css drupal theming

【解决方案1】：

额外的 css 文件：
您看到的额外 css 文件是由 drupal 核心和已启用的各种模块添加的。通过包含哪些 css 文件，我可以看到您在查看此页面时已登录，例如，已将工具栏 css 包含在页面中。以匿名用户身份查看页面时，这些 css 文件中的大多数都不会包含在内。
你不应该担心这些，当网站上线时，你会在“性能”设置下设置 css 和 javascript 聚合，这些将被组合成几个文件，只包含需要的文件。

数据-img-src：
我不确定添加“data-img-src”会发生什么？？
要在 img 标签上设置图像路径，只需使用“src”属性即可。
任何以 'data-' 开头的属性都只是一个数据存储，例如，您可能希望与某些 javascript 一起使用。

【讨论】：

【解决方案2】：

关于在您的自定义主题中删除 Drupal 样式表...您可以在 .info.yml 中添加类似的内容

stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css
  - core/modules/system/css/system.module.css
  - core/modules/system/css/system.theme.css
  - core/modules/views/css/views.module.css

删除它们。

【讨论】：