# 求对新网站的反馈

**URL:** <https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518>\
**Category:** Community Building\
**Created:** [2024年四月5日 01:42 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518 "2024-04-05T01:42:41Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 13:26 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/21 "2024-04-05T13:26:45Z")

</div>

> [@Heliosurge](#):
>
> 正如这个主题中的一位用户在俄勒冈州一样

是的，我一读到这句话就这么想了。我也会看看你的网站！我实际上是从 Air 主题开始的，并且用 CSS 等进行了相当多的自定义，但与我现在的 Air 主题相比，我觉得它太“基础”了，这对我来说很奇怪，因为我通常喜欢极简主义，哈哈。

> [@Heliosurge](#):
>
> 所以一天中的时间也可能影响速度。

当 @Lilly、@bryce 和 @omarfilip 说它很慢时，那是在我自己的特定夜晚时间，然后大约在服务器托管的同一时间。如果现在不麻烦的话，我想请你 @Heliosurge，以及 @daemon 和 @merefield 在 12 小时后，当其他人说它很慢的时候，如果你不忙并且醒着，可以去看看吗，哈哈？我非常想知道这是否是时间问题。

> [@daemon](#):
>
> 对我来说，你的网站瞬间就加载好了。

听到这个真是太棒了！尤其是在服务器托管地遥远的另一端。

> [@merefield](#):
>
> 对我来说也很好。

太棒了！！你还有其他反馈/建议吗？

---

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [2024年四月5日 13:30 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/22 "2024-04-05T13:30:55Z")

</div>

我刚试了一下，现在加载几乎是即时的。起初我以为只是从内存缓存加载的，但似乎不是。

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 13:34 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/23 "2024-04-05T13:34:17Z")

</div>

啊，好的。是的，奇怪。这似乎指向一个与时间相关的问题。考虑到服务器托管地的时间以及那个小时大多数人可能都在线，这说得通。不过……像百万/十亿美元级别的公司应该不会有这个问题吧，不管是什么时间？我的意思是，我曾浏览过一些大型网站，它们有时会显得很慢，但这比任何事情都罕见。

---

<div class="post-metadata">

**Author:** ![MikeNolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikenolan/32/297597_2.png) [@MikeNolan](https://meta.discourse.org/u/MikeNolan)\
**Post date:** [2024年四月5日 14:45 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/24 "2024-04-05T14:45:55Z")

</div>

对我来说，在内布拉斯加州使用 500mb 服务加载速度也非常快。

---

<div class="post-metadata">

**Author:** ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)\
**Post date:** [2024年四月5日 15:03 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/25 "2024-04-05T15:03:52Z")

</div>

对我来说是凌晨3点，那是我通常睡觉的时间。 😉

---

<div class="post-metadata">

**Author:** ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)\
**Post date:** [2024年四月5日 15:38 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/26 "2024-04-05T15:38:04Z")

</div>

现在太平洋夏令时间上午 8:30，加载速度很快。

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年四月5日 15:51 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/27 "2024-04-05T15:51:17Z")

</div>

对我来说，页面加载很快。👍 看起来不错。

关于 Discourse，我不太喜欢标签的样式（纯属个人意见）：

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/a/d/dad1dc9f58984940b58e86cfdd64c870a7517f5d.png)

- 它是标签；我不期望它们在这里占据整个宽度。
- 它在视觉上吸引了你很多注意力。
- 对比度问题——它不是超级易读。

随机示例：

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/c/a6c85609ca4cc6425513654fb83de59c5db7c996.png)

祝你好运！

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 15:56 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/28 "2024-04-05T15:56:14Z")

</div>

感谢您的反馈！  
是的，我实际上尝试过调整标签的宽度，但无法弄清楚如何在其调整大小后将其居中。颜色方面，我找不到更好的颜色来搭配浅色和深色模式。如果我在浅色模式下使框变浅，它在深色模式下会太亮并导致相同的问题。

例如，如果我检查元素标签，并将 `max-width` 属性更改为 40%，它在视觉上会更好，但我无法弄清楚如何将整个元素居中，因为每次我尝试时，它只会移动文本，而不是它后面的框。

---

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [2024年四月5日 16:32 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/29 "2024-04-05T16:32:09Z")

</div>

要居中这些标签，您可以使用 flexbox 属性。这些标签位于一个父容器内，该父容器已设置为 `display: flex`。

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/9/0690000054003737a5581e71b1cc74bb12094af3.png)

Flexbox 可以非常轻松地控制子元素在容器内的排列方式。开发者工具中有一个方便的功能，您可以点击 `display: flex` 旁边的小图标，它会弹出一组控件，以便您查看哪个控件能产生期望的效果。

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/1/5e13515f791bd6a5d335db4909cff4b7d3f322de.png)

在这种情况下，`justify-content: center` 可以实现此目的：

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/1/8/818bb08ba73407f69803a1a97cb2fc6c08c99399.png)

请注意，它也适用于多个标签：

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/2/3/523e3e36a112970d1e347d590452b0b89f05b44c.png)

如果您想了解更多细节，[这里](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 是一个很好的经典 flexbox 教程。它是您 CSS 工具箱中非常有用的工具 😁

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 16:54 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/30 "2024-04-05T16:54:29Z")

</div>

哦，太感谢你了！是的，显示两个标签比居中显示一个标签看起来不那么尴尬，但我说实话，我没看到很多人在大多数帖子中使用多个标签。嗯……可能需要想办法用 CSS 之类的方法在那里显示标签，然后显示主题/帖子的其他部分，这样就有两样东西了。或者也许完全隐藏它，但唉。

