印刷テンプレートエンティティの作成

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

印刷テンプレート エンティティは、PDF ファイルの構造を定義する .cshtml、.json、および.css ファイルを含む ZIP パッケージです。

次の例では、Sitecore Content Marketing Platform (CMP) の Recipe コンテンツタイプから PDF テンプレートに印刷する ZIP パッケージを作成します。

PDF 出力には、次のものが含まれている必要があります。

プレビュー レンディション
コンテンツ名
Recipe_Title
Recipe_Ingredients
Recipe_Nutritionalfacts

content.json

次の例では、使用される content.json は次のようになります。

{
"template": {
"output": "Content.Name",
"file": "content.cshtml",
"source": {
"type": "entity",
"variables": [
{
"name": "Preview",
"type": "rendition",
"lowRes": {
"property": "Renditions",
"rendition": "preview"
},
"highRes": {
"property": "MainFile"
},
"relation": {
"name": "CmpContentToMasterLinkedAsset",
"role": "Parent",
"relation": {
"name": "MasterFile",
"role": "Parent"
}
}
},
{
"name": "Content.Name",
"type": "property",
"property": "Content.Name"
},
{
"name": "Recipe_Title",
"type": "property",
"property": "Recipe_Title"
},
{
"name": "Recipe_Ingredients",
"type": "property",
"property": "Recipe_Ingredients"
},
{
"name": "Recipe_Nutritionalfacts",
"type": "property",
"property": "Recipe_Nutritionalfacts"
}
]
}
}
}

content.cshtml

次の例では、使用される content.cshtml は次のようになります。

@model Stylelabs.M.Print.EntityGeneration.Models.Model
@using System.Linq

<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css">
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>

<div class="top-image-wrapper">
<img class="logo" src="https://amd.stylelabs.io/api/public/content/4ad78ee8abb44297bb1d8964faeb375b?v=ce26c9ab"/>
<img class="top-image-wrapper" src="@(@Model.Properties["$$Preview$$"].FirstOrDefault())"/>
</div>
<div class="content-name-wrapper">
<h2 class="content-name">
@if (Model.Properties.ContainsKey("$$Content.Name$$"))
{
@Raw(@Model.Properties["$$Content.Name$$"].FirstOrDefault())
}
</h2>
<div class="content">
@Raw(@Model.Properties["$$Recipe_Title$$"].FirstOrDefault())&nbsp;
@Raw(@Model.Properties["$$Recipe_Ingredients$$"].FirstOrDefault())&nbsp;
@Raw(@Model.Properties["$$Recipe_Nutritionalfacts$$"].FirstOrDefault())&nbsp;
</div>
</div>
</body>
</html>

content.css

次の例では、使用される content.css は次のようになります。

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');

@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* typo */
body {
font-family: 'helv';
font-size: 10pt;
color: rgb(75, 74, 74);
line-height: 1.6;
font-weight: 500;
position: relative;
}

.logo {
position: absolute;
top: 40px;
left: 40px;
width: 3.4925cm;
height: auto;
z-index: 10000;
}

/* layout */
@page {
size: A4;
margin: 0 0 0 0;
padding: 0;
}

.top-image-wrapper {
background-size: contain;
background-position: center top;
width: 100%;
height: 25%;
overflow-y: hidden;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}

.content-name-wrapper {
position: relative;
top: 28%;
width: 85%;
margin-top: .25in;
margin-left: .5in;
}   

.content-name {
color: red;
}

.content {
width:85%;
float:left;
margin-right: 15%;
position: relative;
top: 30%;
padding: 25px;
}

これら 3 つのファイルを ZIP ファイルに含めます。次の例では、この ZIP フォルダーを使用します。

印刷テンプレートのアップロード

印刷テンプレートを Sitecore Content Hub™ にアップロードするには:

メニューバーで、[管理] をクリックします。
[管理] ページで、[印刷テンプレート] をクリックします。
[印刷テンプレート] ページで、[新しい印刷テンプレート] をクリックします。先ほど作成した ZIP ファイルをアップロードします。
[新しい印刷テンプレート] ダイアログボックスに、名前、ターゲット定義、ある場合はカスタムプロパティを入力します。この例では、次を入力します。
- 名前: CMPRecipePrintTemplate。
- ターゲット定義: Content (M.Content)。
- カスタムプロパティ: カスタムプロパティは追加しません。
[作成] をクリックします。
印刷テンプレートパッケージをアップロードするには、[ファイルを選択] をクリックします。

この記事を改善するための提案がある場合は、お知らせください!

印刷テンプレート エンティティの作成

content.json

content.cshtml

content.css

印刷テンプレートのアップロード

印刷テンプレートエンティティの作成