简单响应式页脚

Discourse · 2018 年8 月 28 日 08:19

|||
|-|-|-|
| | 摘要 | Easy Responsive Footer 将允许您仅使用纯文本构建完全响应式的页脚。|
| | 预览 | 在 Discourse 主题创建器中预览 |
| | 仓库链接 | https://github.com/discourse/Discourse-easy-footer|
| |Discourse 主题新手？ | Discourse 主题使用入门指南|

安装此主题组件

功能特性

桌面端

移动端

设置

名称	描述
heading	页脚中标题的文本 - 例如可以使用您的站点名称 - 最大长度 25 个字符
blurb	输入一段关于您社区的简短描述 - 最大长度 180 个字符
sections	要在页脚中显示的区块
small links	页脚底部的小链接，如服务条款和隐私政策
social links	您希望添加到页脚的社交媒体链接
show footer on login required page	如果您希望在需要登录的页面显示页脚，请勾选此设置（仅适用于您的站点为私有站点的情况）
svg icons	上述社交媒体链接设置中使用的 FontAwesome 7 图标列表。

此组件共有六个设置，可帮助您轻松配置它

1. 标题

页脚中标题的文本 - 例如可以使用您的站点名称 - 最大长度 25 个字符

2. 简介

一段关于您社区的简短描述 - 最大长度 180 个字符

3. 链接区块

添加链接区块。理想的区块数量为六个。每行一个项目，顺序如下：文本，标题
文本：显示在页脚中的内容
标题：鼠标悬停时显示的文字

4. 链接

为链接区块添加链接。每行一个项目，顺序如下：
父级，文本，URL，目标，标题
建议每个区块下的链接数量保持相近
父级：此链接所属的父区块名称。使用上方列表中的 text 值
文本：此链接显示的文本
URL：此项目链接的路径。也可以使用相对路径。
目标：选择此项目是在新标签页还是当前标签页打开。使用 blank 在新标签页打开，使用 self 在当前标签页打开。
标题：鼠标悬停时显示的文本。

5. 小链接

您可以在页脚底部添加小链接，如服务条款和隐私政策。每行一个项目，顺序如下：
文本，URL，目标
文本：小链接显示的文本
URL：链接的路径
目标：使用 blank 在新标签页打开，使用 self 在当前标签页打开

6. 社交媒体链接

以以下格式输入您希望添加到页脚的社交媒体链接：
提供商，标题，URL，目标
提供商：提供商名称，如 Facebook 或 Twitter
标题：鼠标悬停时显示的文本
URL：您希望链接指向的路径
目标：使用 blank 在新标签页打开，使用 self 在当前标签页打开

注意事项

我已将占位符项目保留为组件的默认值，以便您可以轻松查看您的设置应呈现的样子。
此组件将使用您主题的颜色方案来生成其中元素所使用的颜色。但所有元素都添加了唯一的类名，以便您随时覆盖某些样式。
由于此组件使用主题设置，这意味着我可以在未来对其进行更新以修复或改进它，而您输入的数据不会丢失

由我们托管？ 主题组件可在我们的 Pro、Business 和 Enterprise 计划中使用。

Johani · 2020 年11 月 29 日 12:24

我提交了一些修复。

主要变更：

该组件现在使用 CSS 变量，因此兼容深色模式
修复了媒体查询中的一些问题，解决了 @mbauman 报告的错误
添加了一个设置，允许您控制是否在需要登录的页面显示页脚

image1102×307 37.7 KB

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

这里的原因是 CSS 优先级。您的 CSS 针对 .wrap 并生效，但该组件也有针对 #main-outlet 的 CSS，并为其添加了一些属性，以确保即使在短页面中页脚也能保持在底部。

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

#main-outlet 选择器的优先级高于您的 .wrap 选择器——因为它是基于 ID 的，所以会覆盖您的样式。

您可以通过添加以下 CSS 来解决此问题：

#main {
  #main-outlet {
    width: 1200px; // 或您希望使用的任何宽度
  }
}

当然可以，只需在设置中删除所有不需要的额外列，您就会得到三列。

我无法复现此问题，但该错误表明您的设置不正确。请仔细检查并确保您已按照每个设置下方的说明操作。如果您的问题仍然存在，能否提供您遇到问题的网站链接？

\u003chr\u003e

我进行了一些清理工作，并删除了那些在您更新组件后将会被修复的 bug 回复。如果您的问题仍然存在，欢迎再次发帖讨论。

dadberg · 2021 年2 月 9 日 11:41

我想知道 [Easy Footer Theme Component by Joe] 中的标题文本（This is a header）是否可以替换为徽标。

我尝试导出该组件以修改 hbs 文件，但未能成功，我想我需要一些提示。

