MODx CMS

CMS シンプル表示で高機能

  • 面白い機能があり、W3C対応のサイト作りが可能
  • 非常に柔軟なWEB Contents Management System (CMS)
    • メインコンテンツエリアが一つ
    • その他のエリアはテンプレート変数で構築(津上は側面、でもどこでも置ける)
    • Chunks と Snippets というものがある。
  • Chunksとはページで再利用できるHTMLの断片
    • Chunkは静的な文章を保持するのためのHTMLコードで、例えばメールを"MyMail"のように定義することで何回も同じ事を書かなくて済む。
  • Shippetsとは、メニュや検索バーのような関数アイテム
    • Snippetは動的な構造を実現するためのPHPコードで、例えば現在いるページからのナビゲーションを"SiteNavigation"のように登録しておき、テンプレートから呼び出すことでそのテンプレートを利用するドキュメントからのナビゲーションが動的に生成される。
  • Chunk/Snippet/Templateでは、共通のAPI(及び変数名)を利用することで参照されているドキュメントの詳細情報を取得することができる。
  • "Template Variable"というTemplateを呼び出す機能
    • 全てのドキュメントに対して任意のデータ形式&任意のプレゼンテーション(見せ方)を用意することができる。
    • 商品名や画像などがデータベースに保存されるフォーマットを自分で定義することができて、かつそれが表示される仕組みも自由に定義することができるとのこと
  • coffeemilkさん御紹介のtemplateの仕組み
  • 機能などを解説

#ref(): File not found: "MODx_editor-mainpage.gif" at page "MODx"

  • The template contains the Content Area, identified in pink, and inserted into the template with the syntax [*content*]. This content is taken from the Document as edited in the Manager.
  • The template also contains MODx tags that insert Snippets. In this example there are two menu Snippets, identified in blue and inserted with the following syntax SnippetName
  • The template contains Template Variables that allow the Editor to insert text, images and other content items outside of the main Content Area. These are identified in green and are inserted in the template with the following syntax [*TemplateVariableName*]

 Templateの作り方

  • 管理画面より
  • MODxのタグをtemplateに追加
    • サイト名とページタイトルをタイトル表示
      <title>[(site_name)] - [*pagetitle*]</title> 
    • ページのメインパートにdocumentcontent を表示
      <div id="content">
        <h1>[*longtitle*]</h1>
        [*content*]
      </div> 
    • コンテンツの前にlongtitleを表示
    • フッターを表示
      <div id="footer">Copyright &copy; <a href="mailto:[(emailsender)]">[(site_name)]
      </a> 2005</div>

      #ref(): File not found: "MODX_template_tags.jpg" at page "MODx"

  • templateの中にsnippetsを用いる
  • Webサイトに関数のようなロジックを加えるsnippets
    [[snippetName]] 
    • MODxAPIによってsnippetsの中に、snippetsを置ける
      $modx->runSnippet('snippetName'); 
  • sidebarにナビゲーションメニュを付ける
    <a href="http://www.mysite.com/index.php?id=1">Home</a>
    <a href="http://www.mysite.com/index.php?id=2">News</a>
    <a href="http://www.mysite.com/index.php?id=3">About Us</a>
  • snoppetsは、ドキュメントたちのリストを得て、指定の場所に配置し表示させる。
    <div id="sidebar">
    <!-- menu and other blocks goes here -->
    [[MenuSnippet?id=`0`&activelink=`active`]]

    /div>

  • 下記のように表示されるはず

#ref(): File not found: "MODX_template_menu.jpg" at page "MODx"

  • DropMenu Snippetを使う
    • Example 1 Creates menu with wrapping DIV with id=myMenu, starting at the site root, two levels deep, with descriptions next to the links, and nested UL elements with class=nestedLinks; output of menu can be placed in layout using placeholder named myMenu ( e.g. [+myMenu+] )
[[DropMenu? &menuName=`myMenu` &startDoc=`0` &levelLimit=`2` &topdiv=`true`
 &showDescription=`true` &subnavClass=`nestedLinks`]]
  • Example 2 Creates topMenu from site root, including only 1 level, with class=topMenubar applied to the top level UL and class=activeLink applied to current page LI
[[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`1` 
&topnavClass=`topMenubar` &hereClass=`activeLink`]]
  • Example 3 Creates dropmenu 3 levels deep, with DIV wrappers around all nested lists styled with class=hoverZone and currentPage LI styled with class=currentPage
[[DropMenu? &levelLimit=3 &subdiv=true &subdivClass=hoverZone 
&subnavClass=menuZone &hereClass=currentPage]]
  • Example 4 Creates dropmenu of infinite levels, ordered by menutitle in descending order
[[DropMenu?orderBy=menutitle &orderDesc=true]]

QuickEdit module

  • 何に使う?
    • QuickEdit は、ページ上でクリックするだけで編集できるシンプルなツール。emailを出すような間隔で編集。
  • どのように使うか。
  • 方法1.Tag Method
    • 最も簡単な方法でお勧めします。
      シンプル
      [*tv-name*]
      スタイルtags with 
      [*#tv-name*]
       style tags Example: 
      [*#content*]
      これだけ
    • 方法2.HTML Method
      リンクを書いてアクセス。隠して許可付きも可能。どちらでもお好みに
       <quickedit>  The tags must be in the format <quickedit:content />  Replace content with the name or ID of the template variable you want to edit.
    • 方法3.Custom Links Method
      パワーユーザー向きの方法。推薦しない。 but if you have very specific needs it may be the best choice for your situation.
Javascript (recommended): 
window.open('index.php?a=112&id=[QuickEdit module id]&doc=[*id*]
&var=content', 'QuickEditor', 'width=525, height=300, toolbar=0, menubar=0, 
status=0, alwaysRaised=1, dependent=1');
Link Tag: 
< href="index.php?a=112&id=[QuickEdit module id]&doc=[*id*]&var=content" 
target="_blank">Edit</a>

QandA

  • 特定ユーザーに対して、linkを隠せますか
    • 勿論!!。活用して
  • Editのリンクを見つける方法は?
    • TagMethodで見つけられます。それでもダメならadminユーザーで入ってパーミッションを変更すればよい。QuickEdit permissions can be tricky because there are a lot of things to check. First of all make sure that the user has Edit Documents, Save Documents, and Run module rights. Then check that he has rights to the page. Then check the users rights to the QuickEdit module and to any Template Variables on the page.

W3Cの表示用のタブ

  • W3CのXHTMLもパス
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  • W3CのCSSもパス
<p>
 <a href="http://jigsaw.w3.org/css-validator/">
  <img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" />
 </a>
</p>

icon

  • プリント用

    #ref(): File not found: "icon-print.jpg" at page "MODx"

参考になるサイト


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-08-17 (金) 13:22:00 (2286d)