Upload
byrne-reese
View
4.063
Download
0
Tags:
Embed Size (px)
DESCRIPTION
In this presentation we introduce designers to the Melody Content Management System. We talk about its simple and semantic templating language, how to create and package themes, how to expose theme options to users, and many other exciting topics.
Citation preview
an introduction to
The Open Melody Software GroupByrne Reese
for designers
what’dya gonna talk about?
• Why Melody?
• Templating Language
• Templates and Themes
• Theme Options & Config Bundles
• Great Tools & Plugins for Designers
about melody
Melody is an open source CMS built by professional service
providers for people who share a passion for community and
creating great web sites.
why melody?
• Easy to use with no knowledge of a programming language required.
• Highly extensible with tons of plugins to choose from.
• Build powerful, secure and reliable web sites with no additional plugins or software needed.
• Create feature rich, social-media aware web sites for customers.
why designers like melody
• Simple, semantic and intuitive templating language.
• Easy to build web sites quickly.
• Focus on features that allow for supportable and maintainable themes and code.
• Upgrade without breaking everything.
getting started:templating language
The Melody Templating Language is a mark-up language
just like:
The Melody Templating Language is a mark-up language
just like:
HTML
<h1>My Website Name</h1>
if this looks familiar...
<h1><$mt:BlogName$></h1>
then so should this.
basic syntax
• Markup Language
• Case Insensitive
• XML-ish
• Examples:
• Function: <$mt:MyTag$>
• Loop: <mt:MyLoop>...</mt:MyLoop>
lotsa variation
These are all equivalent:
• <mt:Foo>
• <MTFoo>
• <$mt:Foo$>
• <mtfoo>
function tags
• <$mt:EntryTitle$>
• <$mt:AuthorName$>
• <$mt:AuthorUserpic$>
• <$mt:AssetThumbnailURL width=”100”$>
• <$mt:CommentText$>
Plus hundreds more...
variables
• Setting a variable:<mt:var name=”foo” value=”bar”>
• Outputting a variable:<mt:var name=”foo”>
• Setting a variable block:<mt:SetVarBlock name=”foo”> <mt:Entries> <$mt:EntryTitle$> </mt:Entries></mt:SetVarBlock>
loops & container tags
• <mt:Entries>
• <mt:Comments>
• <mt:Authors>
• Sort and filter:
• sort, sort_direction, lastn, <filter by>
And many more...
special loop variables
•These are maintained for you:
• __first__
• __last__
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>
special loop variables
•These are maintained for you:
• __first__
• __last__
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>
Yes, those are two underscores.
includes & encapsulation
• Share HTML and template code between templates
<$mt:include module=”Module Name”$>
• Include:
• Modules
• Widgets
• Files
modifiers
• Can be used to transform any tag
• <$mt:EntryTitle lower_case=”1”$>
• encode_html=”1” (js, xml, etc)
• upper_case=”1”, lower_case=”1”
• count_words=”1”
• trim
• Many more...
<$mt:EntryTitle$> => My “Blog”
<$mt:EntryTitle upper_case=”1”$> => MY “BLOG”
<$mt:EntryTitle lower_case=”1”$> => my “blog”
<$mt:EntryTitle encode_html=”1”$> => My "Blog"
<$mt:EntryTitle count_words=”1”$> => 2
for example...
conditionals
• <mt:if name=”foo” eq=”Byrne”>
• <mt:else name=”foo” eq=”Jay”>
• <mt:else>
• <mt:if name=”foo” ne=”$bar”>
conditional operators
• Equals?<mt:if name=”foo” eq=”Byrne”>
• Not equal to?<mt:if name=”foo” ne=”Byrne”>
• Greater than?<mt:if name=”foo” gt=”10”>
• Less than?<mt:if name=”foo” lt=”366”>
• Plus: le (less then or equal to), ge (greater than or equal to)
<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>
bringing it all together
<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>
bringing it all together
loops
<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>
bringing it all together
conditional tags
<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>
bringing it all together
variables & meta-loop variables
templates
packaging
theme structure
• Themes are broken up into three components:
• a configuration file, a.k.a. “config.yaml”
• templates
• static files (images, stylesheets, javascript, etc)
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
total control
• Your config.yaml let’s you:
• Name all the templates.
• Define modules, widgets, sidebars, archives and more.
• Set caching preferences.
• And more...
applying a theme
theme options
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
“Can you make me a button that does...?
– Famous Customer Quote
• Give customers the controls they need.
• Prevent your users from hanging themselves.
• Extend Melody in seconds.
• Say “goodbye” to PHP and Perl.
name: My Themetemplate_sets: my_theme: label: The Best Theme in the World options: fieldsets: feeds: label: Feeds and Syndication feedburner_id: label: Feedburner URL type: text tag: FeedburnerURL use_feedburner: label: Use Feedburner? hint: Turn on if you want to use Feedburner instead of... type: checkbox tag: IfFeedburnerEnabled?
config.yaml
Supported Option Types
• Simple Text Inputs
• Text Areas
• Radio Buttons
• Checkboxes
• Pull-down Menus
• Blog Selectors
• Entry Selectors
• Image Radio Buttons
Supported Option Types
• Simple Text Inputs
• Text Areas
• Radio Buttons
• Checkboxes
• Pull-down Menus
• Blog Selectors
• Entry Selectors
• Image Radio Buttons
Extensible!
Example: Homepage Manager
Example: Homepage Manager
Fieldsets
Image Radios
Entry Selectors
configuration bundles
Installation Instructions:
Thank you for installing my theme. To get started lets configure your system properly:
1. Navigate to “Comment Preferences” and turn off TrackBacks
2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key.
3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled.
4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for your API key:
Installation Instructions:
Thank you for installing my theme. To get started lets configure your system properly:
1. Navigate to “Comment Preferences” and turn off TrackBacks
2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key.
3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled.
4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for your API key:
• Make it easy for your clients to configure their system.
• Give them multiple, pre-approved and supported configuration options.
• Pre-configure Melody and plugins.
• Create bundles quickly just by editing a config file.
great tools & pluginsfor designers
Custom CSS
Give clients control without sacrificing supportability and warrantability.
• Dedicated CSS Editor.
• Easily accessible from menu.
• No republishing necessary.
Custom Header
Provide rich user experiences when customizing a design.
• Give clients control over the things they need.
• Provides gratifying and rich user experience.
Image Cropper
Professionally produced images for your web site.
• Define thumbnail sizes for your theme.
• Allow users to crop and annotate images.
• Adjust image size and quality.
Template Profiler
Produce performant code.
• Troubleshoot performance problems.
• Isolate what plugins may be contributing to poor performance.
• Just make things faster!
for later study...
Advanced Topics
• Template Functions
• Global Templates
• Module Caching
• Template Performance Profiling
• Websitehttp://openmelody.org/
• Documentationhttp://docs.openmelody.org/
• Downloadhttp://openmelody.org/code/downloads
• Mailing Listhttp://groups.google.com/group/openmelody
Thank you.