非常感谢您的任何见解

dax · 2021 年2 月 9 日 13:17

取决于您想做什么，您可以尝试以下方法：

在“简易响应式页脚”主题设置中删除 Blurb 设置中的文本。如果需要，您甚至可以删除 Heading 设置中的文本。

创建一个新的主题组件，并在 Common > CSS 选项卡中添加

.custom-footer .first-box .blurb::before {
    background-image: url(LOGO-URL);
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    /*根据您的徽标大小调整以下设置*/
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
}

结果将是这样的：

dadberg · 2021 年2 月 9 日 13:43

已解决！

我对开源生态系统的信念，最初正是因像您这样优秀的人而得以确立。

Jcava5 · 2021 年4 月 2 日 00:02

应该提供一个选项，允许通过 CSS 自定义背景和文字的颜色。默认情况下，它与标题不匹配。

除此之外，它运行得非常出色！谢谢！

thaidb · 2021 年4 月 2 日 08:10

你好 Joe，我们可以在这里添加更多小部件吗？

b481 · 2021 年5 月 4 日 09:43

这导致即使我在组件中指定了样式，徽标仍出现在搜索结果的 .blurb::before 中：

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(图片 URL);
}

有没有办法确保徽标不会出现在搜索结果中，但仍保留在页脚中？

littleviolette · 2021 年8 月 28 日 17:42

感谢您提供如此出色的页脚！我在显示 Font Awesome 的 TikTok 图标时遇到了问题。我尝试在 SVG 图标设置中添加 fab-tiktok、fa-tiktok、fas-tiktok 和 tiktok，但都无法正确渲染 TikTok 图标。

感谢您的帮助！

bekircem · 2021 年9 月 14 日 22:29

我想修改标题的 25 个字符限制。我将通过 CSS 来设置标题样式。最简单的方法是什么？

keegan · 2021 年9 月 14 日 23:45

@bekircem
超出字符限制可能会导致一些问题，但您可以尝试以下方法：

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

不过，使用 visibility: hidden 仍然会保留空白空间。如果您的标题较大，可以尝试以下替代方案：

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

bekircem · 2021 年10 月 20 日 22:20

是否可以在没有 href 属性的链接部分添加文本？

IAmGav · 2021 年10 月 20 日 22:50

只需在 URL 所在的位置添加一个 #

bekircem · 2021 年10 月 20 日 22:52

在这种情况下，它仍然显示为可点击的 URL。有没有一种方法可以添加内容而不生成 a 标签？

Johani · 2021 年12 月 9 日 10:51

您可以将此 CSS 添加到您的主题中的某个位置

.custom-footer a[href="#"] {
  pointer-events: none;
}

pfaffman · 2021 年12 月 15 日 14:26

我提交了这个：

这应该可以修复一个缺少 pluginId 的弃用问题。我没有测试它~~，但它看起来是对的。~~

编辑：但它根本不对。

umbergerba · 2022 年2 月 8 日 17:01

FYI BUG >>> 如果我添加以下内容…“Community, Tags List, /tags, self, List of all Tags”…前端会显示一条水平线。如果我删除“Tags List”之间的[空格]并将其更改为“TagsList”，则HR会消失。

mkschulze · 2022 年2 月 12 日 10:14

您好，我在社交链接和 Fontawesome 图标方面遇到了两个问题。

我尝试在社交区域设置其他 Fontawesome 5 图标，但它们没有显示出来。
我想要 <i></i>
我设置了 GitHub 链接，它已经在页面上显示了图标，尽管我实际上并没有在 svg-icons 列表中添加图标。

编辑：通过仅使用图标名称“home”已解决

AquaL1te · 2022 年5 月 7 日 16:58

当在手机上使用此主题组件时，宽度未设置为屏幕宽度。宽度会扩展，几乎达到桌面显示器的大小。

可以在此处进行测试：https://forum.tzm.community/

请确保在手机上打开（或使用浏览器的调试选项，在 Firefox 中，您可以使用 Galaxy Note 20 Linux 配置文件触发此错误）。

dax · 2022 年5 月 11 日 19:43

该组件已修复。您需要更新它。

话题		回复	浏览量
Custom Header Links (icons) Theme component official , custom-header-icons	119	31663	2025 年8 月 4 日
FKB Pro - Social theme Theme	473	31510	2026 年4 月 29 日
Custom Header Links Theme component official , custom-header-links	67	52551	2026 年2 月 28 日
Discourse Category Headers theme component Theme component	191	17628	2026 年3 月 7 日
⬇️ Dropdown Header Theme component pavilion	69	7594	2026 年3 月 2 日

简单响应式页脚

功能特性

设置

注意事项

相关话题