方形-如何在悬停时在索引缩略图上显示描述/自定义文本

Question

基本上，我希望能够显示标题和一些文本悬停在我的所有索引缩略图，像这个网站。http://www.timboelaars.nl/

但是，在我使用的当前squarespace模板中(我相信它被称为约克)，标记只是抓取页面标题，因此在悬停时显示页面标题。(参见下面的代码块，您可以看到页面标题，这是模板在Hover上显示的唯一内容)

<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标记，然后在悬停上显示它们。

我希望能够在我的缩略图上显示更多的标题，而不仅仅是悬停的标题(最好是我自己的HTML标记，这样我就可以自定义样式)，但模板不支持这一点。

这是我的网站http://shensamuel.com/

我在Javascript方面真的很薄弱，我已经为这个问题找了很长时间的解决方案。任何帮助都将不胜感激！

谢谢!

Answer 1

下面的Javascript可用于在页面上插入每个瓷砖的文本。代码将使用页脚代码注入区插入(除非您使用的是开发人员模式，在这种情况下，您将将其与您的其他脚本一起插入)。

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

观察代码中的模式，以便添加新的块或编辑现有的块。您将看到脚本试图匹配“title”文本(小写版本)，然后根据每个标题插入文本。这允许您在将来通过重复这个“case”模式来添加更多内容。当然，如果您更改了瓷砖的标题，您就必须相应地更改这个Javascript代码。

然后，您可以通过正方形CSS编辑器插入CSS (如果使用开发人员模式，也可以通过base.less文件)对描述进行样式化。例如：

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

请注意，虽然有另一种方法可以使用每个瓷砖的各自的URL来执行AJAX查询，并获得关于每个项目的元数据(因此允许您使用Squarespace内容管理器插入这个“描述”)，但对于您的情况来说，该方法似乎是不必要的复杂。

更新8/17/2016:关于AJAX的以及如何在Squarespace中禁用AJAX加载程序: Jason建议将这个片段添加到您的代码注入>页脚以禁用"AJAX“分页器。他指出，它将禁用页面之间平滑的AJAX转换，但将像往常一样允许自定义Javascript。

​

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

另外，一些模板可以在样式编辑器中禁用AJAX (图像信用：苏佩尔)：

​

​

更新9/28/2016:据报道，上面提供的代码不再禁用AJAX。但是，一些较新的模板添加了一个可以切换的“启用AJAX加载”设置。