作者 张龙于飞 发布于 2017-09-20 修改于

f.uxpi.net

新建主题 新建模块

drupal generate:theme

drupal generate:module

自定义主题要加载的 CSS 和 JS 文件:

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

https://ffwagency.com/digital-strategies-blog/managing-css-and-javascript-files-drupal-8-libraries

https://medium.com/@ToddZebert/loading-and-using-javascript-in-drupal-8-f6643d19ae0f

stylesheets-remove 将在9.0移除,使用 libraries-overrideor libraries-extend

编辑 mytheme.info.yml:

libraries-override:
  # 系统库../core/modules/system/system.libraries.yml  核心库../core/core.libraries.yml
  # 移除默认的库 system/base
  system/base: false
  # 用自定义的库 favorite/html5shiv 替换 core/html5shiv 库
  core/html5shiv:
    favorite/html5shiv

 

global-styling:
   #全局配置库
   version: 1.0
   css:
    theme:
      http://lib.uxpi.net/layui/2.1.5/css/layui.css:  { type: external, minified: true }
      css/favorite.css : {}
   js:
     http://lib.uxpi.net/layui/2.1.5/layui.js:  { type: external, minified: true }
     js/favorite.js : {}

jquery:
  # 重新定义库jquery,在ThemeName.info.yml 中用来替换默认的核心库jquery.
  js:
    http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js:  { weight: -20, type: external, browsers: { IE: 'gt IE 8', '!IE': true } }
    http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js:  { weight: -20, type: external, browsers: { IE: 'lte IE 8', '!IE': false } }

html5shiv:
  # 重新定义库html5shiv,在ThemeName.info.yml 中用来替换默认的核心库html5shiv.
  header: true
  js:
    https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js: { type: external,weight: -22, browsers: { IE: 'lte IE 8', '!IE': false }, minified: true }
    https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js: { type: external,weight: -22, browsers: { IE: 'lte IE 8', '!IE': false }, minified: true }

 

重写header mate ,添加新的META tags

http://cranesandclouds.com/remove-and-change-meta-tags-drupal8

/**
 * Implements hook_page_attachments_alter().
 */
function favorite_page_attachments_alter(array &$page) {
  // Tell IE to use latest rendering engine (not to use compatibility mode).
  /*$ie_edge = [
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => [
    'http-equiv' => 'X-UA-Compatible',
    'content' => 'IE=edge',
    ],
  ];
  $page['#attached']['html_head'][] = [$ie_edge, 'ie_edge'];*/


    // Remove unnecessary META tags.
    // Define an array of values.
    $unset_meta = [
      'system_meta_generator', // Meta name "Generator"
      'MobileOptimized', // Meta name "MobileOptimized"
      'HandheldFriendly', // Meta name "HandheldFriendly"
    ];
    // Check values and delete.
    foreach ($page['#attached']['html_head'] as $key => $value) {
      if (in_array($value[1], $unset_meta)) unset($page['#attached']['html_head'][$key]);
    }
    // Add the necessary and override standard META tags.
    // Define an array of values.
    $attach_meta = array(
      // Add special permission to display the site as a Web App.
      'ie_edge' => [
        '#type' => 'html_tag',
        '#tag' => 'meta',
        '#attributes' => [
          'http-equiv' => 'X-UA-Compatible',
          'content' => 'IE=edge',
        ],
      ],
      'web_app_capable_default' => array(
        '#tag' => 'meta',
        '#attributes' => array(
          'name' => 'mobile-web-app-capable',
          'content' => 'yes',
        ),
      ),
      'web_app_capable_android' => array(
        '#tag' => 'meta',
        '#attributes' => array(
          'name' => 'android-mobile-web-app-capable',
          'content' => 'yes',
        ),
      ),
      // Add a special icon for the site on an Android iOS device.
      // Minimum size: 60x60 px.
      'android_touch_icon' => array(
        '#tag' => 'link',
        '#attributes' => array(
          'rel' => 'android-touch-icon',
          'href' => file_create_url(drupal_get_path('theme', 'THEME_NAME') . '/path/to/image/android-touch-icon.png'),
        ),
      ),
    );
    // Loop add / override the values of meta tags.
    foreach ($attach_meta as $key => $value) {
      $page['#attached']['html_head'][] = [$value, $key];
    }

}