• Save
Theme Framework in Depth - MT DDC Tokyo
Upcoming SlideShare
Loading in...5
×
 

Theme Framework in Depth - MT DDC Tokyo

on

  • 18,281 views

 

Statistics

Views

Total Views
18,281
Views on SlideShare
5,649
Embed Views
12,632

Actions

Likes
6
Downloads
0
Comments
0

12 Embeds 12,632

http://www.movabletype.org 9721
http://www.koikikukan.com 1900
http://movabletype.org 849
http://smallworld.west-tokyo.com 58
http://webcache.googleusercontent.com 31
http://translate.googleusercontent.com 30
https://movabletype.org 19
http://cache.yahoofs.jp 10
http://translate.yandex.net 10
http://mtorg.mtype.us 2
http://56tsh20135 1
https://ixquick-proxy.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Theme Framework in Depth - MT DDC Tokyo Theme Framework in Depth - MT DDC Tokyo Presentation Transcript

  • MT DDC Tokyo 2010.07.31 Theme Framework in Depth Author: Yujiro Araki Translation: Nick
  • About “Yujiro” ・ Yujiro Araki(http://twitter.com/yujiro) ・ The author of “Koiki-Kuukan” http://www.koikikukan.com/ ・ He wrote a lot of Movable Type technical books. (comment by Nick) 2/141
  • Agenda ・ About Theme Framework ・ Customizing Theme ・ Switching Styles ・ Customizing CMS ・ Extending Theme Framework 3/141
  • About Theme Framework 4/141
  • With Theme, you can templates/categories/custom fields Export as a theme Movable Type theme export 5/141
  • Then, you can Import the theme to another MT Movable Type theme import 6/141
  • Also you can create your own theme such as • a theme with only template set • a theme with only custom fields settings etc 7/141
  • Tips 1 Even if you apply a new theme, other elements will remain as they were. E.g. existing folders, categories, custom fields, etc 8/141
  • Tips 2 Themes won’t overwrite existing data which have same basenames. E.g. When importing categories which have same names 9/141
  • Tips 3 You can use Theme with MTOS (except for custom fields’ data, of course) 10/141
  • Note All the existing templates will be backed up. 11/141
  • Attention A huge list of templates ! 12/141
  • Customizing Theme 13/141
  • How can you customize ? It’s easier to edit exported theme files. You can also create a new theme from a scratch. 14/141
  • You can • Add/change/delete each theme element templates/categories/custom fields/web pages, etc • Customize admin screens • Add styles for the theme • Add thumbnails of the theme 15/141
  • Structure of Theme package <MT_DIR> Theme name/ blog_static/ file path/ Outside files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml theme.yaml thumb.png thumb-medium.png thumb-small.png 16/141
  • Structure of Theme package <MT_DIR> Theme name/ blog_static/ File path/ Outside files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml theme.yaml Configuration file thumb.png thumb-medium.png thumb-small.png 17/141
  • Structure of Theme package <MT_DIR> Theme name/ blog_static/ File path/ Outside files Template files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml theme.yaml thumb.png thumb-medium.png thumb-small.png 18/141
  • Structure of Theme package <MT_DIR> Theme name/ Static files(e.g. images, css) blog_static/ File path/ Outside files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml theme.yaml thumb.png thumb-medium.png thumb-small.png 19/141
  • Structure of Theme package <MT_DIR> Theme names/ blog_static/ File path/ Outside files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml Localization file theme.yaml thumb.png thumb-medium.png thumb-small.png 20/141
  • Structure of Theme package <MT_DIR> Theme name/ blog_static/ File path/ Outside files ・・・ ・・・ ・・・ ・・・ templates/ ( ) Template files(.mtml) ・・・ ・・・ ・・・ ・・・ l10n_ja.yaml theme.yaml thumb.png thumb-medium.png Thumbnails thumb-small.png 21/141
  • theme.yaml • defines the structure of Theme package • What is YAML ? Data definition format by hashes and arrays A YAML Primer: Yet Another Markup Language http://www.movabletype.org/documentation/developer/ a-yaml-primer-yet-another-markup-language.html 22/141
  • Sample of theme.yaml theme.yaml label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog protected: 1 elements: elements: template_set: component: core importer: template_set template_set: name: template set data: label: Classic Blog component: core base_path: templates require: 1 templates: importer: template_set archive: category_entry_listing: label: Category Entry Listing mappings: name: template set category: archive_type: Category monthly_entry_listing: label: Monthly Entry Listing mappings: monthly: archive_type: Monthly index: archive_index: label: Archive Index outfile: archives.html rebuild_me: 1 feed_recent: label: 'Feed - Recent Entries' outfile: atom.xml rebuild_me: 1 javascript: label: JavaScript outfile: mt.js rebuild_me: 1 main_index: label: Main Index outfile: index.html rebuild_me: 1 rsd: label: RSD outfile: rsd.xml rebuild_me: 1 styles: label: Stylesheet outfile: styles.css rebuild_me: 1 23/141
  • ’ YAML’s format Hash definition foo: aaa key value space 24/141
  • Nested Hash foo: bar: aaa value key 25/141
  • Array format - aaa - bbb value - ccc space 26/141
  • Combination of Hash and Array foo: - aaa - bbb - ccc 27/141
  • Attention ! You have to INDENT correctly ! 28/141
  • Indent in theme.yaml elements: plugin_default_pages: component: ~ data: post_2: elements: plugin_default_pages: component: ~ data: Bad intend post_2: 29/141
  • Only UTF-8 is permitted An error occurs if you use any other character set than UTF-8. 30/141
  • Note The following slides are quoted from the book: “Movable Type5 professional guide”, Written by Yujiro Araki. 31/141
  • What to define in theme.yaml ・Basic information ・Elements 32/141
  • Basic information label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog protected: 1 description: <__trans phrase="Typical and authentic blogging design comes with plenty of styles and the selection of 2 column / 3 column layout. Best for all the bloggers."> thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png ・・・snip・・・ ・・・ ・・・ 33/141
  • Basic information 1 label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog protected: 1 description: <__trans phrase="Typical and authentic blogging design comes with plenty of styles and the selection of 2 column / 3 column layout. Best for all the bloggers."> thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png *snip* 34/141
  • Basic information 2 label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog protected: 1 description: <__trans phrase="Typical and authentic blogging design comes with plenty of styles and the selection of 2 column / 3 column layout. Best for all the bloggers."> thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png *snip* 35/141
  • Basic information 3 label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ <__trans phrase="">will be version: 1.0 translated to the user class: blog language protected: 1 description: <__trans phrase="Typical and authentic blogging design comes with plenty of styles and the selection of 2 column / 3 column layout. Best for all the bloggers."> thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png *snip* 36/141
  • Basic information 4 label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog protected: 1 description: <__trans phrase="Typical and authentic blogging design comes with plenty of styles and the selection of 2 column / 3 column layout. Best for all the bloggers."> thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png ・・・snip・・・ ・・・ ・・・ 37/141
  • Definition of the Elements The elements include ・template sets ・categories ・folders ・custom fields ・outside files etc. 38/141
  • Defining elements label: Classic Blog *snip* elements: template_set: *snip* default_categories: *snip* default_folders: *snip* custom_fields: *snip* blog_static_files: *snip* default_pages: *snip* default_prefs: *snip* 39/141
  • Defining elements label: Classic Blog *snip* elements: template_set: Template sets *snip* default_categories: Categories *snip* default_folders: Folders *snip* custom_fields: Custom fields *snip* blog_static_files: Files such as images, js, etc *snip* default_pages: Pages *snip* default_prefs: Website and Blog settings *snip* 40/141
  • Defining each element elements: element name: component: core importer: template_set name: template set data: ・・・snip・・・
  • Defining each element Component name core, commercial, etc elements: element name: Importer name component: core (required) importer: template_set name: template set data: Element name ・・・snip・・・ (arbitrary) Beginning of the element data
  • Example : template_set element: template_set: component: core importer: template_set name: template set data: label: Classic Blog base_path: templates require: 1 templates: ・・・snip・・・
  • Defining template_set element: template_set: Importer name component: core importer: template_set name: template set data: Template set’s label: Classic Blog name base_path: templates require: 1 templates: Template file path ・・・snip・・・ Required flag Next slide Beginning of the template data
  • Defining templates templates: index: *snip* archive: *snip* individual: *snip* page: *snip* module: *snip* system: *snip* widget: *snip* widgetset: *snip*
  • Definition of template_set templates: index: Index templates *snip* archive: Archive templates *snip* individual: Individual Entry templates *snip* page: Page templates *snip* module: Template modules *snip* system: System templates *snip* widget: Widget templates *snip* widgetset: Widget sets *snip*
  • Defining “index templates” Export templates in YAML format index: archive_index: label: Archive Index outfile: archives.html rebuild_me: 1 feed_recent: label: 'Feed - Recent Entries' outfile: atom.xml rebuild_me: 1 javascript: label: JavaScript outfile: mt.js rebuild_me: 1 main_index: label: Main Index outfile: index.html rebuild_me: 1 rsd: label: RSD outfile: rsd.xml rebuild_me: 1 styles: label: Stylesheet outfile: styles.css rebuild_me: 1
  • Defining each index template index: archive_index: label: Archive Index outfile: archives.html rebuild_me: 1 feed_recent: label: 'Feed - Recent Entries' outfile: atom.xml rebuild_me: 1 javascript: label: JavaScript outfile: mt.js rebuild_me: 1 main_index: label: Main Index outfile: index.html rebuild_me: 1 rsd: label: RSD outfile: rsd.xml rebuild_me: 1 styles: label: Stylesheet outfile: styles.css rebuild_me: 1 Theme name/templates/main_index.mtml
  • Adding a new RSS template templates: index: *snip* rss: label: RSS outfile: rss.xml rebuild_me: 1 THEME_NAME/templates/rss.mtml The template file should be saved to this location
  • Defining archive templates archive: category_entry_listing: label: Category Entry Listing mappings: category: archive_type: Category monthly_entry_listing: label: Monthly Entry Listing mappings: monthly: archive_type: Monthly THEME_NAME/templates/ monthly_archive_listing.mtml
  • Defining template modules module: banner_footer: label: Banner Footer banner_header: label: Banner Header comment_detail: label: Comment Detail comments: label: Comments entry_summary: label: Entry Summary html_head: label: HTML Head sidebar: label: Sidebar trackbacks: label: Trackbacks THEME_NAME/templates/html_head.mtml
  • Defining widget templates widget: about_this_page: label: About This Page archive_widgets_group: label: Archive Widgets Group author_archive_list: label: Author Archives calendar: label: Calendar category_archive_list: label: Category Archives creative_commons: label: Creative Commons current_author_monthly_archive_list: label: Current Author Monthly Archives current_category_monthly_archive_list: label: Current Category Monthly Archives THEME_NAME/templates/ category_archive_list.mtml
  • Defining widget sets widgetset: 3column_layout_primary_sidebar: label: '3-column layout - Primary Sidebar' order: 1000 widgets: - Archive Widgets Group - Page Listing - Syndication - OpenID Accepted - Powered By 3column_layout_secondary_sidebar: label: '3-column layout - Secondary Sidebar' order: 1000 widgets: - Search - Home Page Widgets Group - About This Page Sort order is defined here Only for the available widget
  • Defining default_categories If you export categories in YAML format elememts: default_categories: component: core importer: default_categories data: Howto: label: Howto description: mainly describes… children: Plugins: label: How to use plgins templates: label: How to write MT’s… themes label:introducing… Journal: label: jounal description: daily journal
  • Defining each category elements: default_categories: component: core importer: default_categories data: howto: label: Howto description: mainly describes about children: foo: label: bar foo: label: bar foo: label: bar description: foobar
  • Defining sub-categories elememts: default_categories: component: core importer: default_categories data: howto: label: Howto description: mainly describes… children: plugins: label: Plugins templates: label: templates
  • Defining default_folders “default_folders” is different from categories elememts: default_folders: component: core importer: default_folders data: images: label: images description: image folder children: sub_about: label: sub folder of images contact: label: contact children: sub_contact: label: contact folder
  • Defining custom_fields elememts: custom_fields: component: commercial importer: custom_fields data: jpentrytitle: obj_type: entry name: Japanese title description: ‘Enter the type: text required: 0 tag: jpEntryTitle
  • Defining custom_fields elememts: custom_fields: component: commercial importer: custom_fields data: price: obj_type: page name: price type: text required: 1 tag: PageProductPrice size: obj_type: page name: size description: 'Clothes’ size' type: select options: SS,S,M,L,LL required: 0 default: SS tag: PageProcuctSize
  • Defining custom fields You can create a new custom field custom_fields: by editing the theme file directly. component: commercial importer: custom_fields data: *snip* cf_1: obj_type: page name: productname type: text required: 1 tag: PageProductName You can’t use the existing basename.
  • Defining blog_static_files Static files such as images, css and JavaScript to be used in the theme. ・ It will not be associated as an asset. ・ You have to put files under the blog site- path.
  • Defining blog_static_files Specify directories that contains the static files. elememts: blog_static_files: component: core importer: blog_static_files data: - css - images - js
  • Copy files from the specified directories <MT_DIR> elememts: Theme name/ blog_static_files: component: core blog_static/ importer: blog_static_files css/ data: main.css - css style.css - images images/ - js banner.jpg credit.png js/ user.js Movable Type will automatically jQuery/ jQuery.js copy the files in directories when jQuery.json.js exporting the theme. Sub directories are included also.
  • Copy files when applying the theme Directories and files will be copied in the same structure. Theme name/ Website path/blog path blog_static/ css/ css/ main.css main.css style.css style.css import images/ images/ banner.jpg banner.jpg credit.png credit.png js/ js/ user.js user.js jQuery/ jQuery/ jQuery.js jQuery.js jQuery.json.js jQuery.json.js
  • Defining default_pages default_pages: component: core importer: default_pages data: inquiey: title: inquiey text: contents of inquiry tags: @inquiry folder:jp
  • Defining default_prefs default_prefs: component: core importer: default_prefs data: name: test description: This is my first website. site_url: http://user-domain/ site_path: /home/www/foo file_extension: html
  • l10n_lexicon You can translate specific sentence to the user language by defining it in the theme file . For example: ・Template name ・Error message
  • Localization label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog *snip* l10n_lexicon: ja: Header: ヘッダー Footer: フッター Main Index: メインページ Page: ウェブページ Links: リンク *snip*
  • Example : localizing a template name l10n_lexicon: ja: Main Index: メインページ elements: template_set: data: templates: index: *snip* main_index: label: Main Index outfile: index.html rebuild_me: 1 *snip*
  • Localization files <MT_DIR> Theme name/ blog_static/ File path/ You can also save Static files L10n files separately ・・・ from the theme.yaml templates/ ( ) Template files(.mtml) ・・・ l10n_ja.yaml theme.yaml thumb.png thumb-medium.png thumb-small.png 70/141
  • Separating localization files label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog *snip* l10n_lexicon: l10n_ja.yaml ja: l10n_ja.yaml *snip* Header: ヘッダー Footer: フッター Main Index: メインページ Page: ウェブページ Links: リンク
  • Protected Theme If you flag the theme as “protected”, • You have to change the theme name when exporting it. • You cannot overwrite the existing theme files.
  • Unprotected theme theme.yaml label: 'First Weblog' id: test version: 1.0 class: blog protected: 0 export Alert message will be shown, but you can overwrite.
  • Protected Theme theme.yaml label: My First website' id: test version: 1.0 class: blog protected: 1 Alert message will be shown, export and you have to change the basename.
  • You cannot uninstall the “protected” theme System → design → theme protected Unprotected
  • required_components User has to install the proper plugin if it’s specified as a required component in the theme.
  • required_components theme.yaml label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog required_components: poweredit: 0.15 You can’t apply this theme.
  • optional_components User will be recommended to install the plugin if it’s specified as an optional component in the theme.
  • optional_components theme.yaml label: Classic Blog id: classic_blog author_name: Six Apart, Ltd. author_link: http://www.sixapart.com/ version: 1.0 class: blog optional_components: poweredit: 0.15 You can still apply this Theme. It is convenient when you want to enforce users to use the specific plugins.
  • Switching styles 80/141
  • Example of Styles Pico has multiple styles
  • Static Files for the style <MT_DIR> pico/ Files under “static” directory templates/ will be copied to “mt-static”. static/ style_library/ pico-darkblue/ screen.css thumbnail.gif thumbnail-large.gif pico-darkgrey/ pico-tan/ pico-white/ pico.html 82/141
  • Defining Style Repository <MT_DIR> pico/ templates/ static/ style_library/ pico-darkblue/ screen.css thumbnail.gif thumbnail-large.gif pico-darkgrey/ pico-tan/ pico-white/ Style Repository HTML pico.html 83/141
  • Defining styles <MT_DIR> pico/ templates/ static/ style_library/ pico-darkblue/ design files for each style screen.css thumbnail.gif thumbnail-large.gif pico-darkgrey/ pico-tan/ pico-white/ pico.html 84/141
  • Defining each style (CSS) <MT_DIR> pico/ templates/ static/ style_library/ pico-darkblue/ stylesheet screen.css thumbnail.gif thumbnail-large.gif pico-darkgrey/ pico-tan/ pico-white/ pico.html 85/141
  • Defining each style (files) <MT_DIR> pico/ templates/ static/ style_library/ pico-darkblue/ screen.css thumbnail.gif thumbnail-large.gif pico-darkgrey/ Thumbnail for pico-tan/ the style pico-white/ pico.html 86/141
  • Defining in theme.yaml Base path of the style(base.css) theme.yaml label: Classic Blog 中略… 中略 …中略 elements: template_set: Path of the style repository 中略… 中略 …中略 data: label: Pico base_path: templates require: 1 base_css: style_library/base.css stylecatcher_libraries: pico: url: '{{support}}theme_static/pico/style_library/pico.html' label: Pico Styles description_label: A collection of styles compatible with Pico themes. order: 1 87/141
  • Defining repository URL url: '{{support}}theme_static/pico/style_library/pico.html' This will be extracted as a support directory path (equal to <$mt:SupportDirectorURL$> tag) mt-static/ Style resources (under “style_library” files) support/ will be copied to theme_static/ “mt-static” path. pico/ style_library/ pico.html {{static}} is also available (equal to <$mt:StaticWebPath$>) ) 88/141
  • Defining Pico repository pico.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Pico Themes</title> <link rel="theme" type="text/x-theme" href="pico-white/screen.css" /> <link rel="theme" type="text/x-theme" href="pico-tan/screen.css" /> <link rel="theme" type="text/x-theme" href="pico-darkgrey/screen.css" /> <link rel="theme" type="text/x-theme" href="pico-darkblue/screen.css" /> </head> <body> <p>This is the Pico Theme set.</p> </body> </html> Specify styles as a list of stylesheets by link tag. 89/141
  • Defining screen.css screen.css /* name: Pico (White) designer: Jim Ramsey designer_url: http://www.jimramsey.net/ layouts: layout-w-b */ /* White */ body { background: #fff; color: #333; } *snip* Style information at the head of the css file with a CSS comment style. 90/141
  • Defining layouts screen.css /* A Six Apart theme adapted for Movable Type default templates name: Cityscape Portland designer: Tiffany Chow designer_url: http://tiffany.vox.com/ layouts: layout-wtt, layout-twt, layout-wt, layout-tw */ /* Default ----------------------------------------------- ----------------- */ /* Global */ 91/141
  • Customizing MT CMS screen 92/141
  • alt-tmpl <MT_DIR> You have to place the templates same as the original structure. example. alt-tmpl/include/header.mtml Theme name/ alt-tmpl/ hoge.mtml static/ CMS template files css/ js/ templates/ ( ) Template files(.mtml) l10n_ja.yaml ・・・ theme.yaml thumb.png thumb-medium.png thumb-small.png 93/141
  • Static Files <MT_DIR> Theme name/ alt-tmpl/ hoge.mtml static/ Resource files css/ (css, images, js/ etc ) for CMS. templates/ ( ) Template files(.mtml) l10n_ja.yaml ・・・ theme.yaml thumb.png thumb-medium.png thumb-small.png 94/141
  • Extending the theme framework 95/141
  • You can extend the theme framework to ・export various MT objects ・import new objects You can import and export almost any data in Movable Type 96/141
  • Example You can export pages by creating your own exporter plugin. plugin:PageExporter 97/141
  • Exporter and Importer Movable Type Movable Type exporter theme.yaml importer export import You can implement custom importer and exporter by the plugin.
  • Structure of the sample exporter plugin <MT_DIR> Plugin configuration file plugins/ PageExporter/ config.yaml Plugin Implementation lib/ PageExporter/ tmpl/ theme.pm export_page.tmpl Templates for this exporter plugin 99/141
  • config.yaml Element name (corresponds to checkboxes which l10n_lexicon: appear on the exporting screen) ja: Pages: ウェブページ theme_element_handlers: This will be displayed as a plugin_default_pages: checkbox’s label on exporting label: Pages importer: screen. import: $PageExporter::PageExporter::Theme::import_pages info: $PageExporter::PageExporter::Theme::info_pages exporter: params: plugin_default_pages_export_ids condition: $PageExporter::PageExporter::Theme::condition template: $PageExporter::PageExporter::Theme::template export: $PageExporter::PageExporter::Theme::export Definition of the exporter Definition of the importer 100/141
  • Defining exporter component: component id of the importer : params: parameters for the option screen config.yaml : condition: to determine whether display or not : template: template files for exporting screen id: PageExporter name: PageExporter : export: exporting method version: 0.01 l10n_lexicon: ja: Pages: ウェブページ theme_element_handlers: plugin_default_pages: label: Pages importer: import: $PageExporter::PageExporter::Theme::import_pages info: $PageExporter::PageExporter::Theme::info_pages exporter: params: plugin_default_pages_export_ids condition: $PageExporter::PageExporter::Theme::condition template: $PageExporter::PageExporter::Theme::template export: $PageExporter::PageExporter::Theme::export 101/141
  • condition Blog object theme.pm sub condition { my ( $blog ) = @_; my $page = MT->model('page')->load({ blog_id => $blog->id }, { limit => 1 }); return defined $page ? 1 : 0; } Returns:0 or 1 This condition will check whether there would be exportable web pages or not → If exits, exporting checkbox will be displayed. 102/141
  • Now you can export pages 103/141
  • Use UTF-8 in config.yaml (if you are in two byte character environment. ) config.yaml ・・・snip・・・ ・・・ ・・・ l10n_lexicon: ja: Pages: ウェブページ theme_element_handlers: plugin_default_pages: label: Pages ・・・snip・・・ ・・・ ・・・ Saving in non UTF-8 code, No problem with UTF-8 they will be garbled! 104/141
  • Template theme.pm App, blog instance, and saved data in option sub template { screen (if exists) my $app = shift; my ( $blog, $saved ) = @_; Set parameter if you want to display my @pages = MT->model('page')->load({ the optional list blog_id => $blog->id, }); return unless scalar @pages; my @list; my %checked_ids; if ( $saved ) { %checked_ids = map { $_ => 1 } @{ $saved->{plugin_default_pages_export_ids} }; } for my $page ( @pages ) { push @list, { page_title => $page->title, page_id => $page->id, checked => $saved ? $checked_ids{ $page->id } : 1, }; } my %param = ( pages => ¥@list ); my $plugin = MT->component('PageExporter'); return $plugin->load_tmpl('export_page.tmpl', ¥%param); } Return value : results of lording templates 105/141
  • export_page.tmpl export_page.tmpl <mtapp:listing id="pages" loop="pages" hide_pager="1" show_actions="0" type="pages"> <mt:if __first__> <thead> <tr> <th class="cb"><input type="checkbox" name="id-head" value="all" class="select" /></th> <th class="field-name primary-col"><__trans phrase="Name"></th> Defining the object (pages) to loop with </tr> </thead> <tbody><mtapp:listing> tag. </mt:if> <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>"> <td class="cb"> <input type="checkbox" name="plugin_default_pages_export_ids" class="select" value="<mt:var name="page_id">" <mt:if checked>checked="checked" </mt:if>/> </td> <td class="field-name"><mt:var name="page_title" escape="html"></td> </tr> <mt:if __last__> </tbody> </mt:if> </mtapp:listing> <script type="text/javascript"> jQuery.mtCheckbox(); </script> 106/141
  • Option dialog “export_page.tmpl” is used for this dialog. 107/141
  • export argument:same template sub export { Get checked data my ( $app, $blog, $settings ) = @_; my @pages; if ( defined $settings ) { my @ids = $settings->{plugin_default_pages_export_ids}; @pages = MT->model('page')->load({ id => ¥@ids }); } else { @pages = MT->model('page')->load({ blog_id => $blog->id }); } return unless scalar @pages; my $data = {}; for my $page ( @pages ) { Set export date my $cats = $page->categories; my $folder; in parameters for my $cat (@$cats) { $folder = $cat->basename; } my $hash = { title => $page->title, text => $page->text, text_more => $page->text_more, excerpt => $page->excerpt, keywords => $page->keywords, basename => $page->basename, tags => join(',', $page->get_tags), folder => $folder, }; $data->{ $page->basename } = $hash; } return %$data ? $data : undef; } Returns the reference of hash variable108/141
  • Exported data theme.yaml post: --- basename: test author_link: '' excerpt: '' author_name: nick class: blog folder: theme description: '' keywords: '' elements: tags: versioning plugin_default_pages: component: ~ text: Lorem ipsum dolor sit amet, data: consectetur adipisicing elit, sed do eiusmod post: basename: test tempor incididunt ut labore *snip* excerpt: '' folder: theme text_more: '' keywords: '' title: test tags: versioning text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. text_more: '' title: test importer: plugin_default_pages id: theme_from_blog2 label: Theme from blog2 name: Theme from blog2 version: 1.0 109/141
  • Defining importer Info: Information about the data config.yaml Validator: validate the imported id: PageExporter data name: PageExporter Import: execute the import version: 0.01 theme_element_handlers: plugin_default_pages: label: Pages importer: info: $PageExporter::PageExporter::Theme::info_pages import: $PageExporter::PageExporter::Theme::import_pages exporter: params: plugin_default_pages_export_ids template: $PageExporter::PageExporter::Theme::template export: $PageExporter::PageExporter::Theme::export condition: $PageExporter::PageExporter::Theme::condition 110/141
  • info Argument: element objects, theme objects, blog objects sub info { my ( $element, $theme, $blog ) = @_; my $data = $element->{data}; return sub { MT->translate( 'Pages' ) .'('. MT->translate( '[_1] pages', scalar keys %{$element->{data}} ) .')'; }; } Returns: the information for “Blog/Website themes” screen Displaying the information 111/141
  • import sub import_pages { Arguments: element objects, theme objects, applied objects my ( $element, $theme, $obj_to_apply ) = @_; my $entries = $element->{data}; _add_entries( $theme, $obj_to_apply, $entries, 'page' ) or die "Failed to create theme default Pages"; return 1; } Returns: “1” when it completes importing, sub _add_entries { $obj->save orwhen it’s failed “error” die $obj->errstr; my ( $theme, $blog, $entries, $class ) = @_; my $path_str; my $app = MT->instance; if ( $class eq 'page' && ($path_str = $entry->{folder}) ) { my @text_fields = qw( my @paths = split( '/', $path_str ); title text text_more my ($current, $parent); excerpt keywords PATH: while ( my $path = shift @paths ) { ); my $terms = { for my $basename ( keys %$entries ) { blog_id => $blog->id, my $entry = $entries->{$basename}; basename => $path, next if MT->model($class)->count({ }; basename => $basename, $terms->{parent} = $parent->id if $parent; blog_id => $blog->id, $current = MT->model('folder')->load($terms); }); if ( !$current ) { next if MT->model($class)->count({ unshift @paths, $path; title => $entry->{title}, while ( my $new = shift @paths ) { blog_id => $blog->id, my $f = MT->model('folder')->new(); }); $f->set_values({ my $obj = MT->model($class)->new(); blog_id => $blog->id, my $current_lang = MT->current_language; author_id => $app->user->id, MT->set_language($blog->language); label => $new, $obj->set_values({ basename => $new, map { $_ => $theme- }); >translate_templatized( $entry->{$_} ) } $f->parent( $parent->id ) if $parent; grep { exists $entry->{$_} } $f->save; @text_fields $parent = $f; }); } MT->set_language( $current_lang ); last PATH; $obj->basename( $basename ); } $obj->blog_id( $blog->id ); $parent = $current; $obj->author_id( $app->user->id ); } $obj->status( my $place = MT->model('placement')->new; exists $entry->{status} ? $entry- $place->set_values({ >{status} : MT::Entry::RELEASE() blog_id => $blog->id, ); entry_id => $obj->id, if ( my $tags = $entry->{tags} ) { category_id => $parent->id, my @tags = ref $tags ? @$tags : is_primary => 1, split( /¥s*¥,¥s*/, $tags ); }); $obj->set_tags( @tags ); $place->save; } } } 1; } 112/141
  • Exporter plugins by Yujiro PageExporter SettingExporter AssetExporter EntryExporter 113/141
  • Download URL PageExporter http://github.com/koikikukan/mt-plugin-page-exporter EntryExporter http://github.com/koikikukan/mt-plugin-entry-exporter AssetExporter http://github.com/koikikukan/mt-plugin-asset-exporter SettingExporter http://github.com/koikikukan/mt-plugin-setting-exporter AuthorImporter http://www.koikikukan.com/archives/download/plugin/AuthorImporter/0.01/AuthorImporter_0_01.zip 114/141
  • EntryExporter 115/141
  • EntryExporter post-1: theme.yaml allow_comments: ~ id: theme_from_entry allow_pings: ~ のテーマ' のテーマ label: 'First Weblogのテーマ authored_on: 20080317174343 のテーマ' のテーマ name: 'First Weblogのテーマ category: event version: 1.0 author_link: '' convert_breaks: ~ class: blog created_on: 20100714231311 description: '' elements: excerpt: ~ default_entries: keywords: ~ importer: default_entries component: ~ modified_on: 20100714231311 data: status: 2 post-1: allow_comments: ~ tags: Ajax,,IE,JavaScript,mixi,PHP,RSS,XHTML allow_pings: ~ text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor authored_on: 20080317174343 category: event incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation convert_breaks: ~ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in created_on: 20100714231311 excerpt: ~ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non keywords: ~ proident, sunt in culpa qui officia deserunt mollit anim id est laborum" modified_on: 20100714231311 status: 2 text_more: ~ お知らせ,アフィリエイト スタイルシート,タグ title: renewal お知らせ アフィリエイト,スタイルシート タグ,IE,JavaScript,mixi,PHP,RSS,XHTML tags: Ajax,お知らせ アフィリエイト スタイルシート タグ ×××のホームページをリニューアルしました。 ×××のホームページをリニューアルしました。¥n¥n前回のホームページを作成したのが、 text: "×××のホームページをリニューアルしました。 前回のホームページを作成したのが、2001年3月なので約約 年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにす 前回のホームページを作成したのが、 月なので約約7年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにす 年 月なので約約 ることと、トップページや他のページからすべてのページにたどりつけるようなインターフェースにすることだったので、この目的は達成されたと思います。 ることと、トップページや他のページからすべてのページにたどりつけるようなインターフェースにすることだったので、この目的は達成されたと思います。¥n¥nリニューアルはまだ全体の 割ぐらで、自社サイトも統一し たと思います。 リニューアルはまだ全体の8割ぐらで、自社サイトも統一し リニューアルはまだ全体の たインタフェースへ移行予定です。" たインタフェースへ移行予定です。 text_more: ~ title: ホームページリニューアル post-2: allow_comments: ~ allow_pings: ~ authored_on: 20080725174540 category: information convert_breaks: ~ created_on: 20100714231312 excerpt: ~ keywords: ~ modified_on: 20100714231312 status: 2 お知らせ,セミナー セミナー,CSS,MovableType,SEO,Web2.0,Webデザイン tags: お知らせ セミナー デザイン,XHTML デザイン 本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、ソフトウェア開発におけるライフサイクルのすべてを支 text: "本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、ソフトウェア開発におけるライフサイクルのすべてを支 本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、 また、実際にご体感いただく展示コーナーも併設しております。¥n是非この機会にご参加いただきますようお願い致します。 名称:ソリューションセミナー¥n開催日程: 名称:ソリューションセミナー 開催日程:2007年 援するサービスをご紹介致します。 また、実際にご体感いただく展示コーナーも併設しております。 是非この機会にご参加いただきますようお願い致します。 ¥n¥n名称:ソリューションセミナー 開催日程: 年 (受付開始:13時) 開催場所:コンファレンスセンター¥n主催:×××株式会社 時)¥n開催場所:コンファレンスセンター 主催:×××株式会社" 8月1日(火) 13:30~17:30 (受付開始: 時) 開催場所:コンファレンスセンター 主催:×××株式会社 月 日(火) ~ text_more: ~ title: ソリューションセミナー 116/141
  • AssetExporter 117/141
  • AssetExporter theme.yaml 10: id: theme_from_entry class: image のテーマ' のテーマ label: 'First Weblogのテーマ のテーマ' のテーマ name: 'First Weblogのテーマ created_by: 1 version: 1.0 author_link: '' class: blog created_on: 20100728175459 description: '' elements: description: ~ default_assets: component: ~ file_ext: gif data: assets: 10: file_name: logo_movabletype5.gif class: image created_by: 1 file_path: /mt/assets/logo_movabletype5.gif created_on: 20100728175459 description: ~ label: logo_movabletype5.gif file_ext: gif file_name: logo_movabletype5.gif file_path: /mt/assets/logo_movabletype5.gif mime_type: image/gif label: logo_movabletype5.gif mime_type: image/gif modified_by: ~ modified_by: ~ modified_on: 20100728175459 modified_on: 20100728175459 parent: ~ url: http://user-domein/assets/logo_movabletype5.gif parent: ~ 11: class: image created_by: 1 url: http://user-domein/assets/logo_movablet created_on: 20100728175516 description: ~ ype5.gif file_ext: gif file_name: logo_mt.gif file_path: /mt/assets/logo_mt.gif label: logo_mt.gif mime_type: image/gif modified_by: ~ modified_on: 20100728175516 parent: ~ url: http://user-domein/assets/logo_mt.gif This plugin doesn’t export thumbnails those have created by Movable Type. They will be re-created automatically when importing. 118/141
  • SettingExporter 119/141
  • SettingExporter theme.yaml site_path: /www/user/public_html/3 id: theme_from_asset site_url: http://user-domain/1/ のテーマ' のテーマ label: 'First Weblogのテーマ のテーマ' のテーマ name: 'First Weblogのテーマ archive_url: http://user-domain/1/archives/ version: 1.0 author_link: '' archive_path: /www/user/public_html/3/archives class: blog description: '' elements: file_extension: html plugin_default_settings: importer: plugin_default_settings archive_type_preferred: Individual component: ~ data: use_revision: 1 site_path: /www/user/public_html/3 site_url: http://user-domain/1/ archive_url: http://user-domain/1/archives/ max_revisions_entry: 20 archive_path: /www/user/public_html/3/archives file_extension: html max_revisions_template: 20 archive_type_preferred: Individual use_revision: 1 max_revisions_entry: 20 max_revisions_template: 20 allow_comment_html: 1 allow_commenter_regist: 1 allow_comments_default: 1 allow_pings: 1 allow_pings_default: 1 allow_reg_comments: 1 allow_unreg_comments: 1 autodiscover_links: ~ autolink_urls: 1 basename_limit: 100 captcha_provider: ~ cc_license: 'by http://creativecommons.org/licenses/by/2.1/jp/ http://i.creativecommons.org/l/by/2.1/jp/88x31.png' convert_paras: richtext convert_paras_comments: 1 days_on_index: 10 これはFirst Weblogです。 これは description: 'これは です。' です。 email_new_comments: 1 email_new_pings: 1 follow_auth_links: 1 internal_autodiscovery: 0 junk_folder_expiry: 14 junk_score_threshold: 0 language: ja moderate_pings: 1 moderate_unreg_comments: 2 mt_update_key: ~ name: 'First Weblog' nofollow_urls: 1 ping_google: 0 ping_others: ~ 120/141
  • AuthorImporter(experimental) theme.yaml taro: id: theme_from_author name: taro のテーマ label: authorのテーマ のテーマ name: authorのテーマ nickname: taro version: 1.0 author_link: '' password: abcde class: blog description: '' elements: email: taro@xxx.xxx default_authors: component: ~ url: http://user-domain/ importer: default_authors data: auth_type: MT taro: name: 太郎 nickname: 太郎 preferred_language: ja password: abcde email: taro@xx.xx created_by: 1 url: http://user-domain/ auth_type: MT type: 1 preferred_language: ja created_by: 1 type: 1 hanako: name: 花子 nickname: 花子 password: abcde email: hanako@xx.xx url: http://user-domain/ auth_type: MT preferred_language: ja created_by: 1 type: 1 You can import authors for the system, but you’ll need to set their passwords. 121/141
  • Thank you ! For reading this long presentation. 122/141
  • And I hope that You will enjoy your own theme development ! 123/141