Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Diazo - XSLT basiertes Website Theming
Search
Maik Derstappen
August 25, 2012
Programming
2
72
Diazo - XSLT basiertes Website Theming
Flexibel, schnell und einfach für Plone und den Rest der Welt
Maik Derstappen
August 25, 2012
Tweet
Share
More Decks by Maik Derstappen
See All by Maik Derstappen
Diazo - XSLT basiertes Website Theming
mrtango
0
100
Other Decks in Programming
See All in Programming
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
CSC509 Lecture 05
javiergs
PRO
0
290
クラシルを支える技術と組織
rakutek
0
190
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
明日から始めるリファクタリング
ryounasso
0
110
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Become a Pro
speakerdeck
PRO
29
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
How to Ace a Technical Interview
jacobian
280
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Language of Interfaces
destraynor
162
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
Diazo XSLT basiertes Website Theming Maik Derstappen – Inqbus GmbH
& Co. KG –
[email protected]
Flexibel, schnell und einfach für Plone und den Rest der
Welt
Was wir haben
None
Wie es aussehen soll
None
None
None
None
Diazo + plone.app.theming
None
<replace css:content='#portal-globalnav li' css:theme-children='#global-navigation' /> Die Hauptnavigationspunkte übernehmen
<replace css:content="#content" css:theme="#content" /> Den Seiteninhalt übernehmen
<after css:content='.portlet.portletNews' css:theme-children='#portal-column-two' /> Das Nachrichten-Portlet übernehmen
<after css:content-children='#portal-column-two' css:theme-children='#portal-column-two' /> Alle Portlets der rechten Spalte übernehmen
<after css:content='#portal-column-two .portlet:not(.portletNavigationTree)' css:theme-children='#portal-column-two' /> Alle Portlets bis auf Navigation
übernehmen
#portal-column-two .portlet:not(.portletNavigationTree) Alle Portlets bis auf Navigation übernehmen
Diazo rules.xml Grundgerüst
<?xml version="1.0" encoding="UTF-8"?> <rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> ... </rules>
Diazo rules.xml Definition
<rules css:if-content="#visual-portal-wrapper"> <after content="/html/head/script" theme-children="/html/head" /> <replace css:content='#portal-globalnav li' css:theme-children='#portal-globalnav'
/> <replace css:content-children="#content" css:theme-children="#content" /> <after css:content='.portlet.portletNews' css:theme-children='#portal-column-two' /> </rules>
statische Template-Datei definieren
<rules css:if-content="#visual-portal-wrapper"> <theme href="index.html" css:if-content="body.section-front-page" /> <theme href="index.html" css:if-content="body.portaltype-plone-site" />
<theme href="article.html" /> <notheme css:if-content="body.rawpage" /> </rules>
Diazo – Regeln (Rules)
XPath oder CSS3? Diazo unterstützt sowohl XPath- als auch CSS3-Selektoren
in Regeln.
XPath <after content="//div[@id='portal-column-one'] //*[contains(@class, 'portlet')]" theme=“//div[@id='portal-column-one']“ />
CSS3 <after css:content="#portal-column-one .portlet" css:theme=“#portal-column-one“ />
XPath- und CSS3-Selektoren führen zu identischen Ergebnissen, da die CSS3-Selektoren
in XPath umgewandelt werden
theme-children / content-children Wird die children-Variante verwendet, so betrifft die
Anweisung, die im gefundenen Element enthaltenen Kind-Elemente, nicht das Element selbst
- theme - notheme - replace - before / after
- drop - strip - merge - copy
<theme />
theme gibt die Template-Datei für das Theme an <theme href="index.html"
css:if-content="body.section-front-page" /> <theme href="article.html" />
<notheme />
notheme deaktiviert das Theming, dies kann zusammen mit Bedingungen eingesetzt
werden <notheme css:if-content="body.rawpage" />
<replace />
replace ersetzt ein Element im Theme mit einem Element aus
dem content <replace css:content="#edit-bar" css:theme="#edit-bar" /> <replace css:content-children="#content" css:theme-children="#content" />
<after /> & <before />
after & before fügen ein Element aus dem Content vor
/ nach einem Element im Theme ein <before css:content='.portlet.portletNavigationTree' css:theme-children='#portal-column-two' /> <after content-children="#portal-column-two" theme-children="#portal-column-two" />
<copy />
copy kopiert Attribute aus dem Content ins Theme <copy attributes="id
dir" css:content="body" css:theme="body" />
<merge />
merge vereint Attribute aus dem Content mit vorhandenen Attributen im
Theme <merge attributes="class" css:content="body" css:theme="body" />
<drop />
drop entfernt Elemente / Attribute aus dem Theme oder Content
<drop css:theme=".portletNavigationTree" attributes="class id" /> <drop css:content="#portal-searchbox .searchSection" />
<strip />
strip entfernt ein Element aus dem Theme oder Content, erhält
aber den Inhalt des Elementes <strip css:content=".portletWrapper" />
Feste Ausführreihenfolge von Diazo Regeln!
1. before - Regeln für (theme) 2. drop - Regeln
3. replace - Regeln (theme) 4. strip - Regeln 5. Regeln die Attribute verändern 6. before, replace, after - Regeln (theme-children) 7. after – Regeln (theme) Ausführreihenfolge von Diazo-Regeln
Dank plone.app.theming können Diazo-Themes per ZIP-Datei und ohne Neustart in
Plone installiert werden. Diazo-Theme als ZIP-Datei
Einfaches Verzeichnis mit statischen Dateien + rules.xml + manifest.cfg [wpd]
├── article.html ├── images │ ├── icon-home.gif │ ├── icon-mail.gif │ ├── input-bg.gif │ ├── link1-bg.gif │ ├── logo.jpg │ ├── main-bg.jpg ├── index.html ├── manifest.cfg ├── rules.xml └── style.css
[theme] title="Plone Theme: PloneKonf 2012" description = "Plone Theme for
the first german Plone conference." manifest.cfg – mit Metadaten
None
Es ist möglich Inhalte weiterer Quellen einzubinden
<after css:theme-content="#content" css:content="#content" href="@@custom_view" /> Einbinden weiterer Quellen
Dies funktioniert auch für externe Websites und Web-Anwendungen!
<replace css:content-children="#content-core .panes" css:theme-children=".col-1 .section" href="http://konferenz.plone.de/programm" /> Einbinden externer Systeme
Dies eröffnet umfangreiche Möglichkeiten, verschiedene Systeme nahtlos und barrierefrei in
Plone zu integrieren. Einbinden externer Systeme
None
<replace css:content-children="#spTeaserColumn" css:theme-children="#press_table .left" href="http://www.spiegel.de" if-path="presse/" /> <replace css:content=".teaserlist" css:theme-children="#press_table
.right" href="http://www.zeit.de/" if-path="presse/" /> Einbinden von nicht Plone-Systemen
None
Snippets
<replace content="//dl[contains(@class,'portlet- collection-links')]//a" method="raw"> <xsl:attribute name="target">_blank</xsl:attribute> </replace> Snippets Link in
Kollektions-Portlets mit target=“_blank“
Vielen Dank Fragen ? plone.app.theming: PyPi Diazo: http://diazo.org Development &
Consulting: http://inqbus.de Hosting: http://plone-hosting.de