Squarespace - 如何在懸停的索引縮略圖上顯示說明/自定義文字

基本上，我希望能夠在本網站的所有索引縮略圖上懸停顯示標題和一些文字。 http://www.timboelaars.nl/Squarespace - 如何在懸停的索引縮略圖上顯示說明/自定義文字

但是，在我正在使用的當前正方形空間模板中（我相信它叫做York），標記只抓取頁面標題，因此在懸停時顯示頁面標題。（請參見下面的代碼塊，你可以看到頁面標題在那裏，這是唯一的事情，在哈弗模板顯示器）

<div class="index-item-text-wrapper"> 
        <h2 class="index-item-title"> 
         <a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a> 
        </h2> 
       </div>

有沒有現場對我來說，把任何HTML，所以我尋求幫助，使用javascript手動將自定義HTML標記注入到每個縮略圖，然後在懸停時顯示它們。

TL; DR我希望能夠在縮略圖上顯示的不僅僅是懸停時的標題（理想情況下是我自己的HTML標記，以便我可以自定義樣式），但不支持該模板。

這裏是我的網站http://shensamuel.com/

我真的很軟弱，在Javascript和我搜索對於這個問題的解決方案相當長。任何幫助都感激不盡！

謝謝！

來源

2016-08-12 Samuel Shen

以下JavaScript可用於爲頁面上的每個圖塊插入文本。代碼將使用footer code injection area插入（除非您使用開發人員模式，在這種情況下，您可以將其與其餘腳本一起插入）。

<script> 
(function() { 
    var tiles = document.getElementsByClassName('index-section'); 
    var thisTile; 
    var titleText; 
    var description; 
    var parent; 
    var i, I; 

    for (i=0, I=tiles.length; i<I; i++) { 
     thisTile = tiles[i]; 
     titleText = thisTile.getElementsByClassName('index-item-title-text')[0]; 
     parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0]; 
     description = document.createElement('span'); 
     description.className = 'index-item-description-text'; 
     switch(titleText.innerHTML.toLowerCase()) { 
      case "google shopping": 
       description.innerHTML = "Some custom text."; 
       break; 
      case "hana": 
       description.innerHTML = "More text that's custom."; 
       break; 
      case "wali": 
       description.innerHTML = "Custom text here."; 
       break; 
      case "cypress": 
       description.innerHTML = "Type anything you want."; 
       break; 
      case "ryde": 
       description.innerHTML = "Just another bit of text."; 
       break; 
      default: 
       description.innerHTML = ""; 
     } 
     parent.appendChild(description); 
    } 
})(); 
</script>

觀察代碼中的圖案，以添加新的圖塊或編輯現有圖案。您將看到該腳本嘗試匹配（標題的小寫版本）文本，然後根據每個標題插入文本。這使您可以通過重複這種「案例」模式來添加更多內容。當然，如果你改變了tile的標題，你必須相應地改變這個Javascript代碼。

然後，您可以通過使用Squarespace CSS Editor（或者如果使用開發人員模式時通過base.less文件）插入CSS來設置樣式。例如：

.index-item-description-text { 
    display: block; 
    font-size: 1.2em; 
    color: #FFFFFF 
}

注意，雖然是將使用每個區塊各自的URL做一個AJAX查詢和獲取元數據關於每個項目的替代方法（因此允許您使用Squarespace內容管理器插入這個'描述'），那種方法對於你的情況似乎不必要的複雜。

更新2016/8/17：關於AJAX以及如何禁用Squarespace中的AJAX加載器：Jason Barone建議將此代碼段添加到代碼注入>頁腳以禁用「AJAX」頁面加載器。他指出，它將禁用頁面之間的平滑，AJAX轉換，但會像平常一樣允許自定義Javascript。

<script> 
    //Credit: Jason Barone, http://jasonbarone.com/ 
    window.Template.Constants.AJAXLOADER = false; 
</script>

此外，一些模板有一個選項，樣式編輯器中禁用AJAX（圖片來源：SSSUPERS）：

更新2016年9月28日： 它已經報道，上面提供的代碼不再禁用AJAX。不過，一些較新的模板添加了「啓用AJAX加載」設置，可以將其切換。

來源

2016-08-12 13:32:39 Brandon

非常感謝您花時間幫忙！非常感謝，讓我試試看看你的解決方案是否有效。 –

它的工作原理！謝謝！ –

嘿布蘭登，出現問題了。似乎squares正在爲所有事情設置Ajax負載。如果我進入一個項目，然後返回到首頁，則腳本不再起作用。我猜這個腳本在使用Ajax加載頁面時沒有再次運行。 http://shensamuel.com/你認爲這個腳本有一個解決方法嗎？或者我可以完全禁用Ajax嗎？ –

Squarespace - 如何在懸停的索引縮略圖上顯示說明/自定義文字

回答

相關問題