### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 20:15 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/1 "2024-03-25T20:15:40Z")
您好，我不想用多个主题来垃圾邮件论坛，所以我作为 Discourse 论坛用户/会员有 4 个主要问题：
> **1) 有没有办法从我的网站上删除所有社交媒体的痕迹？**
>
> 我不确定这是 Discourse 内置的还是主题特定的，但在源代码中，如果您查看源代码，每个页面都有 5 处提及 Twitter 和 1 处提及 Facebook。它们是：
>
> ```plaintext
> “桌面”部分，但当我保存该条目时，我收到了：
我无论如何也弄不明白 `@import` 的工作原理。我甚至进入了我的 VPS 上 Discourse 安装的服务器，创建了一个名为“scss”的文件夹，并将代码尝试导入的文件放在那里，然后重启了我的论坛，但它仍然不起作用。
**3)** 如何让论坛在我的 VPS 服务器重启后自动重新启动？服务器是 Ubuntu 22.04。在研究时，我发现了[这个回复](https://meta.discourse.org/t/how-to-restart-discourse-after-server-reboot/105181/2?u=discoursequestions) 在这里的论坛上，但我按照它说的做了，我一定是眼花了，因为我没有像评论中建议的那样在安装页面上看到如何做到这一点。
**4)** 如何将我的整个论坛向下移动一些？在桌面上看起来不错，但在移动设备上，它看起来就像顶部的评论一样（因为新用户似乎每帖只能添加 1 张截图），圆角触及了顶部的栏……
我尝试在主题 CSS 的 Head 部分添加一个换行符（`
`），但这移动了_所有_内容，包括顶部的导航栏，而我希望它保持在顶部。
我想这就是我目前所有的问题。谢谢。
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 20:16 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/2 "2024-03-25T20:16:15Z")
关于上面第 4 点，这是我提到的截图：
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024年三月25日 21:27 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/3 "2024-03-25T21:27:29Z")
你好，欢迎来到 Meta 👋
1. 我没有问题的答案。不过，我也许会弄错。我不认为这些 OpenGraph meta 和 facebook\_app\_id 在这里存在隐私问题。🤔 希望其他人能给出更好的见解。
2. 你没有创建一个_远程_主题。它存在于一个 GitHub 存储库中。你可以创建自己的文件，例如将 CSS 分成多个文件放在 `scss` 目录中。然后，`@import` 会自动引用该目录。
3. 正如 Falco 所说，默认情况下，如果你遵循标准安装，Docker 总是会在重启时启动。没有说明可以查找，因为这是默认行为。你能确认你的论坛在重启时没有启动吗？
4. 首先，在启用安全模式的情况下，所有内容是否都显示正常？只是为了确保这与任何自定义设置无关。这将是找出问题的第一步。
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 21:46 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/4 "2024-03-25T21:46:55Z")
感谢您的回复。关于第 4 点，我猜想这是一个 CSS 问题或其他问题，因此我不确定如何添加间隙才能让移动网站看起来不那么糟糕。启用安全模式后，它仍然会发生（第一个选项未选中）。
关于第 1 点，它们可能不算“隐私问题”，但我只是不希望在任何地方提及社交媒体。
#2：啊，好的，真有趣……我大约 5 小时前编辑一个组件时就是这样做的，但不知道主题也是这样工作的。我马上试试。
嗯……我的 Docker 在我的 VPS 启动后没有自动启动，真奇怪。
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [2024年三月25日 21:53 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/5 "2024-03-25T21:53:28Z")
> [@Question42](#):
>
> 您好，我不想在论坛上发布多个主题来刷屏，所以作为一名Discourse论坛的新用户/会员，我有4个主要问题：
嗯。如果更多人走这条路，论坛就会充斥着无法使用的帖子标题。
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年三月25日 22:03 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/6 "2024-03-25T22:03:27Z")
@Question42，最好为每个问题创建一个主题。这不仅能使主题标题更相关，还能让人们更容易参与讨论，并且对将来搜索类似问题的人来说也更清晰。 👍
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 22:05 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/7 "2024-03-25T22:05:47Z")
快速评论 #2 点：
我 fork 了 Air 主题，自己做了修改，上传到自己的仓库，然后在管理面板的主题部分用 GitHub 链接安装了它……但现在我无法访问 CSS/HTML，因为它现在是一个非本地主题。我该如何解决这个问题？或者我_必须_使用你提到的组件方法吗？
导入的 GitHub 主题无法编辑本地 CSS/HTML 吗？因为至少在本地，我可以在管理面板中轻松编辑 CSS/HTML，只是不能做 `@import` 的事情。但现在我做了你提到的远程方法，却无法编辑主题来添加 `@import` 代码，而这正是我的目的。😅
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [2024年三月25日 22:21 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/8 "2024-03-25T22:21:30Z")
关于 #4：
您可以尝试为 .list-controls 类添加上边距。
```plaintext
// 在移动 CSS 中
.list-controls {
margin-top: 1rem;
}
```
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 22:25 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/9 "2024-03-25T22:25:42Z")
所以，在我的 mobile.scss 文件中，我唯一提到的 `.list-controls` 是：
```css
.categories-list .list-controls {
background: var(--secondary);
padding: 0.5em;
border-radius: 8px;
}
.list-controls .nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
```
我应该把你的代码放在哪一个里面？
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [2024年三月25日 22:35 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/10 "2024-03-25T22:35:38Z")
您可以将其放在第一个选择器中。
或者另一个选项是这部分：
```plaintext
.list-controls .nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
```
可以重写为：
```plaintext
.list-controls {
.nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
}
```
然后，您可以在 .nav-pills 部分之前放置仅影响 .list-controls 的新声明。
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 22:39 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/11 "2024-03-25T22:39:33Z")
所以我可以添加
```plaintext
.list-controls {
margin-top: 1rem;
}
```
使整体看起来像这样：
```plaintext
.list-controls {
margin-top: 1rem;
.nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
```
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [2024年三月25日 22:43 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/12 "2024-03-25T22:43:05Z")
没错！不过看起来结尾还需要一个 `}`。
---
### Author:  [@Question42](https://meta.discourse.org/u/Question42)
#### Post date: [2024年三月25日 22:54 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/13 "2024-03-25T22:54:59Z")
所以，这是它在手机上给我的：
不幸的是，它使顶部/回复/活动栏/区域不再接触帖子，“最新”选项卡现在接触顶部。我们能否让顶部/回复/活动区域仍然接触帖子区域，但“最新”下拉框不接触顶部栏？
尽管它是因为弄乱了，“最新”区域看起来与主题区域合并得很好，如原始屏幕截图所示：
编辑：哦，天哪……让朋友在他们的手机（iPhone 13）上检查了网站，网站在他们的手机上看起来毁了，哈哈……呃 😅 但在我的手机上看起来“还好”（上面的截图，减去我想要修复的部分）。看起来他们的手机上的普通移动视图还可以，但在手机上使用桌面模式会让一切变得一团糟。
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [2024年三月26日 00:32 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/14 "2024-03-26T00:32:47Z")
嗯，很难确定还有哪些其他样式正在影响您的主题。如果您还没有看过，我建议您查看[本指南](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002)，特别是其中介绍如何使用浏览器的检查器（在开发者工具中——Chrome 中按 F12 键访问）的部分。它允许您查看应用于每个元素的样式，并打开和关闭它们以实时查看差异。
由于这与移动视图相关，您可以在大多数浏览器中从桌面模拟移动设备。这是 Chrome 中按钮的外观：
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [2024年三月26日 01:35 UTC](https://meta.discourse.org/t/how-do-the-import-s-work-with-scss/300871/15 "2024-03-26T01:35:25Z")
> [@Question42](#):
>
> 手机上的桌面模式会让一切变得一团糟
这似乎是意料之中的吧？桌面模式其实并不是为移动设备设计的。