Drupal 6/Views2網格樣式：整個單元格鏈接到節點

在我的Drupal站點上，我使用Views模塊創建了一個Users頁面，該模塊只是一個很好的樣式的網格（HTML表格）的用戶。我爲每個顯示了幾個字段，並且名稱和個人資料圖片都已設置爲鏈接到用戶節點。Drupal 6/Views2網格樣式：整個單元格鏈接到節點

什麼是最好的方式來改變它，以便整個單元格（HTML td）鏈接到用戶節點？編輯：我不關心添加HTML鏈接標籤，但訪問每個配置文件頁面的URL。

我已經着眼於修改視圖的主題（覆蓋樣式輸出，例如views-view-grid-users.tpl.php），但不能看到一個優雅的方式來獲取用戶的URL節點。

編輯：我在JavaScript中實現了一個臨時解決方案，它查看每個單元格的HTML，提取第一個鏈接的URL並使用它，但是有沒有更好的方法來使用Drupal變量？

感謝您的幫助。

來源

2010-05-11 jackocnr

好的，我發現了一個更好的（超級簡單）提取配置文件URL的方法，並且我還在整個塊鏈接解決方案（歸因於espais）中解決了一些問題，我認爲這是值得記錄的。所以這裏是我原來的問題的完整解決方案：

1）添加一個自定義模板文件覆蓋views-view-fields.tpl.php（見http://views-help.doc.logrus.com/help/views/using-theme - 感謝barraponto的有用鏈接）。在這個自定義文件中，您應該將所有代碼包裝在一個鏈接中，並在結束之前添加一個clear-fix div，以將鏈接拉伸到容器的整個高度。

<a class="td-link" href="user/<?php print $row->uid; ?>"> 
... 
<div class="clear-fix"></div> 
</a>

2）現在，你需要從每個網格元素中排除任何其他環節，如你不能嵌套的HTML鏈接（產生真正怪異的行爲）。首先要做的是編輯視圖，並確保沒有任何字段「將該字段鏈接到它的用戶」選中。然後如果你想包括個人資料圖片字段，你需要添加一個小的修復模塊，因爲默認情況下沒有辦法阻止這個字段作爲一個鏈接！你可以從這個評論中得到模塊：http://drupal.org/node/720772#comment-2757536

3）最後是CSS。下面添加到你的主題的style.css：

a.td-link { 
    display: block; 
    color: #000; 
    text-decoration: none; 
    border: 1px solid #E9EFF3; 
} 
a.td-link:HOVER {border-color: #85b3d4;} 
a.td-link label {cursor: pointer;} 
div.clear-fix {clear: both;}

這將刪除鏈接從文本格式（因爲我們希望整個街區看起來像一個環節，不只是文本），並延伸鏈接出去填充容器。它還使光標圖形保持一致，並且在鼠標移過該塊時增加了一個很好的邊框效果。請記住，您還可以將自定義CSS類添加到您的視圖中，這樣可以更輕鬆/更加方便地在CSS代碼中爲樣式選擇元素。

來源

2010-05-25 10:02:18 jackocnr

哈哈，這可能實際上解決了我有一個菜單問題...點）;） – espais 2010-05-25 10:05:48

如何這樣的事情...沒有所需的JavaScript

在你的餐桌：

<td><a href="..." class="td_link">the link</a></td> 
...

在你的CSS文件：

.td_link { 
    display: block; 
    width: 100%; 
}

所以基本上所有你需要做的是添加一個類到你的鏈接和一小段CSS。

來源

2010-05-11 12:36:57 espais

感謝您的建議，但這會產生可怕的效果 - 它只是將所有內容轉換爲鏈接（所有文本/圖像），但沒有任何內容之間的差距或div的邊緣。我想唯一的解決方案是讓整個div可點擊使用javascript，這很好。問題是我看不到如何以優雅的方式獲得用戶節點的實際URL。信息正好在那裏的單元格的內容 - 名稱和圖片字段鏈接到用戶節點，但我似乎無法使用自定義主題模板文件訪問該信息... – jackocnr 2010-05-11 14:03:56

多麼尷尬;我剛剛意識到你的塊鏈接方法確實做了我想要的。不知道我之前做錯了什麼 - 也許有一些奇怪的CSS優先級問題。這確實是一個更好的解決方案，使用JS來使整個div進入鏈接...謝謝。 – jackocnr 2010-05-24 11:24:01

如果你喜歡它然後接受它;）我很高興你能夠得到它的工作雖然 – espais 2010-05-25 07:55:11

區分實際鏈接，使用< a>標籤以及可以單擊的任意元素很重要。即使你不關心語義，你也應該關心你的訪問者不使用JavaScript，特別是搜索引擎。

與其將塊元素轉換爲鏈接，您應該將鏈接轉換爲塊元素，正如espais建議的那樣。獲得對標記的更多控制權的一種方法是使用custom fields爲您的鏈接添加打開和關閉標籤，以便在其他字段中進行鏈接。

來源

2010-05-11 13:19:00

不幸的是，espais的建議不會產生預期的效果（請參閱我的評論）。我實際上使用javascript很好 - 我很高興要求我的訪問者允許它，並且這對搜索引擎沒有問題，因爲正如我所說，單元格還包含到同一端的常規鏈接。我已經更新了我的原始問題，以更具體地說明我的問題。 – jackocnr 2010-05-11 14:19:19

spais和scott-reynen是正確的。但不是將每個字段放置在多個元素下，每個元素都使用css將它們轉換爲塊（可以有邊距和填充），爲什麼不使用單個元素？

如果一切是爲了鏈接到同一個地方，你可以放在一起所有單<一個>元素，但每個元素應該是一個內聯元素（<跨度>代替<DIV>）。你可以通過改變行模板來實現：檢查http://views-help.doc.logrus.com/help/views/using-theme

在你的情況下，將模板從視圖模塊內複製到你的主題文件夾，並相應地將其重命名爲你的視圖「主題：信息」說。請確保沒有<div>或<p>或任何其他正在輸出的塊元素。如果您需要斷線，請使用<br>。

來源

2010-05-19 03:48:59

請注意，您可以使用顯示元素：block;並因此對其應用邊距和填充。 – 2010-05-19 03:53:21

感謝您的建議。我從此意識到，espais是對的。我現在唯一的問題是從該自定義模板文件訪問用戶配置文件URL。我只是不知道什麼變量可用於我的PHP代碼在這些模板文件... – jackocnr 2010-05-24 12:58:05

Drupal 6/Views2網格樣式：整個單元格鏈接到節點

回答

相關問題