Drupal CSS 文件行为
Drupal CSS files behaviour
我们必须维护一个由另一个机构使用 drupal 8 构建的页面。现在我们在他们的资产管理方面面临一些奇怪的问题,尤其是 css 文件:
比方说,我们有一个名为“my_theme”的主题模块。现在,当查看源代码时,您可以看到很多 CSS 和两个 CSS 文件,linked 到:
- /themes/custom/my_theme/css/drupal.css?qeyhny
- /themes/custom/my_theme/css/style.css?qeyhny
查看生产源代码似乎完全不同:我们只剩下两个 css 文件,文件夹不再是“/themes/custom/my_theme”:
- /sites/default/files/css/css_VKKggqUAg-CIbtiO65y1CJC-n5vszoMBBV-yp7EeBIM.css
- /sites/default/files/css/css_0AY-LeGpCop5parFpvUGlHf9WBkxLfeAkxrh6YVVQb8.css
AdvAgg 模块未激活。
主题信息文件如下:
name: my theme
type: theme
engine: mytwig
description: 'My bootstrap based theme'
package: My
core: 8.x
libraries:
- my_theme/global-styling
ckeditor_stylesheets:
- css/style.css
regions:
sidebar_first: 'Left sidebar'
sidebar_second: 'Right sidebar'
content: 'Content'
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
logo: 'Logo'
footer: 'Footer'
footer_copyright: 'Footer copyright'
highlighted: 'Highlighted'
help: 'Help'
breadcrumb: 'Breadcrumb'
我的主题全球风格:
global-styling:
css:
theme:
css/drupal.css: {}
css/style.css: {}
js:
js/vendor/bootstrap4/bootstrap.bundle.js: {}
js/vendor/jquery.mousewheel.js: {}
js/vendor/jquery-ui-1.12.1.custom/jquery-ui.js: {}
js/vendor/jquery.ui.touch-punch.js: {}
js/modules/common.bundle.js: {}
js/modules/Swapbackground.bundle.js: {}
js/modules/LazyLoad.bundle.js: {}
js/modules/Fancyboxes.bundle.js: {}
js/modules/Collapses.bundle.js: {}
js/modules/HeroSlider.bundle.js: {}
js/modules/Menu.bundle.js: {}
js/modules/Sliders.bundle.js: {}
js/modules/SwitchLang.bundle.js: {}
dependencies:
- core/jquery
- core/jquery.ui
- core/jquery.ui.draggable
- core/drupal
为了解决部署问题,我只想知道,这是如何实现的。有人可以给我提示吗?
Drupal link 何时直接来自我的主题,何时 link 来自站点目录?
从技术上讲,您的站点将始终从以下路径读取 CSS:
/themes/custom/my_theme/css/style.css
/themes/custom/my_theme/css/drupal.css
与您 my_theme.libraries.yml 上的配置一致。
您看到的文件有 Drupal 生成的缓存,可以为用户更快地加载 CSS。当您清除系统缓存时,这些文件将被删除并重新创建。
我建议您将以下内容添加到您的 .gitignore 文件中:
/sites/default/files
/themes/custom/my_theme/css/drupal.css?*
/themes/custom/my_theme/css/style.css?*
此外,对于以后有关 Drupal 主题方面的参考,以下 link 将使您更好地理解它是如何定义的。
我通常在我的 drupal 项目上实现的是在站点上配置 Sass/Less 并且我忽略了 css 文件夹,因为我们已经设置了一个自动部署系统,每次都会从 sass/less 文件夹编译触发部署。
我们必须维护一个由另一个机构使用 drupal 8 构建的页面。现在我们在他们的资产管理方面面临一些奇怪的问题,尤其是 css 文件:
比方说,我们有一个名为“my_theme”的主题模块。现在,当查看源代码时,您可以看到很多 CSS 和两个 CSS 文件,linked 到:
- /themes/custom/my_theme/css/drupal.css?qeyhny
- /themes/custom/my_theme/css/style.css?qeyhny
查看生产源代码似乎完全不同:我们只剩下两个 css 文件,文件夹不再是“/themes/custom/my_theme”:
- /sites/default/files/css/css_VKKggqUAg-CIbtiO65y1CJC-n5vszoMBBV-yp7EeBIM.css
- /sites/default/files/css/css_0AY-LeGpCop5parFpvUGlHf9WBkxLfeAkxrh6YVVQb8.css
AdvAgg 模块未激活。
主题信息文件如下:
name: my theme
type: theme
engine: mytwig
description: 'My bootstrap based theme'
package: My
core: 8.x
libraries:
- my_theme/global-styling
ckeditor_stylesheets:
- css/style.css
regions:
sidebar_first: 'Left sidebar'
sidebar_second: 'Right sidebar'
content: 'Content'
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
logo: 'Logo'
footer: 'Footer'
footer_copyright: 'Footer copyright'
highlighted: 'Highlighted'
help: 'Help'
breadcrumb: 'Breadcrumb'
我的主题全球风格:
global-styling:
css:
theme:
css/drupal.css: {}
css/style.css: {}
js:
js/vendor/bootstrap4/bootstrap.bundle.js: {}
js/vendor/jquery.mousewheel.js: {}
js/vendor/jquery-ui-1.12.1.custom/jquery-ui.js: {}
js/vendor/jquery.ui.touch-punch.js: {}
js/modules/common.bundle.js: {}
js/modules/Swapbackground.bundle.js: {}
js/modules/LazyLoad.bundle.js: {}
js/modules/Fancyboxes.bundle.js: {}
js/modules/Collapses.bundle.js: {}
js/modules/HeroSlider.bundle.js: {}
js/modules/Menu.bundle.js: {}
js/modules/Sliders.bundle.js: {}
js/modules/SwitchLang.bundle.js: {}
dependencies:
- core/jquery
- core/jquery.ui
- core/jquery.ui.draggable
- core/drupal
为了解决部署问题,我只想知道,这是如何实现的。有人可以给我提示吗? Drupal link 何时直接来自我的主题,何时 link 来自站点目录?
从技术上讲,您的站点将始终从以下路径读取 CSS:
/themes/custom/my_theme/css/style.css
/themes/custom/my_theme/css/drupal.css
与您 my_theme.libraries.yml 上的配置一致。 您看到的文件有 Drupal 生成的缓存,可以为用户更快地加载 CSS。当您清除系统缓存时,这些文件将被删除并重新创建。
我建议您将以下内容添加到您的 .gitignore 文件中:
/sites/default/files
/themes/custom/my_theme/css/drupal.css?*
/themes/custom/my_theme/css/style.css?*
此外,对于以后有关 Drupal 主题方面的参考,以下 link 将使您更好地理解它是如何定义的。 我通常在我的 drupal 项目上实现的是在站点上配置 Sass/Less 并且我忽略了 css 文件夹,因为我们已经设置了一个自动部署系统,每次都会从 sass/less 文件夹编译触发部署。