如何创建术语驱动的面包屑路径?
-
10-12-2019 - |
题
我正在使用 SharePoint 2013,并在 SharePoint Designer 中编辑了 html 母版页以显示面包屑路径,就像在 SharePoint 2010 中一样。代码放置在母版页中ID“DeltaPlaceHolderPageTitleInTitleArea”之后,如下:
<!--SPM:<asp:sitemappath
runat="server"
sitemapprovider="SPContentMapProvider"
rendercurrentnodeaslink="true"
nodestyle-cssclass="breadcrumbNode"
currentnodestyle-cssclass="breadcrumbCurrentNode"
rootnodestyle-cssclass="breadcrumbRootNode"
SkipLinkText=""/>-->
虽然这确实显示了面包屑痕迹,但它并没有按照我希望的方式显示。假设我有一个名为“Intranet”的网站集,并且位于其名为“General”的子网站上。在子网站“常规”中,我位于名为“简介”的页面上。此页面(以及此子网站的所有其他页面)由术语集管理。
它会显示这样的踪迹:内联网 > 常规 > 简介
但是现在,假设在我的术语集中,我还有另外 2 个术语,它们是术语“简介”的子元素,这些子元素(子术语)被命名为“历史”和“位置”。如果我要访问“历史”页面,那么它只是“常规”子网站正下方的另一个页面。
它会显示这样的面包屑路径:内联网 > 常规 > 历史记录
虽然我希望它像这样显示:内联网 > 一般 > 简介 > 历史
我对此有点困惑,因为我似乎不明白我应该做什么才能让面包屑路径检测哪个页面是子术语以及哪个页面是父术语等等。
在此先感谢您的帮助!
编辑:基本上我搜索的是类似的例子 这个博客. 。只是我想避免使用网络部件。我想在 JavaScript 中或直接在母版页中进行更改。
解决方案
我发现了一种使用术语驱动的子网站导航的值来获得分层面包屑的方法! :)
选中导航中的哪个列表项(意味着它与您所在页面的URL),我可以循环通过列表并收集所有父元素。
基于这些父元素,我现在知道层次结构,可以使用这些元素的值来创建面包屑。
这是我们所知道的面包屑的屏幕截图:
这是我目前拥有的围栏的屏幕截图,在JavaScript的帮助下:
正如您所看到的,它现在显示了页面的完整路径。
我写了一个新的 post 在我的博客上关于我的回答,所有必要的代码,包括您应该在母版页中添加和替换的代码。
如果您需要帮助,请随意询问您是否需要帮助。
其他提示
作为robert说我很容易实现以几乎类似的方式利用sptitlebrobmb实现的。这是我的布局页面中的html代码:
<div id="modern-breadcrumb">
<!--MS:<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="false"
SiteMapProvider="CurrentNavigationTaxonomyProvider"
ParentLevelsDisplayed="2"
DefaultParentLevelsDisplayed="2"
RootNodeStyle-CssClass="home"
NodeStyle-CssClass="bc-node"
CurrentNodeStyle-CssClass="current"
PathSeparator=""
PathDirection="RootToCurrent">-->
<!--ME:</SharePoint:SPTitleBreadcrumb>-->
</div>
. 术语属性显示当前页面的托管元数据导航分类,但不提供超链接。
<!--CS: Start Term Property Snippet--><!--SPM:<%@Register Tagprefix="spsswc" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--SPM:<%@Register Tagprefix="ac679b743" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--MS:<ac679b743:TermProperty runat="server" TermStoreID="00000000-0000-0000-0000-000000000000" TermSetID="00000000-0000-0000-0000-000000000000" TermID="00000000-0000-0000-0000-000000000000" Property="Path" Title="<%$Resources:osrvcore,TermProperty_Title%>" FrameType="None" SuppressWebPartChrome="True" Description="<%$Resources:osrvcore,TermProperty_Description%>" IsIncluded="True" ZoneID="ImportedPartZone" PartOrder="0" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="<%$Resources:osrvcore,WebPartImportError%>" ImportErrorMessage="<%$Resources:osrvcore,WebPartImportError%>" PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_9e235508_1981_4af3_afca_f5a52d0e66cf" ChromeType="None" ExportMode="All" Preview="<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth "> <div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPartwpz2_g_9e235508_1981_4af3_afca_f5a52d0e66cf" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style="" ><div id="WebPartContent"> [ TermProperty "g_9e235508_1981_4af3_afca_f5a52d0e66cf" ] </div><div class="ms-clear"></div></div> </div>" __MarkupType="vsattributemarkup" __WebPartId="{9e235508-1981-4af3-afca-f5a52d0e66cf}" WebPart="true" Height="" Width="">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)-->[ TermProperty "Unnamed4" ]<!--PE: End of READ-ONLY PREVIEW--><!--ME:</ac679b743:TermProperty>--><!--CE: End Term Property Snippet-->
或者像这样使用 JavaScript(需要更多的工作才能完全发挥作用)
<SCRIPT LANGUAGE="JavaScript">
<!--
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+="<A HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";
}
i=s.length-1;
path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";
document.writeln(path);
//-->
</script>
我能够使用以下控制在母版页中获得与托管导航一起使用的面包屑
<SharePointWebControls:ListSiteMapPath runat="server"
SiteMapProviders="GlobalNavigationTaxonomyProvider"
RenderCurrentNodeAsLink="true" CssClass="s4-breadcrumb"
NodeStyle-CssClass="s4-breadcrumbNode"
CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
RootNodeStyle-CssClass="s4-breadcrumbRootNode"
HideInteriorRootNodes="true"
SkipLinkText=""
PathSeparator="">
</SharePointWebControls:ListSiteMapPath>
. 另一个选项是利用sptitlebreadcrumb控制,如下所示:
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="false"
SiteMapProvider="CurrentNavigationTaxonomyProvider"
ParentLevelsDisplayed="4"
DefaultParentLevelsDisplayed="4" PathDirection="RootToCurrent">
<PATHSEPARATORTEMPLATE>
<SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE>
</SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
.