討論前端開發/Theming with Drupal 8's TWIG工作坊

Submitted by Jenny on

討論 Twig 及 Drupal 8

第二堂前端開發課程在04/08落幕,我們對Twig及Drupal 8 theming開發有深層的討論。

John addresses the second front-end dev talk in Taipei.

以下是我們討論的細節:

  • 課堂一開始,我們先討論 Drupal 8 theming,跟Drupal 7有什麼不同,還有相同的地方(雖然少之又少)

    • Clearing the cache
    • The theme registry and "theme hooks"
    • Base themes and sub-themes
    • Render elements
  • 講解了如何設定CSS libraries和 JS檔案來代替直接寫進 .info file裡

    # Adds a library to all pages.
    libraries:
      my_theme/my_custom_library
    libraries-override:
      # Removes an entire library.

      system/base: false
      core/drupal.vertical-tabs:

        css:
    
     component:
            # Overrides a specific library asset.

            misc/vertical-tabs.css: css/zippy-tabs.css
            # Removes a specific library asset.
            misc/veritcal-tabs.js: false
    libraries-extend:
    
 core/drupal.vertical-tabs:
    
   js:
          # Adds an asset to an existing library.
          js/even-more-vertical.js

    可以在以下的連結找到所有library asset: https://www.drupal.org/theme-guide/8/assets

  • Theme setting 的 default values 現在不存放在 .info file, 他們現在存放在config/install/THEME.settings.yml 檔案裡:

  • # Define the default values of the theme’s settings.
    zen_breadcrumb: 'yes'
    zen_breadcrumb_separator: ' › '
    zen_breadcrumb_home: 1

    James 問到 form 是否還是寫在the theme-settings.php 檔案裡,我們找了一下Drupal 8 Theming Guide, 卻發現還是在 “TODO”的狀態下,我們進而當場查了資料然後修改了 D8 docs page

  • 再來,我們討論了 {% extends %} tag 是如何跟theme hook suggestions做完美的結合

    {% extends "block.html.twig" %}
    {% block content %}
      Just modify the block you want to be different from the default block.html.twig.
    {% endblock %}

    Kevin 在喝完很多咖啡,精神振奮後,問了相當有趣問題,就是可以將block放進blocks裡面嗎?  雖然,我們從來沒做過,所以,我們在課堂上試試看。我們凱改了  block.html.twig file :

    <div>
      ...
      {% block content %}
        {{ content }}
        {% block nested_content %}
          HI, KEVIN!
        {% endblock %}
      {% endblock %}
    </div>

    再改 block—search-form-block.html.twig:

    {% extends "block.html.twig" %}
    {% block content %}
      <div{{ content_attributes }}>
        {{ parent() }}
      </div>
    {% endblock %}
    {% block nested_content %}
      HI, JENNY!
    {% endblock %}

結果是,真的可以有!!!!nested blocks!!!!!!

The participants of John's second front-end dev talk in Taipei.

當John在準備這堂課時,他學習了許多,在課堂上,因為大家勇於發問,他學到了更多!  謝謝大家!!

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.