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
59
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
94
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
VS Code をプロダクトにどう取り込むか
onomax
1
360
ONE WEDGE_company_guide
1wedge_one
0
480
エンターテイメント業界で利用されるAWS
demuyan
0
210
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Goのエラースタックトレースの歴史と今後
sonatard
9
1.4k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
800
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
800
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
What We Can Learn From OSS
inouehi
0
420
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Gamification - CAS2011
davidbonilla
76
4.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Thoughts on Productivity
jonyablonski
58
3.8k
Product Roadmaps are Hard
iamctodd
44
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Building Adaptive Systems
keathley
31
1.9k
Designing the Hi-DPI Web
ddemaree
276
33k
Raft: Consensus for Rubyists
vanstee
132
6.3k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
KATA
mclloyd
15
12k
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