MODxのドキュメントツリー構成

Ditto のスニペット・コール
次の記述でカレントドキュメントのと同じフォルダ内のドキュメントを抽出します。この1行のコードをカレントドキュメントに記述しておけば、作品ページ・ドキュメントのデータを増やしても自動的に更新されます。

[!Ditto? &id=`thumbnail` &parents=`[*parent*]` &depth=`1` &orderBy=`pagetitle ASC` &tpl=`doguByArtistWorkList`!]

パラメータの説明

parents=`[*parent*]　･･････カレントドキュメントの親ドキュメント id を取得
depth=`1`　･･････取得する階層の深さ。デフォルトが `1` なので記述しなくてもOKです
orderBy=`pagetitle ASC`　･･････pagetitleを昇順にソート
tpl=`doguByArtistWorkList`　･･････テンプレートを指定（チャンク doguByArtistWorkList に記述）

テンプレート・チャンク "doguByArtistWorkList"

<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="[~[+id+]~]">[+workImage+]</a></h6>
</div><!-- ===== thumbnail ===== -->

プレイスホルダの説明

[~[+id+]~]　･･････Dittoで抽出したドキュメントのURI
[+workImage+]　･･････Dittoで抽出したドキュメントのサムネイル用カスタムテンプレート変数

出力されるhtmlコード

<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/01.html"><img src="assets/images/dogu/doi-IMGP1090.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/02.html"><img src="assets/images/dogu/doi-IMGP1091.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/03.html"><img src="assets/images/dogu/doi-IMGP1092.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/04.html"><img src="assets/images/dogu/doi-IMGP1093.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/05.html"><img src="assets/images/dogu/doi-IMGP1094.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->

以上です。この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。
ウェブ屋のCMS→modxヒキダス流（備忘録）／DittoのorderByパラメータによる、複数フィールドを使った並べ替え（ソート）･･････MODxを使っているウェブ制作会社のブログです。役に立つ記事が満載です。

MODxのドキュメントツリー構成

Ditto のスニペット・コール
次の記述で「作家・工房紹介」ドキュメントの子ドキュメントを抽出します。この1行のコードを「作家・工房紹介」ドキュメントに記述しておけば、子ドキュメント（各作家・工房の個別ドキュメント）のデータが増えても自動的に更新されます。

[!Ditto? &parents=`7` &randomize=`1` &tpl=`intro-box-1` &tplAlt=`intro-box-2`!]

パラメータの説明

parents=`7`　･･････抽出する子ドキュメントの親ドキュメントid
randomize=`1`　･･････抽出する順序をランダムにする（作家さんの表示順序をランダムにする）
tpl=`intro-box-1`　･･････テンプレートを指定（チャンク intro-box-1 に記述）
tplAlt=`intro-box-2`　･･････交互に適用するテンプレートを指定（チャンク intro-box-2 に記述）
このケースでは、リストを下図のように2カラムで表示したかったので、tplAltパラメータが非常に役に立ちました。

テンプレート・チャンク "intro-box-1"

<div class="entry">
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="[~[+id+]~]">[+thumbnail+]</a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
        <p>[+introtext+]</p>
    </div>
</div><!-- ===== intro-box ===== -->

テンプレート・チャンク "intro-box-2"

<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="[~[+id+]~]">[+thumbnail+]</a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
        <p>[+introtext+]</p>
    </div>
</div><!-- ===== intro-box ===== -->
</div><!-- ===== entry ===== -->

プレイスホルダの説明

[~[+id+]~]　･･････Dittoで抽出したドキュメント（子ドキュメント）のURI
[+thumbnail+]　･･････Dittoで抽出したドキュメント（子ドキュメント）のサムネイル用カスタムテンプレート変数
[+pagetitle+]　･･････Dittoで抽出したドキュメント（子ドキュメント）のリソース名（タイトル）
[+introtext+]　･･････Dittoで抽出したドキュメント（子ドキュメント）の要約（序説）

出力されるhtmlコード

<div class="entry">
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="web/introduction/intro-shuji.html"><img src="assets/images/artists/shuji-IMGP0649.jpg" alt="山田脩二サムネイル" /></a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="web/introduction/intro-shuji.html">山田脩二</a></h2>
        <p>カメラマンから瓦師（カワラマン）になった人です。達磨窯を地元に復活させ、土を焼く。瓦の原土で焼かれた皿は、いぶし銀でカッコイイ。</p>
    </div>
</div><!-- ===== intro-box ===== -->
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="web/introduction/intro-mayu.html"><img src="assets/images/artists/mayu-IMGP7624ic.jpg" alt="齋藤まゆサムネイル" /></a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="web/introduction/intro-mayu.html">齋藤まゆ</a></h2>
        <p>やさしく、和やかな絵付け。様々な柄の組み合わせが彼女のスタイルをつくっています。食器や小物からインテリア、オブジェを制作しています。 </p>
    </div>
</div><!-- ===== intro-box ===== -->
</div><!-- ===== entry ===== -->

以上です。この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。
DAICHIFIVE「Dittoのプレースホルダ一覧」･･････MODxだけでなく、ウェブ全般のTipsが非常に役に立ちます。。

MODxのドキュメントツリー構成

グローバル・ナビゲーション部分のチャンク・コード

<div id="global-navi"><!-- +++++ グローバル・ナビ +++++ -->    
[[Wayfinder?startId=`8` &level=`1` &excludeDocs=`236,254` &hereClass=`current`]]
</div><!-- +++++ global-navi +++++ -->

パラメータの説明：

startId=`8`　･･････リストアップする親ドキュメントのid
level=`1`　･･････リストアップする階層の深さ
hereClass=`current`　･･････カレントドキュメントに挿入するクラス。デフォルトでは"active"挿入されますが、僕の習慣で"current"と指定しています。
excludeDocs=`236,254`　･･････リストアップから除外するドキュメントのid（404ページと閉鎖中ページ）

出力されるhtmlコード

<div id="global-navi"><!-- +++++ グローバル・ナビ +++++ -->    
<ul><li class="current"><a href="http://www.hyodo-arch.com/dogu/" title="HOME" >HOME</a></li>
<li><a href="/dogu/web/kawaraban.html" title="かわら版" >かわら版</a></li>
<li><a href="/dogu/web/dogutachi.html" title="くらしの道具たち" >くらしの道具たち</a></li>
<li><a href="/dogu/web/introduction.html" title="作家・工房紹介" >作家・工房紹介</a></li>
<li class="last"><a href="/dogu/web/information.html" title="店舗案内" >店舗案内</a></li>
</ul>
</div><!-- +++++ global-navi +++++ -->

テンプレートにプレイスホルダを使ってチャンクを記述し、パラメータで指定すれば、様々な条件でリストアップすることができます。ここでは、デフォルトで十分でしたので、テンプレートは使用していません。

グローバル・ナビゲーション部分のCSS

/* +++++++++++++++ ヘッダー（グローバルナビ部分） +++++++++++++++ */
#global-navi	{clear: both;}
#global-navi ul {
	margin: 0px 0px 0px 5px;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	}
#global-navi li {
	display: inline;
	padding: 0px 10px 0px 0px;
	font: bold 11pt Arial,sans-serif;
	}
#global-navi a	{
	color: #aaaaaa;
	text-decoration: none;
	}
#global-navi li.current>a {color: #555555;}
#global-navi a:hover	{color: #ff8c00;}

CSSのポイントは、li タグをインラインとし、a タグの色をカレントとカレント以外を分けて指定することだけです。背景などを使ってタブのイメージも入れていないので、ただ横方向にグローバル・ナビゲーションのテキストがリストアップされるだけのシンプルなものですが、カレントドキュメントを濃いグレーで、カレント以外を薄いグレーで表示させることが、このスニペット・コール1行で済ませられ、且つ複数のドキュメントで共用できるため、非常にメンテナンス性が良いです。ちなみにこのブログ「無聊写記」のグローバル・ナビゲーション（ブログ、フォト、ブックス、フリマ、プロフィール）は、各々のタブ（５種類）を作っているので、効率が悪いです(笑)

この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。

1. xreaのコントロールパネルにアクセスして、管理メニュー＞ホスト情報登録＞SSH登録ボタンを押す。
2. WinSCPのログイン設定のプロトコルをSFTPを選択、SCP代替システムにチェックを入れる。

ここまでは半年ほど前にFFFTPからWinSCPに乗り換えたときをすぐにできた。次の記述が今回できるようになったこと。大学や研究所のサーバを利用する人にとっては当たり前のことのようである。

まずPuTTYjpの入手とインストール
公開鍵と秘密鍵による認証は、PuTTYというターミナルエミュレータが別途必要となる。日本語を入力・表示するには、hdkさん作成のPuTTYjpという非公式パッチをダウンロードし、WinSPCのプログラム本体が入っているフォルダにあるPuTTYフォルダに展開する。さらに環境設定＞アプリケーション＞PuTTYのパスに "puttyjp.exe" を参照させる。

ここから先は「XREAでも暗号化SFTPサーバーを利用しよう」を参照した。詳しい手順が掲載されているので、読まれることをおススメする。以下に手順の概要を記す。

xrea に公開鍵暗号方式で接続する

1. PuTTYgenを立ち上げ、公開鍵・秘密鍵の生成し、パスフレーズを登録し、保存する。
2. WinSCPからxreaのユーザ・ディレクトリに ".ssh" ディレクトリを作成する。
3. ".ssh" ディレクトリに "authorized_keys" という名称のファイルを作成し、PuTTYgenで生成した公開鍵(Public key for･･･欄)をコピペする。
4. Pageantを立ち上げ、"Add Key"ボタンを押し、ppkファイル（先ほどPuTTYgenで生成した公開鍵・秘密鍵ファイル。パスフレーズを求められる）を登録する。ショートカットを作成しておくと便利。
5. WinSCPログインのセッションのパスワード欄を空欄にし(xrea発行のパスワードは使用しない）、秘密鍵欄にはppkファイルを参照させる。
6. WinSCPでログインする。

以上で、公開鍵と秘密鍵による認証によるSFTP通信ができるようになりました。