概要
Movable Typeのテンプレートを管理画面に付いているエディタを使わずに、自分のパソコンにインストールしてあるAtom等のテキストエディタで作成・編集する
環境
Vagrantで作成した仮想マシンにMovable Typeをインストール済→やり方
手順
html,css,jsのコードを一式用意する
Atom等のテキストエディタで予め作っておく
Movable Type側で用意されたテーマを外す
- ダッシュボート＞ウェブサイト＞デザイン＞テンプレートに移動
- チェックボックスをオンにして削除ボタンをクリックする
おまじないをかける
（何のための作業か、いまわからなくても後でわかるはず）
作業に必要なフォルダを作成する
自分のパソコンの「MT」フォルダ配下の「www」配下の「html」フォルダに「template_link」と言うフォルダを作成する→「MT」フォルダとは
予め用意していたhtml,css,jsのコードを「template_link」フォルダの中にコピーする
画像ファイルなどを「www」配下の「html」フォルダの中にコピーする
テンプレートの作成手順
以下、index.htmlを例にした場合
ダッシュボート>ウェブサイト>デザイン>テンプレート
「インデックステンプレートの作成」をクリック
以下の内容を入力する
- テンプレート名：index.html
- 本文：空のまま
- 出力ファイル名：index.html
- テンプレートの種類：カスタムインデックステンプレート
- ファイルへのリンク：/var/www/html/mt-static/template_link/index.html
- 公開：スタティック（規定）
「保存」をクリックする
その他のファイルも同様の作業を繰り返す
いったん出来栄えを確認する
- 「サイトを再構築する」ボタンをクリックする
- 自分のパソコン上の仮想マシンにアクセスする
テンプレートにモジュールテンプレートを差し込む
（いわゆるコードのリファクタリング）
テンプレートモジュール用のファイルを用意する
以下、_header.htmlを例にした場合
- 自分のパソコンの「MT」フォルダ配下の「www」配下の「html」配下の「template_link」の中に「modure」フォルダを作成する
- 「modure」フォルダの中に「_header.html」ファイル（先頭のアンダースコアは単なる目印です）を作成する
- テキストエディタで「_header.html」ファイルを開いて、同じくテキストエディタで開いた「index.html」内の
<head>から</head>に囲まれている部分をコピーして貼り付けて保存する - ダッシュボート＞ウェブサイト＞デザイン＞テンプレートに移動し、「テンプレートモジュールの作成」をクリック
以下を入力する
- テンプレート名：_header.html
- 本文：空のまま
- ファイルへのリンク：/var/www/html/mt-static/template_link/modure/_header.html
最後に、テキストエディタで開いた「index.html」内の<head>から</head>に囲まれている部分を以下のコードに置き換える
<$mt:Include module="_header.html"$>
以上が、テンプレートにテンプレートモジュールを差し込む流れ
その他のモジュール(_footer.html等)も必要に応じて同様の作業を繰り返す
出来栄えを確認する
- 「サイトを再構築する」ボタンをクリックする
- 自分のパソコン上の仮想マシンにアクセスする