だいぶ前になりますが、コンテンツ検索webパーツでブログの新着を表示するやり方を紹介しました。
【2013】コンテンツ検索 webパーツでBlogの新着情報を表示する | Me & SharePoint.
今回の記事と、次回の記事
コンテンツ検索 web パーツでホバーパネルを表示してみた
はその続きとなります。
前回のままではタイトルとサムネイルだけでさびしいので、本文の一部、投稿日、それから「Read More」ボタンを表示してみたいと思います。
完成イメージです。
これを実現するには、「表示テンプレート」というものをカスタマイズします。
表示テンプレートのカスタマイズについては、MSのサポートチームのブログで詳しく紹介されていますので参考にしてください。
SharePoint 2013 お知らせアイテムを新着順に表示するコンテンツ検索 Web パーツを作成する – Japan SharePoint Support Team Blog – Site Home – TechNet Blogs.
SharePoint 2013 検索結果の表示を制御する表示テンプレート – Japan SharePoint Support Team Blog – Site Home – TechNet Blogs.
さて、マスターページギャラリーからDisplay Templates＞Content Web Parts とフォルダをたどって、Item_Picture3Lines.htmlをダウンロードします。
ダウンロードしたテンプレートを「Item_BlogPost.html」とリネームします。
テンプレートを開き、以下のように書き換えます。
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>For Blog Post</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">'Picture URL'{画像の URL}:'PublishingImage;PictureURL;PictureThumbnailURL','Link URL'{リンクの URL}:'Path','Line 1'{行 1}:'Title','Line 2'{行 2}:'DiscussionPost','Line 3'{行 3}:'Created', 'SecondaryFileExtension','ContentTypeId'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">このアイテム表示テンプレートでは、100 x 100 の大きさでアイテムの画像が左側に表示されます。画像の右側には、タイトル、既定アイテムの説明、カスタムの管理プロパティ用の行が表示されます。</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--
Warning: Do not try to add HTML to this section. Only the contents of the first <div>
inside the <body> tag will be used while executing Display Template code. Any HTML that
you add to this section will NOT become part of your Display Template.
-->
<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>
<!--
Use the div below to author your Display Template. Here are some things to keep in mind:
* Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
inside a comment.
* Use the values assigned to your variables using an "underscore pound equals"
(_#= ... =#_) token.
-->
<div id="Item_BlogPost">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_BlogPost_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncodeValueObject);
var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");
var StrLine2 = line2.value;
if (StrLine2.length > 150){
StrLine2 = StrLine2.substr(0, 150) + "...";
}
var pictureURL = $getItemValue(ctx, "Picture URL");
var pictureId = encodedId + "picture";
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId);
line1.overrideValueRenderer($contentLineText);
line2.overrideValueRenderer($contentLineText);
line3.overrideValueRenderer($contentLineText);
var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureContainerId = encodedId + "pictureContainer";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2Id = encodedId + "line2";
var line3Id = encodedId + "line3";
var dataDisplayTemplateTitle = "BlogPost";
_#-->
<div class="cbs-picture3LinesContainer" id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
<div class="cbs-picture3LinesImageContainer" id="_#= pictureContainerId =#_">
<!--#_
if(!linkURL.isEmpty)
{
_#-->
<a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
<!--#_
}
_#-->
_#= pictureMarkup =#_
<!--#_
if(!linkURL.isEmpty)
{
_#-->
</a>
<!--#_
}
_#-->
</div>
<div class="cbs-picture3LinesDataContainer" id="_#= dataContainerId =#_">
<a class="cbs-picture3LinesLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
<h4 class="cbs-picture3LinesLine1 ms-accentText2 ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h4>
</a>
<!--#_
if(!line2.isEmpty)
{
_#-->
<div class="cbs-picture3LinesLine2" style="height:auto;" id="_#= line2Id =#_" > _#= StrLine2 =#_ </div>
<!--#_
}
_#-->
<div style="overflow:hidden;">
<!--#_
if(!line3.isEmpty)
{
_#-->
<span class="cbs-picture3LinesLine3 ms-textSmall ms-noWrap" id="_#= line3Id =#_" style="float:left;">[Posted : _#= line3 =#_ ]</span>
<!--#_
}
_#-->
<a class="cbs-button1" href="_#= linkURL =#_" style="float:right;">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
書き換えたItem_BlogPost.htmlを、ダウンロード元のフォルダにアップロードし、タイトルに「For Blog Post」と入力して保存します。
コンテンツ検索webパーツを設置したページに戻り、webパーツを編集状態にします。
「表示テンプレート」セクションの「アイテム」で、先ほどテンプレートのタイトルに設定した「For Blog Post」を選択します。
もし、うまく内容が反映されない場合は「プロパティのマッピング」でデフォルトで入力されているプロパティを再度選択しなおしてから保存してみてください。
最後に、「Read More」のリンクをボタン状にし、全体の見栄えを整えるためのCSSをページに埋め込みます。
ページを編集状態にし、「スクリプトエディター」を挿入して、コードスニペットのに以下のコードを貼り付けて保存します。
<style>
.cbs-picture3LinesContainer {
padding: 20px 0;
margin: 5px;
}
.cbs-picture3LinesImageContainer {
margin-top: 5px;
}
.cbs-button1{
text-decoration: none;
text-align: center;
display: inline-block;
background-color: #59b1eb;
border: 2px solid #59b1eb;
color: #fff;
padding: 0 30px;
}
.cbs-button1:visited{
color: #fff;
}
.cbs-button1:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
text-decoration: none;
}
.cbs-button1::before,
.cbs-button1::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.cbs-button1,
.cbs-button1::before,
.cbs-button1::after {
box-sizing: border-box;
transition: all .3s;
}
</style>
これでOKです！
おなじみのコンテンツクエリwebパーツよりは、xslスタイルシートをいじらなくて済む分カスタマイズのハードルは低いですよね。
これからどんどん使っていきたいと思います！
Me & SharePoint 