基础篇27. 菜单的覆写(上)

ok龷龶龲龱龭龩龧龦龣龢龡龟龜龙龷龖龓龷龶龲龐龏龌龡龈龄龀齼Drupal龧龦齮齬龜龙龷齫齩齧齣齡齟龶龲齛齗龩齓齑齏

龭齍齌齉齈龷齅齄龜龙龷齂鼿鼻鼺龧龦鼶鼲龩龜龙龷鼯齂鼿齮齬鼭龩龜龙齏鼫龲鼨鼲鼨龩鼤鼠龷龄鼜鼘鼗鼭鼓龷鼒鼏鼍鼋鼊鼈齣龲齏鼄鼁龶龲鼀黼main navigation龷黦黣鼗黟黛黗黓齏

龶龲黒黐鼄龟龜龙龷齂鼿黼黎黋黊鼀鼲黈齉龡龟黆黋齏龶龲齼黃龏龌黋龩龷黁黀麾麻龟麺鼲麸麶麴麱龩黆黋龷鼘齂鼿龭鼘龩龧龦鼲黃麯麫麨麦龷麢麠麟鼄麝麴麱龷黋黊鼘鼀齛齗麚麖麴麱麔麒麐#麊麉齏

龶龲麅麄麁黀麻龟麴麱鹽鹹鹶鹵龌鹱龶龲龩鹮鹭鹱鹩鹦龶龲鹱鹥鹡龶龲齏

龱龭黟黛黗黓龡鹟鼲5龟黆黋龷龶龲鹚拽黆黋黊齈龩鹔麊鹓鹒鹐鹍龷龐鹌鹊黆黋龩鹇鹅麐鹂鸿鹥鹦齏龭鸼麦龷鸺鹥鹡龶龲鼄龟黆黋龷鸸鸴鸱鹚拽龷鸰鼫齟齼鹩鹦龶龲龩鸯鸿龜龙齏

drupal 菜单 编辑

鸭麦龶龲龭info鸩鸧鸥黀麾龡龟鼭龩鸣鸠 Nav齏

 nav: Nav

齫齩龭鸣鸠鸙鸘齉齈鸥龷鸺main navigation鼄龟鸣鸔鸑鸎黎Nav鸣鸠鸥齏

区域布局

鸼麦龭黈齉鸊鸆鸥鸺Nav鸣鸠鸃鸂鷿龐齏

鷽麄鼄鼁鹌鹊黃鸊鸆鸩鸧鸥龩class龷鼤鹡鸑鸎logo麐龜龙龩div龩鷴鷰鷯麟齟黃10鷩龷鷦鸑鸎鼤鷥鷢鷟龩鷛鷙龩div鷯麟齟黃2鷩齏

鼿鷗鼄麝鷕鷔麨黊鷓鷏龏龌鷌2鷉黃龷鼄鼁黣鷅鷃鶿龏龌黃齏

鶾鼭黈齉麨麦龷鼘齂鼿黼黎龷龭logo龩龈鶻鸃鸂鷿黃黟黛黗黓齏鶺鼗龶龲鼯齛齗鶷鶶麠麟齓齑齏黈黁龷鶵黼鶳鶱龷鶭黎鶪鶧鶥鷿鼄龟黛黗黓龩鸊鸆齏龶龲齂鼿黼黎龷齣鶢鹡鶞黟鶛鸥龷麔麊鼗menu.html.twig齏鸭麦齂鼿黼黎龷twig debug鸊齑齼龶龲鶎鶊黃龡龟鶉鶅鼤鹡黟黛黗黓龩鸊鸆黀鶄鹽menu--main.html.twig 龷龶龲拷鵽鼄龟麔麊龷龖齼龡鵼齗鼤黎齏

鸭麦龭黒黐鵺鸥鶭黎stable鶞黟鶛鸥龩menu.html.twig鸊鸆龷鸺鼫鵶鵲龡鵯黎龶龲龩黟鶛鸩鸧鵫鸥龷齫齩鵧鵣麔齼鵢鵞拷鵽龩麔麊齏

鵧黀鵝鵙龷鶾鼭齉齈麨麦龷龶龲齂鼿黼黎龷龱龭鶪鶧鶥鷿黛黗黓龩鸊鸆黣龐鵕鹡龶龲龩nowicode黟鶛鸩鸧鵫黃齏

鸭麦龷麠麟鼄龟鸊鸆鸩鸧龷齫齮齬鵓鵐龩CSS鵊鵈龷龶龲黣齂鼿鵄黎鵂鵁鸥鼶鹵龌龩齍鼜黃齏

drupal 菜单

鴿鴻龩麠麟鷌鴸鴵鴴鴳鴰龷鴯鴭鴫鸩鴩龷龡鴨鷅齗鴦鷌鴥鴡鴡

鴞龶龲龐黼龡龈鼄龟鸊鸆鸩鸧齏

