Cfrgtkky

I'm beginning with D8, but I work a lot with D7 and Magento. I follow the developer documentation to add a library in my theme, and I don't understand why it's loading it on every page. I only want attach it to a brunch of page with a preprocess hook. Could you help me please?

In my theme.libraries.yml I add this at the end:

hover3d:

  js:

    js/hover3d.js: {}

In my theme.info.yml I add under libraries "theme/hover3d".

Here is specific information:

• I deactivated JavaScript/CSS compression in the back office and in my settings.local.php file


• My theme is a sub theme of bootstrap_barrio


• My Drupal version is 8.6.3


• There is no custom / contrib modules yet


• I discover it by inspecting my page

• I don't really understand how JavaScript parts are loaded, but I suppose it's with lazy builders which are called placeholder and in D8 for rendering JavaScript there are two (or more) which are js-placeholder and js-bottom-placeholder. I see in my HTML structure that in the js-placeholder is only loaded modernizer and in the js-bottom-placeholder all the others. I don't know if this is a correct JavaScript rendering procedure, so I keep it here if it can help you.

In my theme.info.yml i add under libraries "theme/hover3d".

That's why it's loaded on every page. libraries in the theme info file is:

A list of libraries (which can contain both CSS and JavaScript assets) to add to all pages where the theme is active.

To add it contextually, attach it to a relevant render array. For example:

function MYTHEME_preprocess_node(&$variables) {

  // Library will only be loaded when a node is rendered on the page.

  $variables['#attached']['library'] = 'theme/hover3d';

}

See Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme for more information.