portal-topの構成（テンプレート）

portal-topの中身を見てみる。

Portal Visual Wrapperで見たように、Ploneの各ページは3つのパーツによって構成されている。今回はその一番上に位置するportal-topの中身を見てみることにしよう。

テンプレート（portal_skins/plone_templates/main_template参照）は以下のようになっている（一部削除）。

      <div id="portal-top" i18n:domain="plone">

        <div id="portal-header">

             <div metal:use-macro="here/global_siteactions/macros/site_actions">
               Site-wide actions (Contact, Sitemap, Help, Style Switcher etc)
             </div>

             <div metal:use-macro="here/global_searchbox/macros/quick_search">
               The quicksearch box, normally placed at the top right
             </div>

             <a metal:use-macro="here/global_logo/macros/portal_logo">
               The portal logo, linked to the portal root
             </a>

             <div metal:use-macro="here/global_skinswitcher/macros/skin_tabs">
               The skin switcher tabs. Based on which role you have, you
               get a selection of skins that you can switch between.
             </div>

             <div metal:use-macro="here/global_sections/macros/portal_tabs">
               The global sections tabs. (Welcome, News etc)
             </div>
          </div>

          <div metal:use-macro="here/global_personalbar/macros/personal_bar">
             The personal bar. (log in, logout etc...)
           </div>

           <div metal:use-macro="here/global_pathbar/macros/path_bar">
             The breadcrumb navigation ("you are here")
           </div>
      </div>

いろいろなマクロが使われているけれど、まずは大きく3つの部分に分かれていることがわかる。

portal-header
personal_barマクロ
path_barマクロ

この3つをportal-topというdivで包んでいる。

さらに細かく見てみると、portal-headerは「お問い合わせ、サイトマップなどのサイトアクション」、「検索」、「ロゴ」、「スキンスイッチ」、「グローバルナビゲーション」といった部品（マクロ）にわかれていることもわかる。

結局どうなっているのかというと…

portal-top-structure

こんな感じ。

ここでglobal_****というのはすべてマクロで、portal_skins/plone_templatesにある。

これらのマクロの中身をCSSのidベースでおおざっぱに（hiddenなものは省いて）見てみると

global_siteactions → id="portal-siteactions"
global_searchbox → id="portal-searchbox"
global_logo → id="portal-logo"
global_skinswitcher → id="portal-skinswitcher"
global_sections → id="portal-globalnav"
global_personalbar → id="portal-personaltools"
global_pathbar → id="portal-breadcrumbs"

という感じになっている。マクロの名前とidの名前が微妙にズレてたりするのは何故なのかはわからないけど、とにかく上図をCSSのidベースで書き換えると下図のようになる。

portal-top-structure-css

まとめ: portal-topは大きく「portal-header」、「portal-personaltools」、「portal-breadcrumbs」の3つのパーツから構成されている
さらに「portal-heaer」は「portal-siteactions」、「portal-searchbox」、「portal-logo」、「portal-skinswitcher」、「portal-globalnav」といった5つのパーツから構成されている

Sections

Personal tools

portal-topの構成（テンプレート）

Document Actions