drupal8 創建一個外觀/主題

如何在drupal8中建立一個全新的外觀

創建主題info

在theme的資料夾下建立一個主題的文件夾名稱，例如”pig”接著進入pig資料夾裡面建立一個*.info.yml文件。

該文件夾應具有相同的名稱作為*.info.yml文件。

所以，如果你的主題被命名為“pig”，那麼文件夾命名為pig.info.yml文件。如果該文件存在於您的主題將在你的網站管理>外觀

路徑示意圖：

*.info.yml範例：

name: pig
type: theme
description: A cuddly theme that offers extra fluffiness.
core: 8.x
libraries:
  - pig/cuddly-slider
stylesheets-remove:
  - '@classy/css/components/tabs.css'
  - core/assets/vendor/normalize-css/normalize.css
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

定義drupal8 css/js

要定義一個或多個庫，一個*.libraries.yml文件添加到您的主題文件夾。 （如果你的主題被命名為pig，然後將文件名應該是pig.libraries.yml）。
文件中的每個“庫”是一個入口，詳細的CSS和JS文件），就像這樣：

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

接著把剛剛建立的“cuddly-slider:”帶入pig.info.yml文件中。

示意圖：

theme預設結構

  |-＊.breakpoints.yml
  |-＊info.yml
  |-＊.libraries.yml
  |-＊.theme
  |-config
  |  |-install
  |  |  |-＊.settings.yml
  |  |-schema
  |  |  |-＊.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-＊.js
  |-images
  |  |-buttons.png
  |-logo.png
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig