新建主页，目录如下： 新建页面 - 图1home_pages.info.yml：特殊文件，只要出现”*.info.yml”文件，该目录将被声明为一个模块。

    1. type: module                        // 声明模块
    2. name: 'home_pages'            // 模块名
    3. core: '8.x'                            // drupal框架为8
    4. package: 'custom'                // 在控制台扩展中，属于custom下拉列表
    5. version: 1.0                        // 该模块版本号

    **

    home_pages.routing.yml：特殊文件，定义该模块的路由器。

    1. home_page:
    2.     path: '/'
    3.   defaults:
    4.       _title: '首页'
    5.     _controller: '\Drupal\home_pages\Controller\HomePagesController::myFunction'
    6.   requirements:
    7.       _permission: 'access content'

    解释：访问根目录时，请求页面的标题为“首页”，请求会被路由到home_pages模块下的控制器HomePagesController，并执行myFunction方法。访问该URL的用户必须具备权限“access content”，这个权限匿名用户也具备，因此是公开界面。

    home_pages.libraries.yml：第三方动态库，支持引入JS、CSS

    1. common-libs:
    2.     js:
    3.       js/common-functions.js: {}
    4.   css:
    5.       css/common.css: {}
    6. home_page_lib:
    7.     js:
    8.       js/home_page_lib.js: {}
    9.   css:
    10.       css/home_page_lib.css: {}

    解释：声明两个库，这里仅声明。PHP和TWIG都可以通过attach引用common-libs或home_page_lib。

    src：PHP代码，遵循PSR-4规范。

    1. <?php
    2. namespace Drupal\home_pages\Controlelr;
    3. use Drupal\Core\Controller\ControllerBase;
    4. /**
    5.  *    定义逻辑控制器类    
    6.  */
    7. class HomePagesController extends ControllerBase {
    8.      public function myFunction() {
    9.       return array(
    10.         'theme'=>'home_pages',
    11.       'attached'=>[
    12.           'library'=>[
    13.               'home_pages/common-libs',
    14.                  'home_pages/home_page_lib' 
    15.           ]
    16.           ]
    17.     );
    18.   } 
    19. }

    js：拓展目录，引入JS脚本代码。

    1. new Vue({
    2.   data: {
    3.    index: 1,
    4.     ....
    5.   },
    6.   ....
    7. });

    templates：前端模板目录，存放前端代码，格式这里为TWIG，与HTML类似。

    1. <div>
    2.   ${ index }
    3. </div>