Drupal8 series (iv): Framework for Topic creation-Ubuntu 14.04 lts

The preparation for the drupal8 topic has been completed, so we will start to officially create the topic!

1. Generate the topic's compass framework

First, go to the topic directory of druapl8:

cd /var/www/druapl8/themes

Then use compass to generate the topic framework:

compass create firehare --css-dir=css --images-dir=img --javascripts-dir=js -r bootstrap-sass --using bootstrap

In the preceding command, firehare is the topic directory to be generated. -- *-Dir indicates the specified directory name. For example, -- CSS-Dir = CSS indicates that the generated CSS directory is called CSS, -- images-Dir = IMG indicates that the image directory is IMG.-R Bootstrap-sass indicates that the topic framework requires the bootstrap-sass project and uses the bootstrap framework.

Enter the preceding command to display the following information:

directory firehare/ directory firehare/css/ directory firehare/fonts/bootstrap/ directory firehare/js/ directory firehare/js/bootstrap/ directory firehare/sass/    create firehare/config.rb    create firehare/sass/styles.scss    create firehare/sass/_bootstrap-variables.scss ... ...To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
The above information indicates that the topic framework is basically generated.


2. Let Drupal know the topic
Unlike drupal7, The. info. yml file is used in drupal8 to replace the. info file. Here, you need to create the firehare.info. yml file, whose content is as follows:

name: fireharetype: themedescription: An extremely flexible, responsive theme with a wealth of regions based on bootstrap. version: 1.0-alphacore: 8.xengine: twigstylesheets:  all:    - css/bootstrap/bootstrap.css    - css/style.css    regions:    pre_header_first: ‘Pre Header First‘    pre_header_second: ‘Pre Header Second‘    pre_header_third: ‘Pre Header Third‘    pre_header: ‘Pre Header‘    header_top_left: ‘Header Top Left‘    header_top_right: ‘Header Top Right‘    header: Header    navigation: ‘Navigation‘    banner: ‘Banner‘    highlighted: Highlighted    promoted: ‘Promoted‘    content: Content    sidebar_first: ‘Sidebar First‘    sidebar_second: ‘Sidebar Second‘    bottom_content: ‘Bottom Content‘    footer_first: ‘Footer First‘    footer_second: ‘Footer Second‘    footer_third: ‘Footer Third‘    footer_fourth: ‘Footer Fourth‘    footer: Footer    help: Help    page_top: ‘Page top‘    page_bottom: ‘Page bottom‘
After the file is generated, go to the druapl8 Management page. You will find a topic named firehare with no screenshot, indicating that drupal8 already knows that such a topic exists.


3. Add the required CSS and JS
This is a big difference between drupal8 and drupal7. drupal8 relies on the. Libraries. yml file to enable related Javascript. The content of the created firehare. Libraries. yml file is as follows:
base:  version: 1.0-alpha  css:    theme:      css/bootstrap/bootstrap.css: {}      css/style.css: {}      bootstrap_javascript:  version: 3.2.0.1  js:    js/bootstrap.js: {}  dependencies:    - core/jquery    - core/jquery.once    - core/drupal
It is not hard to see that CSS files are defined in the libraries file and the info file, and they are repeated. I checked the bartik topic that comes with drupal8, the definition is also repeated in two files, so let's repeat it first, and wait until you see the official instructions and then make changes. This section is a question to be taken into consideration!


To sum up, the basic framework of the theme has been set up, and the next step is to refine the theme.

This article is from the "Rabbit's nest" blog, please be sure to keep this source http://firehare.blog.51cto.com/809276/1540858