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 - 如何在悬停的索引缩略图上显示说明/自定义文字

回答

相关问题