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

Question

基本上，我希望能够在悬停在我的所有索引缩略图上时显示标题和一些文本，就像这个网站一样。 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 标记手动注入(inject)到每个缩略图，然后在悬停时显示它们。

TL;DR 我希望能够在缩略图上显示悬停时的标题(最好是我自己的 HTML 标记，以便我可以自定义样式)，但这不受模板支持。

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

我在 Javascript 方面确实很弱，并且我已经寻找这个问题的解决方案很长时间了。任何帮助将不胜感激!

谢谢!

Answer 1

以下 Javascript 可用于为页面上的每个图 block 插入文本。将使用 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>

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

然后，您可以通过 Squarespace CSS Editor 插入 CSS 来设置描述样式(或者如果使用开发者模式，则通过您的 base.less 文件)。例如:

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

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

<小时/> 更新 8/17/2016: 关于 AJAX 以及如何在 Squarespace 中禁用 AJAX 加载器:Jason Barone 建议将此代码段添加到代码注入(inject) > 页脚以禁用“AJAX”页面加载器。他指出，这将禁用页面之间平滑的 AJAX 转换，但将像往常一样允许自定义 Javascript。

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

此外，某些模板可以选择在样式编辑器中禁用 AJAX(图片来源: SSSUPERS ):

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