如何在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

Facebook 功能: