SITECORE MANIA 技術ブログ

2017.12.01 コーディング

市島

市島

Sitecore(サイトコア)のコーディングのテンプレート設計

Sitecore(サイトコア)のパターンを「テーマ」という概念で考えていきます。
「テーマ」の切り替えには軸になるCSSが必要で、それをbodyのclassの付与で切り替えます。

テンプレートコーディング設計 

「テーマ」のclassはエンジニアへの連携が必要です。

どのテンプレートとclassが紐づくかドキュメントにまとめてエンジニアへ渡すと開発がスムーズに進みます。
LYZONでは、まとめたドキュメントはGit管理して誰でも閲覧可能な状態にしています。

テンプレートコーディング設計

さて、前述の4パターンのデザインは上記のようにマークアップしました。
それぞれ、bodyへのclassの付与は「.type1」「.type2」「.type3」「.type4」とします。
(class名は適宜変更してください)

header・footerは共通として、メインコンテンツはなるべく共通classを使用してマークアップしています。
テンプレートごとにバラバラにマークアップする方法もありますが、マークアップを統一することによりエンジニアの負担が減るので適宜意見交換をして作業を進めましょう。

次にCSSです。
それぞれ、bodyに付与したclassを使って、mainなど共通classの横幅を決めていきます。

.type1 .slider {
	width: 100%;
	margin:0 0 30px 0;
}
.type1 .main {
	width: 1000px;
	margin:0 auto 0 auto;
}
.type2 .main {
	width: 1000px;
	margin:0 auto 0 auto;
}
.type3 .main {
	width: 1000px;
	margin:0 auto 0 auto;
	display: flex;
	flex-flow: row wrap;
}
.type3 .main .article {
	width: 800px;
	flex: 0 1 auto;
	margin:0 20px 0 0;
}
.type3 .main .side {
	width: 180px;
	flex: 0 1 auto;
}
.type4 .main {
	width: 100%;
}

大規模サイトでは、20以上のテンプレートコーディングをすることも珍しくありません。
Sitecoreに限らず他のCMSでも、基本の設計がしっかりしてれば、テンプレート数が増えても柔軟に対応出来ます。

この記事を読んだ人はこちらの記事も読んでます

お問い合わせ・資料請求

LYZONにご相談下さい

ご依頼ご質問等まずは私達にお気軽にご相談下さい。

お電話でのお問い合わせ

03-5803-0587平日9:00~18:00