HTMLインポートツールは、HTMLファイル（複数可能）および画像ファイル等を zip で圧縮したものを、SITE PUBLIS Connect のページに変換し、取り込む機能です。
この取り込み処理のことをHTMLインポートと呼びます。
デザイナーが作成したHTMLファイルをサイト内に追加したいなどの場合に、SITE PUBLIS に取り込んでページを作成することができます。
インポートするHTMLファイルを準備する
ディレクトリ
ディレクトリページとして取り込みます。
HTMLファイル
通常ページとして取り込みます。
- head タグの内容
title タグのように「ページ情報表示・設定」の項目に合致するものはこちらに取り込みます。
上記以外は「<head>要素」として取り込み、ページの「<head>設定」に設定します。
「<head>要素」に取り込む内容と合致するものが既存の場合は、既存の「<head>要素」を利用します。
- body タグの内容
通常ブロック、繰り返しブロックとして取り込みます。
繰り返しブロックの条件
繰り返しブロックとなる条件としては以下を満たしている必要があります。
この条件を満たさないタグ等が「通常ブロック」として取り込まれます。
- 対象となるエレメント（要素）の子のエレメント内に文字列等が含まれていないこと
- 繰り返しブロックのブロック設定で利用できるタグであること
「繰り返し」参照
Javascript、CSS、画像ファイル等
作成されたページの直下に配置されます。
1サイドメニュー ＞「ツール」＞「コンテンツ管理」＞「HTMLインポート」をクリックします
ファイル選択
「ファイル選択」ボタンをクリックし、あらかじめ準備しておいたzip形式のファイルを指定します。
取り込み場所の指定
HTMLファイルをどのページの下位ページとして取り込むかを指定できます。
初期状態では、「サイト」下に取り込まれます。
ルートパスの指定
インポートする HTML内のサイト内リンクを「相対パス」で記述している場合、取り込む位置により、リンク切れとなる場合があります。
そのため、「相対パス」のリンクがある場合は、相対パスの「ルート」となるページを指定する必要があります。
上図は HTMLインポートする内容を「xxx.zip」「aaa.zip」と分割して登録する状況です。
相対パスのあるページ「bbb.html」を含む「aaa.zip」を、取り込み場所「zzz.html」としてインポートする際に
- ルートパスの指定：なし の場合
リンクパスが「href="/xxx/zzz/"」のままとなるため、リンク切れの状態となります。
- ルートパスの指定：xxx.html の場合
ルートパス指定ページまでのパスが参照され、リンクパスが「href="/home/xxx/yyy.html"」となります。
リンク先のページが存在しない場合
ルートパスの指定でページを指定しても、リンク先のページがサイト内に存在しない場合は、「なし」と同様にそのままの内容でインポートされます。
ページが存在する場合
zipファイル内のページが、取り込み先に既存の場合に、スキップするか、上書き保存するか設定できます。
2「保存」ボタンをクリックします
HTMLインポート処理が行われます。
特殊なインポート
取り込むHTMLファイルのソースコードに専用コードを記述することで、取り込む内容をコントロールすることができます。
デザインマスタへの取り込み
headタグ内の meta タグの name、content 属性に以下を設定することで、上下左右のエリア内容を「デザインマスタ」として取り込むことができます。
- name属性：pbimport-page-type
- content属性：design-master
上記を設定後、デザインマスタに取り込みたい箇所を、独自の属性「data-pbimport-block-area」で囲むことで、該当箇所をデザインマスタとして取り込むことができます。
各エリアを指定するには上記属性に「header, left, right, footer」を指定します。
例：ヘッダーエリアに指定する場合
<div data-pbimport-block-area="header"> ヘッダーエリア内容 </div>
ブロックの分割
独自の属性「data-pbimport-wrap="normal"」を追加したタグで囲むことで、「通常ブロック」として取り込まれる内容を別々の「通常ブロック」として分割して取り込むことができます。
繰り返しブロックとなるタグの通常ブロック化
独自の属性「data-pbimport-convert=""normal"」を追加することで、本来であれば「繰り返しブロック」として取り込まれるタグを「通常ブロック」として取り込みます。
例：繰り返しブロック > 繰り返しブロック > 通常ブロック となる構造
<div class="test1"> → 繰り返しブロック として取り込まれる
<div class="test2"> → 繰り返しブロック として取り込まれる
<div> → 通常ブロック として取り込まれる
<p>本文テキスト</p>
</div>
</div>
</div>
「class="test1"」が設定されている「div」タグに、専用の独自属性を設定することで、その配下の内容をまとめて一つの「通常ブロック」として取り込むことができます。
<div data-pbimport-convert="normal" class="test1">
取り込み範囲の設定
独自の属性「data-pbimport-target」を追加することで、囲まれた範囲を、取り込む範囲に指定することができます。
なお、この属性を設定した HTML ファイルは、この属性のあるタグ以外は取り込まれませんので、取り込む必要がある内容については、都度この属性を設定する必要があります。
以下の場合は、「コンテンツ内容_その２」の内容のみ、取り込まれません。
<div data-pbimport-target>
<div>
<p>コンテンツ内容_その１</p>
</div>
</div>
<div>
<div>
<p>コンテンツ内容_その２</p>
</div>
</div>
<div data-pbimport-target>
<div>
<p>コンテンツ内容_その３</p>
</div>
</div>
