基础篇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鱵鱱鮟鼻鮟鼻鱮鮞鼅龙鮼鶛齈

 

本书共42小节:

评论 (写第一个评论)