在Asp.Net网站中，我们只需使用SiteMap和SiteMapPath添加面包屑即可。但是SiteMapPath在网站上添加了一个非常简单的面包屑。
我想自定义网站上的SiteMapPath，以包含来自FontAwesome的图标，用于SiteMapPath中存在的每个节点。另外，我想设计类似于下面添加的代码段的SiteMapPath。
.breadcrumb-SiteMaster {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.breadcrumbSM {
list-style: none;
display: inline-block;
}
.breadcrumbSM .icon {
font-size: 14px;
}
.breadcrumbSM li {
float: left;
}
.breadcrumbSM li a {
color: #FFF;
display: block;
background: #3498db;
text-decoration: none;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
.breadcrumbSM li:nth-child(even) a {
background-color: #2980b9;
}
.breadcrumbSM li:nth-child(even) a:before {
border-color: #2980b9;
border-left-color: transparent;
}
.breadcrumbSM li:nth-child(even) a:after {
border-left-color: #2980b9;
}
.breadcrumbSM li:first-child a {
padding-left: 15px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
border-radius: 4px 0 0 4px;
}
.breadcrumbSM li:first-child a:before {
border: none;
}
.breadcrumbSM li:last-child a {
padding-right: 15px;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
border-radius: 0 4px 4px 0;
}
.breadcrumbSM li:last-child a:after {
border: none;
}
.breadcrumbSM li a:before, .breadcrumbSM li a:after {
content: "";
position: absolute;
top: 0;
border: 0 solid #3498db;
border-width: 20px 10px;
width: 0;
height: 0;
}
.breadcrumbSM li a:before {
left: -20px;
border-left-color: transparent;
}
.breadcrumbSM li a:after {
left: 100%;
border-color: transparent;
border-left-color: #3498db;
}
.breadcrumbSM li a:hover {
background-color: #1abc9c;
}
.breadcrumbSM li a:hover:before {
border-color: #1abc9c;
border-left-color: transparent;
}
.breadcrumbSM li a:hover:after {
border-left-color: #1abc9c;
}
.breadcrumbSM li a:active {
background-color: #16a085;
}
.breadcrumbSM li a:active:before {
border-color: #16a085;
border-left-color: transparent;
}
.breadcrumbSM li a:active:after {
border-left-color: #16a085;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="breadcrumb-SiteMaster">
<ul class="breadcrumbSM">
<li><a href="#"><span><i class="fa fa-home"></i></span></a></li>
<li><a href="#"><span><i class="fa fa-file"></i></span> Projects</a></li>
<li><a href="#"><span><i class="fa fa-angle-double-right"></i></span> Breadcrumb</a></li>
<li><a href="#"><span><i class="fa fa-rocket"></i></span> Getting started</a></li>
<li><a href="#"><span><i class="fa fa-arrow-down"></i></span> Download</a></li>
</ul>
</div>
我尝试在SiteMapPath中使用CSS，但是没有用。
答案 0 :(得分：0)
找到了问题的答案。在Google上进行了一些搜索，发现通过使用ControlAdapter和BrowserFile可以将SiteMapPath编辑为类似于Bootstrap Breadcrumb。
首先，您需要添加一个名为 SiteMapPathControlAdapter 的类，该类将继承WebControlAdapter，然后在其中可以编辑 SiteMapPath
的布局public class SiteMapPathControlAdapter : WebControlAdapter
{
public virtual string LinkCssClass
{ get; set; }
protected override void RenderBeginTag(HtmlTextWriter writer)
{
writer.WriteLine();
writer.WriteBeginTag("div");
writer.WriteAttribute("class", ((System.Web.UI.WebControls.SiteMapPath)(Control)).CssClass);
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("ul");
writer.WriteAttribute("class", "breadcrumbSM");
writer.Write(HtmlTextWriter.TagRightChar);
}
protected override void RenderEndTag(HtmlTextWriter writer)
{
writer.WriteEndTag("ul");
writer.WriteEndTag("div");
writer.WriteLine();
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Indent++;
SiteMapPath item = (SiteMapPath)Control;
SiteMapProvider Provider = ((System.Web.UI.WebControls.SiteMapPath)(Control)).Provider;
SiteMapNodeCollection collection = new SiteMapNodeCollection();
SiteMapNode node = Provider.CurrentNode;
if (node != null)
{
collection.Add(node);
while (node != Provider.CurrentNode.RootNode)
{
node = node.ParentNode;
collection.Add(node);
}
}
BuildItems(collection, true, writer);
writer.Indent--;
writer.WriteLine();
}
private void BuildItems(SiteMapNodeCollection items, bool isRoot, HtmlTextWriter writer)
{
if (items.Count > 0)
{
writer.WriteLine();
writer.Indent++;
for (int i = items.Count - 1; i > -1; i--)
{
BuildItem(items[i], writer);
}
writer.Indent--;
writer.WriteLine();
}
}
private void BuildItem(SiteMapNode item, HtmlTextWriter writer)
{
if ((item != null) && (writer != null))
{
if (item.Url.Length > 0)
{
writer.WriteLine();
writer.WriteBeginTag("li");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("a");
writer.WriteAttribute("href", Page.ResolveUrl(item.Url));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("span");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("i");
writer.WriteAttribute("class", string.Format("fa fa-{0}", item.Description));
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteEndTag("i");
writer.WriteEndTag("span");
if (item.Title == "Home")
{
writer.Write("");
}
else
{
writer.Write(string.Format(" {0}", item.Title));
writer.WriteEndTag("a");
writer.WriteEndTag("li");
writer.WriteLine();
}
}
}
}
}
}
此后，将 BrowserFile 添加到您的项目中，并将其链接到最近在项目中添加的ControlAdapter类，方法是在BrowserFile中添加以下行。
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="SiteMapPathControlAdapter" />
</controlAdapters>
</browser>
然后您要做的就是将SiteMapPath添加到Site.Master中，以便在所有页面上都可以使用，并将CssClass设置为 breadcrumb-SiteMaster ，您就可以了。