Question

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

但是，在我使用的当前方形空间模板中（我相信它叫做York），标记只是抓取页面标题，因此在悬停时显示页面标题。（参见下面的代码块，你可以在那里看到页面标题，这是模板在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标记，然后在悬停时显示它们。

TL; DR我希望能够在我的缩略图上显示悬停标题（理想情况下我自己的HTML标记，以便我可以自定义样式），但模板不支持。

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

我在Javascript上非常弱，而且我已经为这个问题寻找了很长时间的解决方案。任何帮助将不胜感激！

谢谢！

Answer 1

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

观察代码中的模式以添加新切片或编辑现有切片。您将看到脚本尝试匹配（小写版本）“标题”文本，然后根据每个标题插入文本。这允许您通过重复此“大小写”模式在将来添加更多内容。当然，如果您更改了瓷砖的标题，则必须相应地更改此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建议将此代码段添加到您的代码注入＆gt;页脚禁用“AJAX”页面加载器。他指出，它会禁用页面之间平滑的AJAX转换，但会像往常一样允许自定义Javascript。

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

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

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

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

1 个答案: