Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theme Framework in Depth - MT DDC Tokyo

20,576 views

Published on

Published in: Technology
  • Be the first to comment

Theme Framework in Depth - MT DDC Tokyo

  1. 1. MT DDC Tokyo 2010.07.31 Theme Framework in Depth Author: Yujiro Araki Translation: Nick
  2. 2. 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
  3. 3. Agenda ・ About Theme Framework ・ Customizing Theme ・ Switching Styles ・ Customizing CMS ・ Extending Theme Framework 3/141
  4. 4. About Theme Framework 4/141
  5. 5. With Theme, you can templates/categories/custom fields Export as a theme Movable Type theme export 5/141
  6. 6. Then, you can Import the theme to another MT Movable Type theme import 6/141
  7. 7. 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
  8. 8. 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
  9. 9. Tips 2 Themes won’t overwrite existing data which have same basenames. E.g. When importing categories which have same names 9/141
  10. 10. Tips 3 You can use Theme with MTOS (except for custom fields’ data, of course) 10/141
  11. 11. Note All the existing templates will be backed up. 11/141
  12. 12. Attention A huge list of templates ! 12/141
  13. 13. Customizing Theme 13/141
  14. 14. How can you customize ? It’s easier to edit exported theme files. You can also create a new theme from a scratch. 14/141
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. ’ YAML’s format Hash definition foo: aaa key value space 24/141
  25. 25. Nested Hash foo: bar: aaa value key 25/141
  26. 26. Array format - aaa - bbb value - ccc space 26/141
  27. 27. Combination of Hash and Array foo: - aaa - bbb - ccc 27/141
  28. 28. Attention ! You have to INDENT correctly ! 28/141
  29. 29. Indent in theme.yaml elements: plugin_default_pages: component: ~ data: post_2: elements: plugin_default_pages: component: ~ data: Bad intend post_2: 29/141
  30. 30. Only UTF-8 is permitted An error occurs if you use any other character set than UTF-8. 30/141
  31. 31. Note The following slides are quoted from the book: “Movable Type5 professional guide”, Written by Yujiro Araki. 31/141
  32. 32. What to define in theme.yaml ・Basic information ・Elements 32/141
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Definition of the Elements The elements include ・template sets ・categories ・folders ・custom fields ・outside files etc. 38/141
  39. 39. 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
  40. 40. 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
  41. 41. Defining each element elements: element name: component: core importer: template_set name: template set data: ・・・snip・・・
  42. 42. 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
  43. 43. 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・・・
  44. 44. 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
  45. 45. Defining templates templates: index: *snip* archive: *snip* individual: *snip* page: *snip* module: *snip* system: *snip* widget: *snip* widgetset: *snip*
  46. 46. 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*
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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.
  61. 61. 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.
  62. 62. 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
  63. 63. 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.
  64. 64. 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
  65. 65. Defining default_pages default_pages: component: core importer: default_pages data: inquiey: title: inquiey text: contents of inquiry tags: @inquiry folder:jp
  66. 66. 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
  67. 67. l10n_lexicon You can translate specific sentence to the user language by defining it in the theme file . For example: ・Template name ・Error message
  68. 68. 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*
  69. 69. 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*
  70. 70. 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
  71. 71. 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: リンク
  72. 72. 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.
  73. 73. 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.
  74. 74. 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.
  75. 75. You cannot uninstall the “protected” theme System → design → theme protected Unprotected
  76. 76. required_components User has to install the proper plugin if it’s specified as a required component in the theme.
  77. 77. 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.
  78. 78. optional_components User will be recommended to install the plugin if it’s specified as an optional component in the theme.
  79. 79. 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.
  80. 80. Switching styles 80/141
  81. 81. Example of Styles Pico has multiple styles
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. 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 / titlePico 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 pThis is the Pico Theme set./p /body /html Specify styles as a list of stylesheets by link tag. 89/141
  90. 90. 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
  91. 91. 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
  92. 92. Customizing MT CMS screen 92/141
  93. 93. 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
  94. 94. 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
  95. 95. Extending the theme framework 95/141
  96. 96. 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
  97. 97. Example You can export pages by creating your own exporter plugin. plugin:PageExporter 97/141
  98. 98. Exporter and Importer Movable Type Movable Type exporter theme.yaml importer export import You can implement custom importer and exporter by the plugin.
  99. 99. 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
  100. 100. 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
  101. 101. 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
  102. 102. 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
  103. 103. Now you can export pages 103/141
  104. 104. 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
  105. 105. 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
  106. 106. 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=cbinput 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 tbodymtapp:listing tag. /mt:if tr class=mt:if name=__odd__oddmt:elseeven/mt:if td class=cb input type=checkbox name=plugin_default_pages_export_ids class=select value=mt:var name=page_id mt:if checkedchecked=checked /mt:if/ /td td class=field-namemt: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
  107. 107. Option dialog “export_page.tmpl” is used for this dialog. 107/141
  108. 108. 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
  109. 109. 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
  110. 110. 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
  111. 111. 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
  112. 112. 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
  113. 113. Exporter plugins by Yujiro PageExporter SettingExporter AssetExporter EntryExporter 113/141
  114. 114. 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
  115. 115. EntryExporter 115/141
  116. 116. 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
  117. 117. AssetExporter 117/141
  118. 118. 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
  119. 119. SettingExporter 119/141
  120. 120. 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
  121. 121. 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
  122. 122. Thank you ! For reading this long presentation. 122/141
  123. 123. And I hope that You will enjoy your own theme development ! 123/141

×