css - 添加一个简单的页脚到 Squarespace 封面模板 "Premier"

Question

我不知道你们是否搞砸了 Squarespace Cover Pages，但是伙计，他们很难通过代码进行导航。我正在做一个只需要封面和视频的独立宣传网站，所以我使用的是“Premier”封面。但是，出于法律原因，我必须在页脚中添加版权信息和指向我们隐私声明的链接。我最初的想法是使用 header injection 和 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 和数据幻灯片 ID 换成了这段代码，但它把“通用文本” block 放在了播放按钮的顶部以及屏幕的右上角。我已尝试更改周围的元素但无济于事 - 任何帮助将不胜感激。

Answer 1

如果我不想使用 Javascript，这就是我会做的。将以下 HTML 插入封面的“代码注入(inject)”标题区域。这将添加一个显示在主要内容区域下方的 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 注入(inject) body 元素的顶部，尽管 CSS 使其出现在底部。这可能会鼓励搜索引擎将 div 中的文本作为您在 SERPS 中的页面描述进行索引。请务必在“设置”->“基本”下添加“搜索引擎描述”，以帮助缓解这种情况，并留意您在 SERPS 中的页面描述。如果这成为一个问题，请将 CSS 保留在 header 注入(inject)区域，但将 div HTML 替换为将 div 插入 body 元素底部的 Javascript。

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