Movable Type入門 » 3.17バージョン対応

エントリーのプレビュー

エントリー画面の確認って不十分でサイトに公開した時のイメージが沸きませんね。

「確認」ボタンを押した時の画面
スタイルシートやブロッククォーツの反映が中途半端

そこで保存後ですが「下書き」の状態でサイトにアップした画面をcgiで表示する方法を説明します。




「下書き」状態で「preview」ボタンを押す



別ウインドウでサイト公開時と同じ状態が表示されるので、
公開時のイメージがバッチリ分かります。

私が実装までにかかった時間 20分
ダウンロードするプラグイン  MT-Preview: WYSIWYG Preview Mode for Movable Type

アップロードするファイル

 cgi/mt/mt-preview.cgi … 属性を700に
 cgi/mt/plugin/preview.pl … そのまんま
 cgi/mt/extlib/Laurentm/Preview.pm …文字化けと追記反映の編集が必要

変更するファイル
 cgi/mt/tmpl/cms/edit_entry.tmpl … ボタンを表示させる編集

Preview.pmの編集


※ 33行目付近から始まるsub initで赤字を追加
sub init {
my $app = shift;
$app->SUPER::init(@_) or return;
$app->add_methods('wysiwyg_preview' => \&preview);
$app->{default_mode} = 'wysiwyg_preview';
$app->{template_dir} = 'cms';
$app->{requires_login} = 1;
$app->{user_class} = 'MT::Author';
$app->{charset} = $app->{cfg}->PublishCharset;
$app;
}

※ 77行目付近から始まるmy %cond で赤字に変更
my %cond = (
EntryIfAllowComments => 0,
EntryIfCommentsOpen => 0,
EntryIfAllowPings => 0,
EntryIfExtended => 1,
);

edit_entry.tmplを編集

※ 文頭のjavascript内に追加
function doPreview () {
window.open('<TMPL_VAR NAME=SCRIPT_PATH>mt-preview.cgi?blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>', '', 'width=800,height=600,resizable=yes,scrollbars=yes');
}


※ 125行目・332行目付近から始まるbutton-barの2箇所に赤字を追加
<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doPreview()" type="button" value="preview">
</TMPL_UNLESS>

以上です。
頑張ってください!!