使链接在Sitecore中无文本工作

本文关键字：文本 工作 Sitecore 链接 | 更新日期: 2023-09-27 18:20:20

我遇到了如何在Sitecore中显示链接的问题。目前我使用三个字段：名称、标题和链接。这三个字段都在div标记中，所以…

 <div class="container">
      <div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
      <div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
      <div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
 </div>

对于常规视图，链接标记仅显示为文本（写在Sitecore中），但当它切换到移动视图时，容器将成为链接，名称和标题是唯一显示和删除链接字段中内容的内容。我的问题是如何使容器与桌面视图中显示为文本的容器具有相同的链接？有没有一种方法可以不显示文本，并将覆盖容器放在所有内容的顶部，而只是将背景作为透明，使容器转到同一链接？对于后端，我只是使用了一个包含所有内容的Listview来显示字段：

    protected void Page_Load(object sender, EventArgs e)
    {
        Item item = this.DataSourceItem;
        lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
        lvContains.DataBind();
    }
    protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            Item item = (Item)e.Item.DataItem;
            ((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
            ((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
            ((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
        }
    }

使链接在Sitecore中无文本工作

假设您使用的是响应式设计，对于移动设备/平板电脑断点，您可以添加一些额外的CSS属性，使链接达到父容器的全高/全宽，并隐藏文本：

.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a { 
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
    color: transparent;
}
 <div class="container">
      <div class="name">Item Name</div>
      <div class="title">Item Title</div>
      <div class="link"><a href="#">Item Link</a></div>
 </div>

如果你没有使用响应式设计，并且使用设备检测，那么你可以在链接中添加一个额外的CSS类，并修改CSS以匹配：

.link a.mobile {
  ...
}

并在代码后面添加CSS类：

((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";
相关文章：