Easy Responsive Footer

Discourse · 2018 年8 月 28 日 08:19

|||
-|-|-|
| 概要 | Easy Responsive Footer 允许您仅使用纯文本构建完全响应式的页脚。
| | 预览 | 在 Discourse 主题创建器上预览 |
| 存储库链接 | https://github.com/discourse/Discourse-easy-footer
| 对 Discourse 主题不熟悉？ | Discourse 主题使用入门指南

安装此主题组件

功能

桌面

移动设备

设置

名称	描述
heading	页脚标题文本 - 您可以使用您的网站名称作为示例 - 最长 25 个字符
blurb	输入关于您的社区的简短说明 - 最长 180 个字符
sections	要在页脚中显示的版块
social links	您想添加到页脚的社交链接
show footer on login required page	如果您希望在需要登录的页面上显示页脚，请选中此设置（仅当您的网站是私有时适用）
svg icons	上面社交链接设置中使用的 FontAwesome 5 图标列表。

此组件中有六个设置可帮助轻松配置它

1. 标题

文本页脚标题 - 您可以使用您的网站名称作为示例 - 最长 25 个字符

2. 简介

关于您的社区的简短说明 - 最长 180 个字符

3. 链接版块

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

4. 链接

将链接添加到链接版块。每行一个项目，顺序如下：
父级，文本，URL，目标，标题
最好保持每个版块下的链接数量相似
父级：此链接所属的父版块的名称。使用上面列表中的 文本 值
文本：此链接显示的文本
URL：此项目链接到的路径。您也可以使用相对路径。
目标：选择此项目是在新标签页中打开还是在同一标签页中打开。使用 blank 在新标签页中打开链接，或使用 self 在同一标签页中打开。
标题：鼠标悬停在链接上时显示的文本。

5. 小型链接

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

6. 社交链接

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

注意事项

我保留了组件的默认占位符项目，以便您可以轻松查看设置的外观。
此组件将使用您主题的配色方案来生成其中使用的元素的颜色。但所有元素都添加了唯一的类，以防您想覆盖某些内容。
由于此组件使用主题设置，这意味着我将来可以更新它来修复或改进它，而您输入的数据不会丢失

由我们托管？ 主题组件可用于我们的 Pro、Business 和 Enterprise 套餐。

Johani · 2020 年11 月 29 日 12:24

I pushed some fixes.

Key changes:

the component now uses CSS variables, so it’s dark-mode compatible
some fixes to media queries to fix the bug @mbauman reported
added a setting that allows you to control whether or not the footer is displayed on login-required pages

image1102×307 37.7 KB

The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.

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

The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use
  }
}

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.

dadberg · 2021 年2 月 9 日 11:41

I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated

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

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

Jcava5 · 2021 年4 月 2 日 00:02

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

huynhthai824 · 2021 年4 月 2 日 08:10

hello Joe, can weadd more widget same here

b481 · 2021 年5 月 4 日 09:43

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

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

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

littleviolette · 2021 年8 月 28 日 17:42

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

bekircem · 2021 年9 月 14 日 22:29

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

keegan · 2021 年9 月 14 日 23:45

@bekircem
Going beyond the character limit may break some things, but you can try:

.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;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

.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

Is that possible to add texts to link sections without href attribute?

IAmGav · 2021 年10 月 20 日 22:50

Just add an # where the url goes

bekircem · 2021 年10 月 20 日 22:52

In this case it still appears as a clickable url. Is there a way to add without getting the a tag?

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	31038	2025 年8 月 4 日
FKB Pro - Social theme Theme	452	27840	2025 年10 月 31 日
Custom Header Links Theme component official , custom-header-links	64	51395	2025 年7 月 9 日
Discourse Category Headers theme component Theme component	177	16493	2025 年11 月 1 日
⬇️ Dropdown Header Theme component pavilion	67	7066	2025 年10 月 9 日

Easy Responsive Footer

功能

设置

注意事项

相关话题