或者更好的是，我可以用它替换类别吗？

 ![tttt](https://global.discourse-cdn.com/meta/original/4X/6/7/4/6742131376eca2f6a4f62b44f9848f8d7e5c193a.png)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年四月5日 17:39 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/31 "2024-04-05T17:39:48Z")

</div>

> [@45thj5ej](#):
>
> 颜色方面

我建议您使用 Discourse 的 CSS 颜色变量，因为它们与暗黑模式的兼容性更好。（您可以检查任何元素并向下滚动）

 ![3qCXLkkcIW](https://global.discourse-cdn.com/meta/original/4X/5/7/1/571d2d2998462d8638122832ca87df26d72dcad9.png)

* * *

居中：_编辑：Bryce 已经回答了这个问题！_

```css
.discourse-tags {
    justify-content: center;
}

```

```css
color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/f/7/2f7045c78de9df48cddd2cf443681c16fff86213.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/1/a/b/1abe6cc2e19e6cf566a4602700cb2ad4f0237271.png)

您还可以使用 `dark-light-choose(<lightcolor>, <darkcolor>)` 函数来定义浅色和深色，这样在设置了暗黑模式或未设置时就会使用正确的颜色。

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 17:56 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/32 "2024-04-05T17:56:46Z")

</div>

> [@Arkshine](#):
>
> 您还可以使用 `dark-light-choose(<lightcolor>, <darkcolor>)` 函数来定义浅色和深色，以便在启用或未启用黑暗模式时使用正确的颜色。

嗯，我这样做错了吗？当我将此粘贴到“检查元素”中时，我得到：

 ![ttt](https://global.discourse-cdn.com/meta/original/4X/8/0/5/805c9349dc5d616b7af829146b528034899108a7.png)

`background: dark-light-choose(#f0f2f5, #3a3b3c) !important;`

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年四月5日 18:08 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/33 "2024-04-05T18:08:37Z")

</div>

这是 Discourse 核心中可用的 [SCSS 函数](https://sass-lang.com/documentation/at-rules/function/)。您需要在主题 CSS 中使用它，以便进行处理。如果直接在浏览器中使用，它将无法工作。

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [2024年四月5日 19:30 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/34 "2024-04-05T19:30:22Z")

</div>

您的网站加载速度仍然很快。只看到很短的时间。

> [@45thj5ej](#):
>
> 是的，我一读到就这么想了。我也会看看你的网站！我实际上是从 Air 主题开始的，并且用 CSS 等进行了相当多的自定义，但与我现在的 Air 主题相比，我觉得……似乎太“基础”了，这对我来说很奇怪，因为我通常喜欢极简主义，哈哈。

单点添加组件很棒。你比我领先，因为我还在学习代码方面。在此之前很久，我只接触过基础知识；qbasic 和旧的 turbo Pascal。但我正在努力。

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 22:12 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/35 "2024-04-05T22:12:11Z")

</div>

嗯，好的，所以我的 .scss 文件中有：

```plaintext
.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

```

重点是最后两行。所以，看起来对于浅色和深色模式，它都停留在 #f0f2f5 颜色而不是在深色模式下切换到 3a3b3c 颜色。有什么想法为什么会这样吗？

在“检查元素”中，该属性仍然是：  
`background: #f0f2f5 !important;`  
我什_么_都试过了，包括上面你链接的 URL，并尝试将它们设为 $tagbglight 和 $tagbgdark 并定义它们，但仍然没有成功。

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 23:24 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/37 "2024-04-05T23:24:50Z")

</div>

`dark-light-choose('#f0f2f5', '#3a3b3c')` 得到的结果是：

 ![ggggg](https://global.discourse-cdn.com/meta/original/4X/e/c/c/eccd49eadb55c72e3a5bdeb358f6b4cb11eb556e.png)

这和我之前得到的结果差不多。  
注意：检查元素显示的是双引号。在代码中，我像你一样使用了单引号。

---

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [2024年四月5日 23:41 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/38 "2024-04-05T23:41:08Z")

</div>

嗯，既然您在最终结果中得到了引号，也许可以试试这个：

`dark-light-choose(unquote(\"#f0f2f5\"), unquote(\"#3a3b3c\"))`

不过，我不确定这是否能帮助它选择正确的颜色！

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年四月5日 23:44 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/39 "2024-04-05T23:44:13Z")

</div>

这会移除引号，但在切换模式时，背景色仍然是 #f0f2f5：#f0f2f5

---

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [2024年四月5日 23:46 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/40 "2024-04-05T23:46:37Z")

</div>

这很奇怪。看起来函数本身正在比较主色和次色的亮度。我不确定为什么它不起作用。🤔

```plaintext
@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年四月5日 23:51 UTC](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518/41 "2024-04-05T23:51:22Z")

</div>

我认为您需要在 `color_definitions.scss` 中定义一个 CSS 变量。

> [@awesomerobot](#):
>
> 由于 SCSS 的编译方式，自定义的暗色/亮色定义需要添加到主题内的 `color_definitions.scss` 中，而不能在其他 scss 文件中使用。

例如：

```css
:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

```

然后您可以使用：

```css
background: var(--bg-custom) !important;

```

[上一頁](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518.md?page=1)

[下一頁](https://meta.discourse.org/t/seeking-feedback-on-my-new-site/302518.md?page=3)