Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

modxのフロント画面でテンプレートデザインを切り替えるボタン

 modxのtemplateを何種類か作り、フロント画面でボタンを押すことでユーザーがテンプレートデザインを切り替える方法を探していたが結局見つからず、自作したのでメモします。

■template

templateに白ベース、黒ベースのhtmlを作成済み

[2]black
[3]white

■リソース画面にボタンを配置します。

[[changeTPL]] <!-- チャンクの呼び出し -->

<form name="form" action="[~[*id*]~]" method="post">
<input type="submit" class="btn" name="subject" id="subject" value="白" />
<input type="submit" class="btn" name="subject" id="subject" value="黒" />
<input id="thisTPL" name="thisTPL" type="hidden" value="[*template*]" />
</form>

※フォームの内容をPOSTし、結果を同じ画面に返すことで反映させます。
※hiddenで現在使用中のテンプレート番号も一緒に渡します。

■チャンク

// inputのidがsubjectのvalue値を取得
$post = $_POST['subject']; 

//inputのidがthisTPLのvalue値を取得(テンプレート番号)
$thisTPL = $_POST['thisTPL']; 

//表示中のリソース番号を取得
$id = $modx->documentObject['id']; 

//現在のテンプレートを取得し、切り替える

if($thisTPL == '2'){ //現在2 なら 3へ変更
  if($post == "白"){
    $tbl = $modx->getFullTableName("site_content");
    $fields = array(
      "template" => 3
      );
    $result = $modx->db->update($fields, $tbl, 'id = "' . $id . '"');
    if( $result ) {
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        header("Location:#");
        exit;
      }
    }
  }
}

【解説】

1.現在のテンプレートが2、つまり黒だったら、「白」を選択するボタンが押された場合、テンプレート番号3をmodxのDBへ格納する。

2.ページを更新しないと切り替えたテンプレートが読み込まれないので、ページをリロードする。(exitを書かないとループリロードになるので注意)

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用