ploneをdockerで起動してカスタムテンプレートを追加

dockerでploneを起動して、テンプレートのタグを試してみた手順です。

##dockerを起動

ploneのdockerは公式で用意されています。ダウンロードして、そのまま利用しました。
https://github.com/plone/plone.docker

オプションを指定してploneを起動します

```
% docker run --rm --name plone -v $PWD/plone-data:/data -p 8080:8080 -e SITE=plone plone
```

ブラウザで http://localhost:8080/plone にアクセスすると、トップページが表示されます。
![スクリーンショット 2020-09-04 17.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/d7086521-683e-fbb5-9e2d-1ecb978a0c7f.png)

##テンプレートの調整
customディレクトリで新規作成すれば、プレビューできます。

###テンプレートを追加
1.カスタムテンプレートの一覧へ移動
http://localhost:8080/plone/portal_skins/custom/manage_main

2.ナビゲーションメニュー右上の Select type to add のプルダウンから
![スクリーンショット 2020-09-04 14.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/f65df160-d383-e0f3-751e-b56eb94f184d.png)

3.Page Template を選択します
![スクリーンショット 2020-09-04 14.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/d2ad8133-c70b-1a57-8d3d-875de3cd69c5.png)

4.ポップアップウインドウにIdを入力し、Add and Edit ボタンを押下します
![スクリーンショット 2020-09-04 14.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/89567181-a9e7-a91e-8265-5589592efb06.png)

5.編集画面が表示されます
http://localhost:8080/plone/portal_skins/custom/abc/pt_editForm
![スクリーンショット 2020-09-04 14.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/b8add749-3330-0ccd-ac68-3d800fcbdb16.png)

##追加したテンプレート

REQUESTの内容を確認するためにテンプレートを追加して、次の行を追加しています。

```html
    <h2>container/REQUEST</h2>
    <p tal:replace="structure container/REQUEST">container/REQUEST</p>
```

http://localhost:8080/plone/portal_skins/custom/abc/pt_editForm

```html

<!DOCTYPE html>
<html>
  <head>
    <title tal:content="template/title">The title</title>
    <meta charset="utf-8" />
  </head>
  <body>
    
    <h2><span tal:replace="context/title_or_id">content title or id</span>
        <span tal:condition="template/title"
              tal:replace="template/title">optional template title</span></h2>

    This is Page Template <em tal:content="template/id">template id</em>.

    <h2>context/def</h2>
    <p tal:define="def context/def" tal:content="def">context/def</p>
    
    <h2>container/REQUEST</h2>
    <p tal:replace="structure container/REQUEST">container/REQUEST</p>

  </body>
</html>
```

## python スクリプト

スクリプトをpythonで書いて、テンプレートから呼び出すことができます。

http://localhost:8080/plone/portal_skins/custom/def/ZPythonScriptHTML_editForm

```python
# Example code:

# Import a standard function, and get the HTML request and response objects.
from Products.PythonScripts.standard import html_quote
request = container.REQUEST
response =  request.response

# Return a string identifying this script.
text = 'This is the %s %s in %s' % (script.meta_type,
                                    html_quote(script.title_and_id()),
                                    container.absolute_url())

print(text)
#print(container.REQUEST.BASE1)
#print(container.REQUEST)
return printed

```

先ほど追加したテンプレートに次のように追記してあります。

```html

    <h2>context/def</h2>
    <p tal:define="def context/def" tal:content="def">context/def</p>
```

## 表示

次のURLにアクセスすると結果を確認することができます
http://localhost:8080/plone/portal_skins/custom/abc
![スクリーンショット 2020-09-04 18.06.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32195/64282dea-ac9f-72b3-2e6b-0aec97617051.png)

# 参考

* https://hub.docker.com/_/plone
* https://github.com/plone/plone.docker
* https://docs.plone.org/adapt-and-extend/theming/templates_css/template_basics.html
* https://zope.readthedocs.io/en/latest/zopebook/AppendixC.html