使Sitecore中沒有文字的鏈接工作

Question

我遇到了如何在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的），但是當切換到移動視圖，容器成爲鏈接的名稱和標題作爲唯一顯示和拿走鏈接字段中的內容。我的問題是如何使容器與在桌面視圖中顯示爲文本的鏈接相同？有沒有辦法讓文本不被顯示，並在每個事物的頂部放置一個覆蓋容器，但只有透明背景才能使容器進入相同的鏈接？對於後端，我只是用包含一切努力使該字段顯示一個列表視圖：

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; 
     } 

    } 

Answer 1

假設你使用的是響應式設計，爲移動/平板電腦的斷點，你可以添加一些額外的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>

如果您使用的不是響應式設計，並使用設備的檢測，那麼你可以添加廣告ditional CSS類的鏈接，並修改CSS來匹配：

.link a.mobile { 
    ... 
} 

而且在後面的代碼添加CSS類：

((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";