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 标记注入每个缩略图，然后在悬停时显示它们.

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>

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

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

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

请注意，虽然有另一种方法可以使用每个图块各自的 URL 进行 AJAX 查询并获取有关每个项目的元数据（因此允许您使用 Squarespace 内容经理插入此 'description')，该方法对于您的情况来说似乎不必要地复杂。

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。但是，一些较新的模板添加了可以关闭的 'Enable AJAX Loading' 设置。

Squarespace - 如何在悬停时在索引缩略图上显示 description/custom 文本

Squarespace - How to display description/custom text on index thumbnail on hover

javascript

thumbnails