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

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

modxのevolution向けサイト内検索スニペット「evo-content-search」設置方法

modxのフォーラム管理人であるyama様に紹介して頂いた、modx evolution用のサイト内検索スニペット。

https://github.com/yama/evo-content-search

ドキュメントが無いですが、という事でしたが、

・ajaxsearchと比べて、チャンクやテンプレート変数を展開した状態のテキストも建託対象に含めてくれる

・含まれる文字列の割合に応じて上位表示が出来る

ということで、こちらを設置してみることにしました。


1.まずgithubからデータを一式ダウンロード。

2.modxの「assets>snippets」のフォルダ内に、解凍した「ContentSearch」フォルダをアップロード

3.modx管理画面のスニペットを新規作成し、

 スニペット名[ContentSearch]

 スニペットコードの内容に以下を記載

return require MODX_BASE_PATH.'assets/snippets/ContentSearch/bootstrap.php';

4.検索ボックスを表示したいリソースに以下を記載

 [!ContentSearch!] 


完了!!

最初に検索ボックスを設置したページを開く際、インデックス登録が走るので少し時間がかかるが、無事検索&結果表示出来るようになりました!


+α

個人的に色々いじっている部分の関係で修正した部分としては、

1.pagetitleにbrタグを入れているので、リソース内に表示する際のpagetitleを[*pagetitle:strip_tags:hanzen*]と表記していたので、以下のファイルを修正

■core>config>template>result.html

[+pagetitle+]の部分を[+pagetitle:strip_tags:hanzen+]に修正

2.更新日&ページURLの表示は消したいので、同ファイルの5行目〜7行目をコメントアウト

<!--<div>

[ 更新日:[+publishden:date(Y-m-d)+] ] [(site_url)][~[+id+]~]

</div>-->


という感じです。

ただ、これも日本語コメントが記載されているスタイルシートの中身まで検索対象になってしまうのですが、これの回避方法はコンフィグ設定にも書かれていなかったので、大人しくスタイルシート側から日本語を消す事に…。

コメント

このブログの人気の投稿

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

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

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