BootstrapまたはWebサイト・デザイン・テンプレートからのサイト・テンプレートの作成
Oracle Content Managementのオープン・アーキテクチャとは、FoundationまたはBootstrapなどの他のコーディング・フレームワークで行われた作業内容を使用できることを意味します。いくつかの変更を行うと、Bootstrapテンプレートをテーマに変更し、Oracle Content Managementテンプレートの一部にすることができます。
基本プロセス
各ステップの概要は、後続のセクションで詳細に説明します:
前提条件
-
フォルダおよびファイルをローカル・コンピュータに同期化するためのOracle Content Managementデスクトップ・アプリケーションを設定して起動します。
-
Bootstrapテンプレート・テーマのフォルダ、ファイルおよびコンテンツをローカル・コンピュータにダウンロードし、使用できるようにします。
サイトの作成
Oracle Content Managementスタータ・テンプレートからサイトを作成します:
-
サイド・ナビゲーションで、「サイト」をクリックします。
既存のサイトのリストが表示されます。
-
「作成」をクリックします。
-
「サイトの作成」ダイアログで、サイトの基準として使用するJETスタータ・テンプレートまたはスタータ・テンプレートを選択します。
-
ダイアログで、サイトの名前を入力します。この名前はサイトURLに使用されます。文字、数字、アンダースコア(_)およびハイフン(-)を使用できます。スペースを入力した場合、ハイフンに自動的に置換されます。
テンプレート、テーマ、コンポーネント、サイトまたはサイト・ページについて、authsite、content、pages、scstemplate_*、_comps、_components、_compsdelivery、_idcservice、_sitescloud、_sitesclouddelivery、_themes、_themesdeliveryといった名前を使用しないでください。documentsおよびsitesは、サイト・ページには使用できますが、テンプレート、テーマ、コンポーネントまたはサイトには使用しないでください。
注:
Oracle Content ManagementのサイトURLのパスでは、大文字と小文字が区別されます。問合せまたはフラグメント文字列の大文字と小文字の区別は、開発者によってカスタム・コードで管理されます。
https:[//host[:port]][/]path[?query][#fragment] \____________________/\________________________/ Location Data
-
オプションで、サイトの説明を入力します。
-
準備ができたら、「作成」をクリックします。
進行状況バーに、新規サイト名と作成ステータスが表示されます。サイトが作成されると、サイトのリストに名前が表示されます。その初期ステータスはオフラインです。
リストから新規に作成したサイトをすばやく見つけるには、「最終更新」でリストをソートします。直前に作成したサイトがリストの上位に表示されます。
テーマ・フォルダの同期化
スタータ・テンプレートからサイトを作成する場合、スタータ・テンプレートのテーマのコピーが作成され、サイト名の後ろにテーマ名を加えた名前が付けられます。たとえば、My_New_SiteのテーマはMy_New_SiteThemeです。
デスクトップ・アプリケーションを使用して、サイトのテーマ・フォルダおよびファイルをローカル・コンピュータに同期化します。『Oracle Content Managementでのドキュメントのコラボレート』の同期化の開始に関する項を参照してください。
これで、テンプレート・テーマのフォルダ階層およびファイルがローカル・コンピュータ上に表示されるようになります。次に例を示します:
theme_name
assets
css
main.css
js
topnav.js
designs
default
design.css
design.json
facebook.png
googleplus.png
linkedin.png
twitter.png
youtube.pgn
layouts
index.html
responsepages
404.html
_folder.json
_folder_icon.png
components.json
viewport.json
基本テーマの設定
-
ローカル・コンピュータ上の同期テーマ・フォルダに次のBootstrapファイルをコピーし、既存のファイルにオーバーレイします。
-
theme_name/layoutsフォルダに入るhtmlファイル -
theme_name/assets/cssフォルダに入るcssファイル -
theme_name/assets/cssフォルダに入るjsファイル -
theme_name/assets/imagesフォルダに入るimageファイル(背景、フッター、人などのイメージとともにサブフォルダ内にグループ化できます)
-
-
layoutフォルダ内のhtmlファイルを変更し、相対パスおよび必須要素を更新します。一般的なBootstrapテーマの場合、/assetsフォルダに対する相対パスが多数存在するため、テーマ・フォルダを指し示すようこれらを変更する必要があります。css、jsおよびimagesフォルダのパスを使用するために修正します:_scs_theme_root_/assets/css/ _scs_theme_root_/assets/js/ _scs_theme_root_/assets/images/
注:
このステップが完了したら、_scs_theme_root部分は、テーマが使用されている環境に合わせて自動的に調整されます。 -
Oracle Content Managementのレイアウトごとに3つの要件があります:
-
htmlファイルの<head>に次のタグを含めます:-
<!--$SCS_RENDER_INFO--> -
<!--$SCS_SITE_HEADER--> -
<!--$SCS_PAGE_HEADER-->
-
-
レイアウト・ファイルの末尾、
<body>タグの内側にレンダラ・スクリプトを含めます。これらのパスは両方とも、サイト・ビルダーおよび実行時環境内で自動的に調整されます。<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
-
renderer.jsファイルのインクルードの後ろに次のタグを含めます:-
<!--$SCS_PAGE_FOOTER--> -
<!--$SCS_SITE_FOOTER-->
-
-
変更したテーマ・ファイルがOracle Content Managementのサイトと同期化されていることを確認します。
サイト・ページの更新
サイト・ビルダーでサイトを開くと、デフォルトのサイト内にあるページが最初に表示されます。不要なページを削除し、保持するページ上のレイアウトを新しいレイアウトの1つに切り替えることができます。
-
サイド・ナビゲーションで、「サイト」をクリックします。
既存のサイトのリストが表示されます。
-
サイトを選択して、右クリック・メニューの「開く」を選択するか、アクション・バーの
をクリックします。 -
更新の名前および説明(オプション)を入力し、「作成」をクリックします。
更新の名前には、文字、数字、アンダースコア(_)およびハイフン(-)を使用できます。スペースを入力した場合、ハイフンに自動的に置換されます。
すでにサイトに対する更新がある場合、リストから更新を選択して
をクリックします。 -
サイト・ビルダーがプレビュー・モードで開きます。変更を加えるか、サイドバーのナビゲーション・オプションを使用する場合、「編集」スイッチが
が「編集」に設定されていることを確認してください。 -
特定のページを編集する場合は、サイドバーのサイト・ツリーを使用するか、サイト独自のナビゲーションを使用して、ページを選択します。
-
不要なページを削除するには、ページを選択し、
をクリックします。 -
新しいページを追加するには、「ページの追加」をクリックします。ページをドラッグ・アンド・ドロップすることによってサイト・ツリー内でページの位置を変更できます。
-
ページに関連付けられたレイアウトを変更するには、サイト・ツリー内でページを選択し、
をクリックし、ページ設定を表示します。「ページ・レイアウト」フィールドに移動し、メニューから異なるレイアウトを選択します。ページ・レイアウトの数とタイプは、サイトに関連付けられたテーマによって異なります。
-
現在の更新に変更を保存するには、「保存」をクリックします。現在の更新で作業を続行するか、必要に応じて新しい更新を作成できます。
ナビゲーションの更新
サイト・プレビュー内のナビゲーションを参照すると、このナビゲーションはBootstrapテーマのレイアウト内のハードコードされたナビゲーションが原因で現在の階層と一致していません。
ナビゲーションを更新し、Bootstrapテーマ内のハードコードされたコードを、サイト階層から動的に生成されたコードで置き換えます。
テーマ・ファイルのローカル同期コピーを編集します。
-
レイアウトからハードコードされたナビゲーション・コードを削除します。一般的なBootstrapテーマから削除する必要があるハードコードされたナビゲーションの例を次に示します。次に示すのは一般的なヘッダー・セクションで、ロゴ、ページが狭すぎるときの「Hamburger」メニューの「Toggle Navigation」部分(レスポンシブ部分)、および他のページのハードコードされたページ・ナビゲーションがあります。
<header id="header" class="header navbar-fixed-top"> <div class="container"> <h1 class="logo"> <a href="index.html"><span class="text">Velocity</span></a> </h1><!--//logo--> <nav class="main-nav navbar-right" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><!--//nav-toggle--> </div><!--//navbar-header--> <div id="navbar-collapse" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active nav-item"><a href="index.html">Home</a></li> <li class="nav-item"><a href="features.html">Features</a></li> <li class="nav-item"><a href="pricing.html">Pricing</a></li> <li class="nav-item dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="download.html">Download Apps</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog-single.html">Blog Single</a></li> <li><a href="blog-category.html">Blog Category</a></li> <li><a href="blog-archive.html">Blog Archive</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li><!--//dropdown--> <li class="nav-item"><a href="login.html">Log in</a></li> <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li> </ul><!--//nav--> </div><!--//navabr-collapse--> </nav><!--//main-nav--> </div><!--//container--> </header><!--//header--> -
JavaScriptコードを作成することにより、サイト構造情報を横断し、ナビゲーション・コードを生成し、レイアウト上のJavaScriptコードを含めます。次に例を示します:
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
-
特定のCSS内で想定されるマークアップと一致するように
topnav.jsファイルの正確な出力を変更します。
サイト・レイアウトの更新
この時点で、サイトは機能しますが、レイアウト内に編集可能な領域(スロット)はありません。
-
レイアウト内にDIV要素を配置または追加し、スロットとして指定します。
スロットは、クラス属性内に値
scs-slotを持つレイアウトのDIV要素です。スロットごとに一意のid属性を設定する必要があります。例:<div id="slot-content1" class="scs-slot scs-responsive"></div>
スロットがブラウザ・ビューポイントのサイズに自動的に調整されるようにするには、クラス属性
scs-responsiveを含めます。 -
必要に応じてこのステップを繰り返し、レイアウトまたは他のレイアウト内に追加スロットを作成します。
サイトの公開
サイトに対するすべての変更を完了して保存したら、サイトを「公開」する必要があります。
サイトを公開すると、現在の更新内のすべての変更が採用され、ベース・サイトにマージされ、更新内の内容が新しいベース・サイトに格納されます。
新規テンプレートの作成
これで、テーマが関連付けられた機能サイトが用意されたので、これをテンプレートにして他のユーザーと共有し、これらのユーザーがテンプレートからサイトを作成できるようにします。
-
Oracle Content Managementサイド・ナビゲーションで、「開発者」をクリックします。
-
「すべてのテンプレートの表示」をクリックします。
-
「作成」をクリックし、「既存のサイトから」を選択します。
-
スタータ・テンプレートおよびBootstrapテンプレートを使用して作成した新しいサイトを選択します。
-
新しいテンプレートの名前を入力し、「作成」をクリックします。
-
他のOracle Content Managementインスタンスと使用するためにテンプレートをパッケージ化するには、テンプレートを選択し、「エクスポート」メニュー・オプションを選択し、ダウンロード可能な
.zipファイルを作成します。