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

トップページを構成する3つの要素（portal-top、portal-columns、portal-footer/portal-colophon）のうち、portal-columnsはまさにコンテンツそのものを支えている部分だ。左右のメニュー、そして中央のドキュメントコンテンツ。とっても大切ですなぁ。

先にも見たとおり、この部分にはテーブルレイアウトが採用されている。

それぞれのcolumnをみていくことにしませう。

まずは左右のメニューなんだけど、これは比較的シンプル。portal-columns-one/twoは、こんな感じになってる。

<tal:comment replace="nothing"> Start of the left column </tal:comment>
<td id="portal-column-one"
    metal:define-slot="column_one_slot"
    tal:condition="sl">
  <div class="visualPadding">
    <metal:portlets define-slot="portlets_one_slot">
      <metal:leftportlets use-macro="here/portlets_fetcher/macros/left_column">
        This instruction gets the portlets (boxes) for the left column.
      </metal:leftportlets>
    </metal:portlets>
    &nbsp;
  </div>
</td>
<tal:comment replace="nothing"> End of the left column </tal:comment>

<tal:comment replace="nothing"> Start of right column </tal:comment>
<td id="portal-column-two"
    metal:define-slot="column_two_slot"
    tal:condition="sr">
  <div class="visualPadding">
    <metal:portlets define-slot="portlets_two_slot">
      <metal:rightportlets use-macro="here/portlets_fetcher/macros/right_column">
        This instruction gets the portlets (boxes) for the right column.
      </metal:rightportlets>
    </metal:portlets>
    &nbsp;
  </div>
</td>
<tal:comment replace="nothing"> End of the right column </tal:comment>

ふむふむ。どちらも構造としては同じですな。

visualPaddingというdivの中に左右のポートレットのマクロ（Ploneのプロパティ：left_slots/right_slotsで設定されたもの）が展開される形になっている。つまり形としては以下のようになるわけだ。

portletのCSSについてはまた別に見ることにしよう。

とりあえずまとめ

左右のメニューはvisualPaddingがいくつかのportletを包んでいる形になっている

<tal:comment replace="nothing"> Start of main content block </tal:comment>
<td id="portal-column-content"
    tal:define="tabindex python:Iterator(pos=0)">

 <metal:block define-slot="content">
    <div id="content"
        metal:define-macro="content"
        tal:define="show_border python:here.showEditableBorder(template_id=template_id, actions=actions );"
        tal:attributes="class python:test(show_border,'documentEditable','')">

      <metal:ifborder tal:condition="show_border" >
      <div metal:use-macro="here/global_contentviews/macros/content_views">
         The content views (View, Edit, Properties, Workflow)
      </div>

      <div metal:use-macro="here/global_contentviews/macros/content_actions">
         The content bar
      </div>
      </metal:ifborder>

      <div class="documentContent" id="region-content">

        <a name="documentContent"></a>

        <div metal:use-macro="here/global_statusmessage/macros/portal_message">
          Portal status message
        </div>

        <metal:header metal:define-slot="header" tal:content="nothing">
          Visual Header
        </metal:header>

        <metal:bodytext metal:define-slot="main" tal:content="nothing">
          Page body text
        </metal:bodytext>

        <metal:sub metal:define-slot="sub">
          <metal:discussion use-macro="here/viewThreadsAtBottom/macros/discussionView" />
        </metal:sub>

      </div>

    </div>

  </metal:block>
</td>
<tal:comment replace="nothing"> End of main content block </tal:comment>

長いけれども部品が多いだけで構造が複雑なわけではないようですな。ざっとまとめると以下のようになっている。

contentの内容は、大きくわけると「content_views」、「content_actions」、「region-content」3つから成っている。

「content_views」は、コンテンツを編集するときに出現する「表示」「編集」「プロパティ」「共有」などのタブのこと。「content_actions」は右上にアイコンで示されている「メールアイコン」「プリントアウトアイコン」「RSSアイコン」などのこと。そして「region-content」は文書なりなんなりのコンテンツそのものを表示する領域を示しているようだ。

さらに、コンテンツ表示領域である「region-content」は、「global_statusmessage」「コンテンツの実体」「viewThreadsAtBottom」の3つから構成されている。「global_statusmessage」とか「viewThreadsAtBottom」とかは常に表示されているわけじゃなくて、「変更が保存されました（global_statusmessage）」とか「コメントする（viewThreadsAtBottom）」とか、ある条件下で表示されるもの。なので、基本的にはこの「region-content」はコンテンツの実体を表示する領域と認識しておけばまぁよっぽど大丈夫じゃないかと。

ただしここで「content_views」、「content_actions」、「global_statusmessage」、「viewThreadsAtBottom」といっているのはマクロの名前なので、CSSのID/classとしてどんな名前が付いているのかも調べておこう。

これらのマクロはportal_skins/portal_templates以下にあるので、ここを調べればOK。

まとめると以下のようになる。

まとめ

portal-column-contentは「contentViews」、「actionItems」、「region-content」の3つの部分から構成されている