Php:drupal8:bootstrap:subtheme

De Base de connaissance
Révision datée du 18 janvier 2018 à 17:56 par MediaWiki default (discussion | contributions) (Page créée avec « ==Pre-requis :== ===Annuler le cache + décompresser les assets et passer Twig en mode Debug=== * Passer le tout en mode décompressé sans cache et en twig debug : ** cf... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Sauter à la navigation Sauter à la recherche

Pre-requis :

Annuler le cache + décompresser les assets et passer Twig en mode Debug

La documentation du projet bootstrap

  • Cette documentationhttps://drupal-bootstrap.org/api/bootstrap
  • se retrouve embarquée au format MarkDown sous : /var/www/bofiptest/web/themes/contrib/bootstrap/docs
    • (tout commence par un README.md)
    • (On s’assure que le thème parent/bootstrap est à jour)
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php up bootstrap
Cannot load Xdebug - it was already loaded
Update information last refreshed: mar 28/11/2017 - 16:05

No code updates available.

Création et déclaration du sous thème :

On part du SASS Starterkit

/var/www/bofiptest/web/themes/contrib/bootstrap/starterkits/sass

  • On copie le répertoire /var/www/bofiptest/web/themes/contrib/bootstrap/starterkits/sass' sous /var/www/bofiptest/web/themes/custom/bofip
    • (bofip est le nom que j'ai choisi pour le sous-thème!)
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ mkdir themes/custom
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ cp -pvr themes/contrib/bootstrap/starterkits/sass themes/custom/bofip
………………………………………………………………….
'themes/contrib/bootstrap/starterkits/sass/scss/style.scss' -> 'themes/custom/bofip/scss/style.scss'
'themes/contrib/bootstrap/starterkits/sass/templates' -> 'themes/custom/bofip/templates'
'themes/contrib/bootstrap/starterkits/sass/templates/README.md' -> 'themes/custom/bofip/templates/README.md'

On renomme et adapte

  • On renomme les bons fichiers avec le nom du sous thème
  • ce qui donne au final:
# on renomme les fichiers de configuration avec le nom du sous thème
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ ll *.yml
-rwxr-xr-x 1 jpmena www-data 524 nov.  28 16:50 bofip.info.yml*
-rwxr-xr-x 1 jpmena jpmena   777 déc.   6 10:49 bofip.libraries.yml*
# on adapte la documentation et les chemins présents dans le fichier  info.yml:
## après l'avoir renommé depuis sass/THEMENAME.starterkit.yml
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ cat bofip.info.yml
core: 8.x
type: theme
base theme: bootstrap

name: 'BOFIP Theme'
description: 'Thème BOFIP basé sur le framework Bootstrap SASS'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

libraries:
  - 'bofip/global-styling'
  - 'bofip/bootstrap-scripts'

On commence avec le fichier style.scss

2 // Default variables.
3 @import "default-variables";
4 
5 // Bootstrap Framework.
6 @import '../bootstrap/assets/stylesheets/bootstrap';
7 
8 // Base-theme overrides.
9 @import 'overrides';

default-variables.scss

/**
 * Default Variables.
 *
 * Modify this file to provide default Bootstrap Framework variables. The
 * Bootstrap Framework will not override any variables defined here because it
 * uses the `!default` flag which will only set their default if not already
 * defined here.
 *
 * You can copy existing variables directly from the following file:
 * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss
 */

// Set the proper directory for the Bootstrap Glyphicon font.
$icon-font-path: '../bootstrap/assets/fonts/bootstrap/';

//Ecraser les 14px définis par bofip/bootstrap/assets/stylesheets/bootstrap/_variables.scss ligne 52
$font-size-base:          14px !default;
$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px

//** Background color for `<body>`.
$body_color: #333333;
$body-bg: white;
$block_title_bg:  #edecec;

L'import du bootstrap/assets/stylesheets/_bootstrap.scss

  • L'import des sources sass du projet Bootstrap SASS est déjà dans le fichier style.scss ci dessus (cf. ligne 6 du contenu du fichier style.scss ci dessus)!
  • Pour garder ce même chemin d'import,
    • faire un git clone' de la release 3.3.7 de ce projet à la racine du sous-thème !!!
    • renommer bootstrap-sass en bootstrap:
# On récupère le projet bootstrap-sass par git clone
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ git clone https://github.com/twbs/bootstrap-sass.git
Clonage dans 'bootstrap-sass'...
remote: Counting objects: 7910, done.
remote: Total 7910 (delta 0), reused 0 (delta 0), pack-reused 7910
Réception d objets: 100% (7910/7910), 3.01 MiB | 5.30 MiB/s, fait.
Résolution des deltas: 100% (4210/4210), fait.
Vérification de la connectivité... fait.
# on change pour la dernière release stable (v3.3.7)
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ cd bootstrap-sass/
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip/bootstrap-sass$ git reset --hard v3.3.7
HEAD est maintenant à 5d6b2eb Bump to v3.3.7
# On renomme bootstrap-sass en bootstrap
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip/bootstrap-sass$ cd ..
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ mv -v bootstrap-sass bootstrap
'bootstrap-sass' -> 'bootstrap'

scss/_overrides.scss

La compilation SASS vers CSS

Prérequis

Installation du compilateur SASS

  • Cette installation se fait traditionnellement par le gestionnaire de paquets Gem de Ruby cf. [1]
  • Personnellement j'utilise un raccourci à savoir le paquet apt ruby-sass :
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ apt show ruby-sass
Package: ruby-sass
Version: 3.4.21-1
Priority: optional
Section: universe/ruby
Origin: Ubuntu
Maintainer: Ubuntu Developers <ubuntu-devel-discuss@lists.ubuntu.com>
Original-Maintainer: Debian Sass team <pkg-sass-devel@lists.alioth.debian.org>
Bugs: https://bugs.launchpad.net/ubuntu/+filebug
Installed-Size: 979 kB
Provides: sass
Depends: ruby | ruby-interpreter
Recommends: ruby-listen
Breaks: ruby-compass (<< 1.0.0~), ruby-sass-rails (<< 5~)
Homepage: http://sass-lang.com/
Ruby-Versions: all
Download-Size: 173 kB
APT-Manual-Installed: yes
APT-Sources: http://fr.archive.ubuntu.com/ubuntu xenial/universe amd64 Packages
Description: powerful but elegant CSS compiler that makes CSS fun again
 Sass makes CSS fun again. Sass is an extension of CSS3, adding nested
 rules, variables, mixins, selector inheritance, and more.
 .
 It's translated to well-formatted, standard CSS using the command line
 tool or a web-framework plugin.

Installation de la dernière version de NodeJS en local

  • L'installation de Node JS/Npm sur Ubuntu n'est pas à faire avec apt
    • Paquets trop anciens
    • Paquets cassés / broken et en tout cas pas toujours compatibles avec les dernières versions des librairies de l'éco système Grunt (exceptions/erreurs)
  • Choix de l'installation manuelle telle que proposée sur le site officiel :
  • On télécharge la dernière version présente sur la page d'accueil, à savoir la 8.9.3 à la date du 20/12/2017 (version Linux 64Bits)
# J'ai téléchargé chez moi sous ~/Ateliers
jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ ls -ltr | tail -1
-rw-rw-r--  1 jpmena jpmena  11395380 déc.  20 16:03 node-v8.9.3-linux-x64.tar.xz
# Je décompresse l'archive :
jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ tar xf node-v8.9.3-linux-x64.tar.xz
# Il va falloir ajouter le répertoire ci dessous au PATH:
## on node la présence sous ce répertoire des exécutables 
### et de nodejs
### et de npm
jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ ll node-v8.9.3-linux-x64/bin/
total 34384
drwxrwxr-x 2 jpmena jpmena     4096 déc.   8 15:10 ./
drwxrwxr-x 6 jpmena jpmena     4096 déc.   8 15:10 ../
-rwxrwxr-x 1 jpmena jpmena 35200878 déc.   8 15:09 node*
lrwxrwxrwx 1 jpmena jpmena       38 déc.   8 15:10 npm -> ../lib/node_modules/npm/bin/npm-cli.js*
lrwxrwxrwx 1 jpmena jpmena       38 déc.   8 15:10 npx -> ../lib/node_modules/npm/bin/npx-cli.js*
  • Pour ajouter le répertoire ~/Ateliers/node-v8.9.3-linux-x64/bin au PATH, on modifie le fichier .profile:
# Sauvegarde du fichier .profile actuel :
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ cp -pv .profile .profile$(date '+%d%m%Y')
'.profile' -> '.profile20122017'
# J'édite le fichier .profile pour ajouter le répertoire bin du node téléchargé au $PATH:
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ vim .profile
# da façon à obtenir
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ diff -u .profile .profile$(date '+%d%m%Y')
--- .profile	2017-12-20 16:31:28.999899114 +0100
+++ .profile20122017	2017-11-10 16:01:32.811998678 +0100
@@ -17,5 +17,4 @@
 fi
 
 # set PATH so it includes user's private bin directories
-NODE_HOME=$HOME/Ateliers/node-v8.9.3-linux-x64
-PATH="$NODE_HOME/bin:$HOME/bin:$HOME/.local/bin:$PATH"
+PATH="$HOME/bin:$HOME/.local/bin:$PATH"

Ajout des librairies NodeJS et la compilation SASS

Constitution du package.json

  • on se place à la racine du thème pour générer notre package.json spécialisé en outillage SASS via grunt on passe les commandes suivantes:
    • npm init pour ma création d'un package.json pour notre projet de theming
    • npm i grunt --save-dev pour l'ajout du moteur grunt dans les dev dependencies
    • npm i grunt-contrib-sass --save-dev pour l'ajout de l'interface entre le moteur grunt et le compilateur sass dans les dev dependencies
    • npm i grunt-cli --save-dev pour l'ajout d'un d'un client grunt local dans les dev dependencies
  • La partie script de mon package.json ne contient intialement que "test": "echo \"Error: no test specified\" && exit 1",
  • J'ajoute un accès au client grunt via npm: "grunt": "node node_modules/grunt-cli/bin/grunt"
  • Le package.json à la racine du thème bofip contient au final :
{
  "name": "theme_bofip",
  "version": "0.0.1",
  "keywords": [
    "util",
    "functional",
    "server",
    "client",
    "browser"
  ],
  "author": "jpmena",
  "contributors": [],
  "dependencies": {
  },
  "description": "Sous thème de la Refonte BOFiPI basé sur le projet Drupal bootstrap",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-sass": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "grunt": "node node_modules/grunt-cli/bin/grunt"
  },
  "license": "ISC"
}

Création d'un Gruntfile.js approprié

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
module.exports = function (grunt) {
    // Project configuration.
        grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.initConfig({
        //grunt-contrib-sass https://www.npmjs.com/package/grunt-contrib-sass
        //Compile Sass to css
          sass: {              // Task 
            dist: {            // Target 
                 options: {    // Target options 
                    style: 'expanded',
                    precision: 8, // How many digits of precision to use when outputting decimal numbers.
                    lineNumbers: true //Emit comments in the generated CSS indicating the corresponding source line.
                 },
                 files: { // Dictionary of files
                          // 'destination': 'source!
                    'css/style.css': 'scss/style.scss'
                }
            }
        },

      
    });

    grunt.registerTask('compile',['sass:dist']);
};

La compilation SASS/CSS

En ligne de commande

  • On lance la compilation :
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ npm run grunt compile

> theme_bofip@0.0.1 compile /var/www/bofiptest/web/themes/custom/bofip
> node node_modules/grunt-cli/bin/grunt compile

Running "sass:dist" (sass) task

Done.

La compilation via PHPStorm :

Derniers réglages pour l’apparition du thème : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom$ sudo chmod -R 755 bofip [sudo] Mot de passe de jpmena : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom$ sudo chown -R jpmena:www-data bofip jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php en -y bofip Cannot load Xdebug - it was already loaded The following extensions will be enabled: bofip Do you really want to continue? (y/n): y bofip was enabled successfully. [ok] Définir bofip comme style par défaut : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drupal/console/bin/drupal.php co system.theme default bofip Cannot load Xdebug - it was already loaded

Configuration name system.theme
------------------- ---------------- ---------------- 
 Configuration key   Original Value   Override Value  
------------------- ---------------- ---------------- 
 default             bootstrap        bofip           
------------------- ---------------- ----------------

Quand je vais sur http://localhost:8888/ tout s’affiche bien !!!! Changement de la couleur d’arrière plan : je récupère de /var/www/bofiptest/web/themes/custom/bofip/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss et la place sous /var/www/bofiptest/web/themes/custom/bofip/scss/_default-variables.scss avec la valeur : //** Background color for `<body>`. $body-bg: lightblue !default; Ne pas oublier de nettoyer le cache : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php cr Cannot load Xdebug - it was already loaded Cache rebuild complete.

Template suggestions avec un bloc actualités : Ce que je veux thémer (2 blocs en page d’accueil)

Template Suggestions en Drupal 8 ; https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions Sachant que un delta est : Activer les Template Suggestions : cf. http://wiki.jpmena.eu/index.php?title=Php:symfony:twig J’ai eu un phénomène bizarre settings.php n’était plus lisible par www-data (tout appartenait à jpmena) ! Du coup Drupal repartait en mode installation !!!

Templates suggestion de bloc : Voir le code sous /var/www/bofiptest/web/core/modules/block/block.module lignes 163+ : Dans le cas de mon bloc, à la ligne 188 j’ai pour les suggestions de mon bloc actualités : 0 = "block__views" 1 = "block__views_block" 2 = "block__views_block__actualites_block_1" 3 = "block__views_block__actualites_block_1"

Une fois arrêté à l aligne 188, de taper dans la console print_r, var_dump, print_r apparaît dans le html généré :


utilisation de KINT : http://wiki.jpmena.eu/index.php?title=Php:symfony:twig#Utilisation_de_Kint Kint est il installé ? jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php pml | grep -i kint Cannot load Xdebug - it was already loaded

Development          Devel Kint (kint)                                                                                            Module  Enabled        8.x-1.2

Traitement de block__views.html.twig : Changement de la présentation du titre pour tout bloc lié à une vue : Il me faut ajouter un border-bottom : 3px solid #edecec Limitations de la console Drupal : Elle ne donne pas les bons droits !! même avec cp -pv !!!! Ne pas oublier de nettoyer le cache : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ sudo chown -R jpmena:www-data themes/custom/bofip/templates/ [sudo] Mot de passe de jpmena : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php cr Cannot load Xdebug - it was already loaded Cache rebuild complete. [ok]

Attention ! Bug boostrap-sass : Renommer bootstrap-sass en bootstrap ou bien mettre à jour /var/www/bofiptest/web/themes/custom/bofip/bofip.libraries.yml ? Décider que le projet se nomme bootstrap-sass ou bien bootstrap ????: Choix tout mettre en bootstrap !!!! jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip$ mv -v bootstrap-sass bootstrap 'bootstrap-sass' -> 'bootstrap' cat /var/www/bofiptest/web/themes/custom/bofip/scss/style.scss // Default variables. @import "default-variables";

// Bootstrap Framework. @import '../bootstrap/assets/stylesheets/bootstrap';

// Base-theme overrides. @import 'overrides';

Relancer la compilation via on se met le le package.json, clic droit / show package scripts !!!! /usr/lib/nodejs/node-v8.9.1-linux-x64/bin/node /usr/lib/nodejs/node-v8.9.1-linux-x64/lib/node_modules/npm/bin/npm-cli.js run compile --scripts-prepend-node-path=auto

> theme_bofip@0.0.1 compile /var/www/bofiptest/web/themes/custom/bofip > node node_modules/grunt-cli/bin/grunt compile

Running "sass:dist" (sass) task WARNING: converting 24px to an integer 24...

        on line 21 of scss/mixins/_rem.scss, in `rem'
        from line 24 of scss/style.scss

scss/mixins/_rem.scss:22 DEBUG: converting 24px to an integer 24...

Done.

Process finished with exit code 0

On retrouve en jaune ci dessus le deboggage en warning que j’ai écrit !!! Noter la complexité de l’implication des caractéristiques de scss imbriqué … Bien noté ce qui a été compilé en cible sous /var/www/bofiptest/web/themes/custom/bofip/css : /* line 14, ../scss/style.scss */ .bofip {

 font-family: 'open_sansregular', sans-serif;
 color: #333333;

} /* line 17, ../scss/style.scss */ .bofip h2 {

 margin-top: 20px;
 margin-bottom: 10px;
 border-bottom: 3px solid #edecec;
 padding-bottom: 5px;
 text-align: left;
 font-size: 27px;
 font-size: 1.6875rem;
 font-weight: bold;
 width: 100%;
 margin-top: 0;
 margin-bottom: 0;

}

/*# sourceMappingURL=style.css.map */

Le problème : Est le calcul des rem à partir des px et de la font de base à 16 px, ce qui n’est pas le cas sur notre bootstrap !!! La console FF me dit que la fontSize du body est de 14px ; style à récupérer ligne 27 de _scaffolding.scss (bofip/bootstrap/assets/stylesheets/bootstrap/_scaffolding.scss) !!! ce dernier FF/Debug me montre aussi : body {

 font-family: $font-family-base;
 font-size: $font-size-base;
 line-height: $line-height-base;
 color: $text-color;
 background-color: $body-bg;

}

NB : dans le style calculé je double-clique sur la valeur et j’obtiens l’origine de cette dernière !!!

Bilan : Gros Support de SASS dans la console Firefox !!! (grâce au mode expanded et aux fichiers .map!!!)


Et plus particulièrement




Récupération du javascript bootstrap.js hors CDN ! bofip/bootstrap/assets/javascripts/bootstrap.js Ligne 89 de /var/www/bofiptest/web/themes/contrib/bootstrap/bootstrap.theme j’ai function bootstrap_js_settings_alter(&$data, &$context1 = NULL, &$context2 = NULL) {

 Bootstrap::alter(__FUNCTION__, $data, $context1, $context2);

} http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css http://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.js


   <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node","currentPathIsAdmin":false,"isFront":true,"currentLanguage":"fr"},"pluralDelimiter":"\u0003","ajaxPageState":{"libraries":"admin_toolbar\/toolbar.tree,adminimal_admin_toolbar\/adminimal-admin-toolbar,bofip\/bootstrap-scripts,bofip\/global-styling,bootstrap\/popover,bootstrap\/tooltip,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/html5shiv,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,tour\/tour,user\/drupal.user.icons,views\/views.module","theme":"bofip","theme_token":null},"ajaxTrustedUrl":[],"bootstrap":{"forms_has_error_value_toggle":1,"modal_animation":1,"modal_backdrop":"true","modal_keyboard":1,"modal_show":1,"modal_size":"","popover_enabled":1,"popover_animation":1,"popover_container":"body","popover_content":"","popover_delay":"0","popover_html":0,"popover_placement":"right","popover_selector":"","popover_title":"","popover_trigger":"click","popover_trigger_autoclose":1,"tooltip_enabled":1,"tooltip_animation":1,"tooltip_container":"body","tooltip_delay":"0","tooltip_html":0,"tooltip_placement":"auto left","tooltip_selector":"","tooltip_trigger":"hover"},"toolbar":{"breakpoints":{"toolbar.narrow":"only screen and (min-width: 16.5em)","toolbar.standard":"only screen and (min-width: 38.125em)","toolbar.wide":"only screen and (min-width: 61em)"},"subtreesHash":"dP-T0Q6n4jXHf1QZN8kjnxEsvQiiOPzXAszpj0_gdm8"},"user":{"uid":"1","permissionsHash":"1a3072a440f5c456b00cf8234a647e63eff1b611a77688d4ed04727f54a606aa"}}</script>

<script src="/core/assets/vendor/domready/ready.min.js?v=1.0.8"></script>

<script src="/core/assets/vendor/jquery/jquery.min.js?v=2.2.4"></script> <script src="/core/assets/vendor/underscore/underscore-min.js?v=1.8.3"></script> <script src="//cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.js"></script> Il disparaît bien quand o enlève le CDN Dans la même veine/zone apparaissent : <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/alert.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/button.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/carousel.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/collapse.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/dropdown.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/modal.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/tooltip.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/popover.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/scrollspy.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/tab.js?p0hw3n"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/transition.js?p0hw3n"></script> Ces derniers viennent de : /var/www/bofiptest/web/themes/custom/bofip/bofip.libraries.yml

Ces derniers viennent de : je rajoute simplement l’accès au javascript bootstrap.js avant les autres ... !!! global-styling:

 css:
   theme:
     css/style.css: {}

bootstrap-scripts:

 js:
   bootstrap/assets/javascripts/bootstrap.js: {}
   bootstrap/assets/javascripts/bootstrap/affix.js: {}
   bootstrap/assets/javascripts/bootstrap/alert.js: {}
   bootstrap/assets/javascripts/bootstrap/button.js: {}
   bootstrap/assets/javascripts/bootstrap/carousel.js: {}
   bootstrap/assets/javascripts/bootstrap/collapse.js: {}
   bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
   bootstrap/assets/javascripts/bootstrap/modal.js: {}
   bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
   bootstrap/assets/javascripts/bootstrap/popover.js: {}
   bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
   bootstrap/assets/javascripts/bootstrap/tab.js: {}
   bootstrap/assets/javascripts/bootstrap/transition.js: {}

Nettoyer le cache : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ !1262 php ../vendor/drush/drush/drush.php cr Cannot load Xdebug - it was already loaded Cache rebuild complete. [ok] Problème apparaît avant et après un bootstrap : …………………………………………………………... <script src="/themes/contrib/bootstrap/js/misc/ajax.js?p0j8xr"></script> <script src="/themes/contrib/bootstrap/js/modal.js?p0j8xr"></script> <script src="/themes/contrib/bootstrap/js/misc/dialog.js?p0j8xr"></script> <script src="/core/modules/quickedit/js/quickedit.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/util.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/models/BaseModel.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/models/AppModel.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/models/EntityModel.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/models/FieldModel.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/models/EditorModel.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/AppView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/FieldDecorationView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/EntityDecorationView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/EntityToolbarView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/ContextualLinkView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/FieldToolbarView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/views/EditorView.js?v=8.3.7"></script> <script src="/core/modules/quickedit/js/theme.js?v=8.3.7"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap.js?p0j8xr"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/affix.js?p0j8xr"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/alert.js?p0j8xr"></script> <script src="/themes/custom/bofip/bootstrap/assets/javascripts/bootstrap/button.js?p0j8xr"></script> ……………………………………………………. Alors que le CDN apparaissait avant tout le monde !!!! La position du code !!!! https://www.drupal.org/project/bootstrap_library Utiliser bootstrap_library : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php dl bootstrap_library Cannot load Xdebug - it was already loaded Project bootstrap_library (8.x-1.9) downloaded to /var/www/bofiptest/web//modules/contrib/bootstrap_library. [success] jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php en -y bootstrap_library Cannot load Xdebug - it was already loaded The following extensions will be enabled: bootstrap_library Do you really want to continue? (y/n): y The following module is missing from the file system: examples bootstrap.inc:250 [warning] bootstrap_library was enabled successfully. Le code dont il est fait référence sous est :

/var/www/bofiptest/web/modules/contrib/bootstrap_library/bootstrap_library.module ligne 18

en allant sur : /var/www/bofiptest/web/modules/contrib/bootstrap_library/bootstrap_library.routing.yml On voit que l’URL de configuration est : http://localhost:8888/admin/config/development/bootstrap_library Je choisis : 1. Charger localement ! 2. Use non minified version !!! 3. Only the listed themes + choisir BOFiP Theme !!! 4. Sour Files Settings on coche pour indiquer que l’on veut le fichier js seul et pas le css!!! puisque mon styles.css récupère du framework SASS les sources bootstraps :::: Où sont les fichiers locaux : le /libraries/bootstrap/js/bootstrap.js nous impose la racine du site !!! https://www.drupal.org/forum/support/post-installation/2016-04-11/where-is-libraries-folder-located ce qui donne : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ mkdir -p libraries/bootstrap/js jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ cp -pv themes/custom/bofip/bootstrap/assets/javascripts/bootstrap.js libraries/bootstrap/js/ 'themes/custom/bofip/bootstrap/assets/javascripts/bootstrap.js' -> 'libraries/bootstrap/js/bootstrap.js' jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ sudo chown -R ${USER}:www-data libraries Ne pas Ne pas oublier de nettoyer le cache : jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php cr Cannot load Xdebug - it was already loaded Cache rebuild complete. Il me le place bien dans la zone du bas des javascripts juste avant les assets du thème bootstrap parent !!!! YOUPIIII !!!! On a bien désactivé le CDN du thème parent bootstrap !!!! Et cela fonctionne (on ne voit pas sa présence elle est donc remplacée par la ligne surlignée en jaune ci dessous)... ……………………... <script src="/libraries/bootstrap/js/bootstrap.js?p0jf5x"></script> <script src="/core/assets/vendor/jquery-form/jquery.form.min.js?v=3.51"></script> <script src="/core/assets/vendor/jquery.ui/ui/position-min.js?v=1.11.4"></script> <script src="/core/misc/debounce.js?v=8.3.7"></script> <script src="/core/misc/displace.js?v=8.3.7"></script> <script src="/core/assets/vendor/jquery.cookie/jquery.cookie.min.js?v=1.4.1"></script> <script src="/themes/contrib/bootstrap/js/drupal.bootstrap.js?p0jf5x"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?p0jf5x"></script> <script src="/themes/contrib/bootstrap/js/theme.js?p0jf5x"></script> ……………...


Questions Jean-Pierre :


TODO : comprendre comment prendre en compte les points de rupture !!!