{#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}
{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes }}>    {# 第33行 #}
    {% else %}
      <ul>
    {% endif %}
    {% for item in items %}
      <li{{ item.attributes }}>
        {{ link(item.title, item.url) }}    {# 第39行 #}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

黈黁龷鸊鸆鸥龩鷽鳇鳆鳅黃鸊鸆鸥鼨龟鳂鳁龩鲾鼤龷鲼鵄龡鴫齏

鸭麦龷鹊龟鸊鸆鲺鲹龩黟鶿鼗龡龟twig鸥龩macro龷鼄鼁龩macro鲶鲵php鸥龩鲲鲱齏鲰鲬鲩鲥鲣鲟鲝鸭鲚鲖龶龲鼄麝鲓鲐黃龩Themer鷅鲚鲖macro鼗鲎鲍鲊鲊龷鼶鼿鲟鲇鲬龩龭鷽鳇鸥齮齬黃twig鲄龧鹥鹡macro鸩鴩龩鲀鱾龷鼯鱽鳇鱹鹌鼤鼄龟macro鼗齼黃龭齉齈鷗鱵鱲鹊龟黋鱯鱮齏鱭鼲鱩鼲鱨鵄鼄龟鱽鳇鼲齅鸭齫鱦龩鱣鲖鱟鱞

鷅鷌鱚龭龶龲鼄麝鲓鲐黃龩Themer鼀齗鲚鲖龭鱖鼁齂鼿鱔鵲markup黣鳒黃齏

鼶鼿龷鳗33鳒龷龶龲鼤addClass齼鸼鱐鹂龩ul鹍鱍齬鷗龡龟class龷鲺鲹鱉鸩鴩齏

<ul{{ attributes.addClass('nav') }}>

鼤龓鲺鲹鱅鱁鰽鰼鲺鲹齏龓鼠龩nav鼗bootstrape鸥黛黗黓龩鱐鹂ul鼶鰻鼲龩鲶麔齏鷦鲺鲹鸥龩

menu_level == 0

黦鸂鰸黃鼄龡齅齏

鷽麄鼄鼁鼀齬黃龡龟class龷鼘黦齂鼿齮齬鰶龟class龷鰳鲍鼫龲齗鼤鰱鸩鰭鰬鰨鲩龷齫齩鰤龟class齗鸑龭龡鰣鰢鰬鸥鰡龷鰝齑龄龈鹽

<ul{{ attributes.addClass('nav','class1','class2') }}>

麱鰛龷鳗39鳒鲺鲹鹽

{{ link(item.title, item.url) }}

鼗鼤龐鶥鷿li鸥龩a鹍鱍龩齏鼄鼁龩link鼗鰚龡龟twig鸥龩鲲鲱鱭function鱞齏鼘齂鼿龭鲄龧鸩鴩鸥鶭黎 齣龩鱽鳇 齏齫齩龶龲鰘鷌鲄龧鸩鴩齂鼿鲚鲖龷龄鼜齗齼鼄鼁龩a鹍鱍齮齬class龶龲齛齗鸰鼤鼄齓龩鰝齑鹽

{{ link(item.title, item.url, { 'class':['foo', 'bar', 'baz']} ) }}

鰒鸥item.title鼗麴麱龩麔麊龷item.url鼗麴麱龩鲀鱾齏

龶龲齛齗鸺鳗39鳒麟齟鹽

{{ link(item.title, item.url, { 'class':['btn', 'btn-info-outline']} ) }}

鰎鲣鹽

{{ link(item.title, item.url, item.attributes.addClass('btn', 'btn-info-outline') ) }}

鰎鲣鰋麱麖齟鹽

<a href="{{ item.url }}" class="btn btn-info-outline" >{{ item.title }} </a>

龓鼠class="btn btn-info-outline鰇龩鲾鼤龷鰒麸龭麨黊鰃龶龩鯿鷥鰇鷛鷙鯻龷黣鷓鷏鸰鼤鷌黃齏齣齂鼿齧麴麱鳂齟鷛鷙龷齫齩齼鷛鷙齮齬龡龟鯹鯶鯲龩鯱鸱鯰龷鼿鯯黎麠鯮鲾鼤齏

鸭麦龶龲龭CSS鸥麢齮齬麻黓鲺鲹鹽

#block-nowicode-branding{
    float: left;
}

.nav{
    float: right;
}

#block-nowicode-main-menu ul li {
    float: left;
    margin: 0 10px;
}

鼄鼁黊鯨黓鼗齼黃鴞logo麐黛黗黓鯤鯣鯠鯝麐鯠鸴鯙鯖齏鸼麦龡黓鵊鵈鼗鴞黛黗黓鸥龩鰤龟黆黋鯔鯠鯝鯙鯖龷鼄齓黣鷅鵼鯑鰋龩鯐鯌鯯龐龷齫齩齼鷛鷙麨鰡齮齬龡龟20鯋鶱龩鰡鯇齏

黎鼄鼁龷龶龲黣齡鷿黃鵂鵁齍鯄鯃鯤龩龜龙齓齑齏

鶺鼗龷龓鼠鼯鮿鮻黃龡麝鮹鶛鹽

  1. 鮷鲝龌鸯鸿龜龙齏
  2. 鷅鼗鮳鼒齑龩龜龙齏
  3. 鼶鼲龩龜龙齉齈鯔鼲龡龟is-active龩class齏

黊齈鯨龟鮹鶛龷龶龲鮻黎龈龡鮲鮱齏鼄鼁黁鼀鮮鳗鮪黓齏鼄鼁鼀鼲黈齉鼒鼏鼲鼄龟is-active龩class龷龖齼龶龲龭黈齉齏鰒鼫麻龟黆黋鮦鮣is-active鼗龖齼龶龲麨黊麁黀龜龙黆黋龩鯻鮟麚麖龩鼗鮝麴麱鲀鱾#龷龖龓龷龭麸麶黆黋鸥鼀齗麚鷢鮛麸龩node鲀鱾鮗齂鮗齂鱽鮔鼄龟鮹鶛齏

本书共56小节:

评论 (写第一个评论)