ブートストラップ・テンプレートまたはWebサイト・デザイン・テンプレートからのサイト・テンプレートの作成
Oracle Content Managementのオープン・アーキテクチャは、ファウンデーションやブートストラップなどの他のコード・フレームワークで実行した作業を使用できることを意味します。 いくつかの変更を加えて、ブートストラップ・サイト・テンプレートをテーマに変更し、Oracle Content Managementサイト・テンプレートの一部にすることができます。
基本的なプロセス
後続のセクションで詳述するステップの概要を示します。
前提条件
-
フォルダおよびファイルをローカル・コンピュータと同期するためのOracle Content Managementデスクトップ・アプリケーションを設定して実行します。
-
ブートストラップ・サイト・テンプレートのテーマ・フォルダ、ファイルおよびコンテンツをローカル・コンピュータにダウンロードし、使用する準備を整えます。
サイトの作成
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
基本テーマの設定
-
これらのブートストラップ・ファイルをローカル・デスクトップ上の同期したテーマ・フォルダにコピーし、既存のファイルに重ねます。
-
htmlファイルはtheme_name/layoutsフォルダに入ります -
cssファイルはtheme_name/assets/cssフォルダに入ります -
jsファイルはtheme_name/assets/jsフォルダに入ります -
imageファイルはtheme_name/assets/imagesフォルダに入り、バックグラウンド、フッター、人などのイメージを含むサブフォルダにグループ化できます
-
-
layoutフォルダ内のhtmlファイルを変更して、相対パスを更新し、必要な要素を追加します。 一般的なブートストラップ・テーマの場合は、/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つに切り替えることができます。
-
サイド・ナビゲーションで、「サイト」をクリックします。
既存のサイトのリストが表示されます。
-
サイトを選択し、右クリック・メニューで「オープン」を選択するか、アクション・バーの
をクリックします。
-
更新の名前、および必要に応じて説明を入力してから、「作成」をクリックします。
更新の名前には、文字、数字、アンダースコア(_)およびハイフン(-)を使用できます。 スペースを入力した場合、ハイフンに自動的に置換されます。
すでにサイトに対する更新がある場合、リストから更新を選択して
をクリックします。
-
サイト・ビルダーがプレビュー・モードで開きます。 変更を加えるか、サイドバーのナビゲーション・オプションを使用する場合、「編集」スイッチが
が「編集」に設定されていることを確認してください。
-
特定のページを編集するには、サイドバー内のサイト・ツリーを使用するかサイト独自のナビゲーションを使用して、ページを選択します。
-
必要ないページを削除するには、ページを選択し、
をクリックします。
-
新しいページを追加するには、「ページの追加」をクリックします。 ドラッグ・アンド・ドロップすることで、サイト・ツリー内でページを再配置できます。
-
ページに関連付けられているレイアウトを変更するには、サイト・ツリー内でページを選択し、
をクリックしてページ設定を表示します。
「ページ・レイアウト」フィールドに移動し、メニューから異なるレイアウトを選択します。 ページ・レイアウトの数とタイプは、サイトに関連付けられたテーマによって異なります。
-
「保存」をクリックして、現在の更新に対する変更を保存します。 現在の更新で作業を続行するか、必要な場合は新しい更新を作成することができます。
ナビゲーションの更新
サイト・プレビューでナビゲーションを表示する場合、ブートストラップ・テーマからレイアウト内のハードコードされたナビゲーションのため、現在の階層とは一致しません。
ナビゲーションを更新して、ブートストラップ・テーマ内のハードコードをサイト階層から動的に生成されたコードに置き換えます。
テーマ・ファイルの同期済ローカル・コピーを編集します。
-
レイアウトからハードコードされたナビゲーション・コードを削除します。 次に、典型的なブートストラップ・テーマから削除する必要があるハードコードされたナビゲーションの例を示します。 これは、ロゴ、ページが狭すぎる(応答部分)場合にハンバーガ・メニューのナビゲーションの切替え部分およびその他のページにハードコードされたページ・ナビゲーションを含む、一般的なヘッダー・セクションです。
<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サイド・ナビゲーションで、「開発者」をクリックします。
-
「すべてのテンプレートの表示」をクリックします。
-
「作成」をクリックし、既存のサイトからを選択します。
-
スタータ・サイト・テンプレートとブートストラップ・サイト・テンプレートを使用して作成した新しいサイトを選択します。
-
新しいサイト・テンプレートの名前を入力し、「作成」をクリックします。
-
他のOracle Content Managementインスタンスで使用するためにサイト・テンプレートをパッケージ化するには、サイト・テンプレートを選択し、「エクスポート」メニュー・オプションを選択して、ダウンロード可能な
.zipファイルを作成します。