Question

我不知道你们是否已经搞乱了Squarespace Cover Pages，但是他们很难在代码方面进行导航。我正在做一个只需要封面和视频的独立宣传网站，所以我使用的是＆＃34; Premier＆＃34;封面。但是，出于法律原因，我必须拥有版权信息的页脚和我们隐私声明的链接。我最初的想法是使用带有css :: after的标题注入来包含一个完整的宽度div，但我希望封面仍然占据整个屏幕，并且用户可以向下滚动以查看页脚。

我尝试修改的一个示例是https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html，使用此代码：

<style>
#collection-559df309e4b026e5cd65a4b4 
[data-slide-id="559df309e4b026e5cd65a4b5"]
.sqs-slice-group.group-social::after {
  content: "some general text";
  padding: 5px 0;
  margin: 0 auto;
  text-align: center;
  font-size: 10px;
  color: #fff;
}
</style>

我将我的收藏ID和data-slide-id换成了这段代码，但是它放了＆＃34;一般文字＆＃34;阻止在播放按钮的顶部以及屏幕的右上角。我试过改变元素无济于事 - 任何帮助都会受到赞赏。

Answer 1

如果我愿意避免使用Javascript，我会做什么。将以下HTML插入＆＃34;代码注入＆＃34;封面的标题区域。这将添加一个显示在主要内容区域下方的div，以便用户必须向下滚动才能看到它。

<div id="coverFooter">
    <a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">&copy; 2016 Your Company, LLC</span>
</div>

<style>
    #coverFooter {
        position: absolute;
        z-index: 1;
        top: 100%;  
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: white;
        box-sizing: border-box;

        text-align: center;
        padding-right: 30px;
        padding-left: 30px;

        /* Use this for right aligned text instead.
        text-align: right;
        padding-right: 60px;
        padding-left: 60px;
        */
    }

    #coverPP {
        white-space: nowrap;
    }

    #coverCR {
        margin-left: 10px;
        white-space: nowrap;
    }
</style>

Here is a working example，我将在线保留一周。

您当然希望修改href链接，版权文本以及CSS规则（如颜色和填充值）。

请记住，这是将coverFooter div注入body元素的顶部，尽管CSS使其显示在底部。这可以鼓励搜索引擎将div中的文本索引为SERPS中的页面描述。请务必添加＆＃34;搜索引擎说明＆＃34;在设置 - ＆gt;下基本是为了帮助减轻这种情况，并密切关注SERPS中的页面描述。如果这成为一个问题，请将CSS保留在标题注入区域中，但使用Javascript替换div HTML，它会在body元素的底部插入div。

最后，您要么链接到另一个域的隐私权政策，要么您必须选择＆＃34;添加更多页面＆＃34;并将隐私政策页面添加到＆＃34;未链接＆＃34;部分。

在Squarespace封面模板中添加一个简单的页脚＆＃34; Premier＆＃34;

1 个答案: