# 自定义链接文本格式的最佳方法？
**URL:** https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619
**Category:** Development
**Tags:** custom-header-links
**Created:** [2019 年5 月 1 日 14:31 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619 "2019-05-01T14:31:39Z")
**Posts on this page:** 7
**Page:** 1
### 作者：  [@alexs](https://meta.discourse.org/u/alexs)
#### 发布日期： [2019 年5 月 1 日 14:31 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/1 "2019-05-01T14:31:39Z")
自定义链接文本格式的最佳方法是什么？看起来编辑 CSS 并不是最佳方案，因为插件更新后更改将会丢失。
我希望将其设为粗体，并将文本颜色更改为与网站主题相匹配，这样有助于更好地融入整体设计。
目前链接显示如下：
而我希望它看起来像这样：
如果还能根据主题自定义文本样式那就更好了。我有一套深色主题和一套浅色主题，每种主题都配有不同的字体颜色。我希望能够将文本颜色设置为与当前主题相匹配。
---
### 作者：  [@dax](https://meta.discourse.org/u/dax)
#### 发布日期： [2019 年5 月 2 日 19:22 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/2 "2019-05-02T19:22:04Z")
> [@alexs](#):
>
> 自定义链接文本格式的最佳方法是什么？看起来编辑 CSS 并不是最佳方案，因为当插件更新时，这些更改将会丢失。
您需要创建一个包含您更改的新主题组件，然后将其添加到与“自定义标题链接”相同的主主题中。
---
### 作者：  [@alexs](https://meta.discourse.org/u/alexs)
#### 发布日期： [2019 年5 月 3 日 16:23 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/3 "2019-05-03T16:23:04Z")
谢谢！我已经完成了，效果非常好。
出于好奇，网站是如何选择使用哪个 CSS 的？如果标准主题组件包含会将字体颜色设置为 `$header_primary` 的 CSS，例如：
```plaintext
.headerLink {
list-style: none;
a {
padding: 6px 10px;
color: $header_primary;
font-size: $font-up-1;
}
}
```
那么它是如何知道要使用我新组件中的 CSS 而不是上面的 CSS 呢？
```plaintext
.headerLink {
list-style: none;
a {
color: #7A7A7A;
}
}
```
---
### 作者：  [@ajmuir](https://meta.discourse.org/u/ajmuir)
#### 发布日期： [2021 年2 月 6 日 14:24 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/4 "2021-02-06T14:24:55Z")
> [@Johani](#):
>
> > [@](#):
> >
> > 我注意到标题栏的颜色使用了 `$primary` 而不是 `$header_primary`。对于此主题而言，使用后者更为合理。
>
> 已合并，感谢你的反馈 👍
你好 @Johani - 这个问题是否仍然存在？我的实例似乎不愿意采用 `$header_primary` 颜色，而且奇怪的是，即使我将 `$primary` 设置为我想要的颜色（白色），它仍然顽固地显示为黑色 🙃！
---
### 作者：  [@manuel](https://meta.discourse.org/u/manuel)
#### 发布日期： [2021 年2 月 10 日 10:25 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/5 "2021-02-10T10:25:30Z")
这很可能与颜色声明从 SCSS 切换到 CSS 变量有关。在自定义 CSS 中赋值 $header\_primary 不起作用，但如果您使用
```plaintext
.custom-header-links .headerLink a {
color: var(--header_primary);
}
```
颜色就能正确生效。
---
### 作者：  [@Daniel\_R](https://meta.discourse.org/u/Daniel_R)
#### 发布日期： [2021 年2 月 11 日 00:37 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/6 "2021-02-11T00:37:33Z")
这个解决方案对我来说没有生效。您是将此添加到主题的自定义 CSS 中吗？
---
### 作者：  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### 发布日期： [2021 年2 月 11 日 17:23 UTC](https://meta.discourse.org/t/best-way-to-customise-the-formatting-of-the-link-text/277619/7 "2021-02-11T17:23:26Z")
> [@manuel](#):
>
> 这可能与颜色声明从 SCSS 切换到 CSS 变量有关。
是的，确实如此。该组件现在使用 CSS 自定义属性，应该能为您修复此问题，@Daniel_R，您只需更新该组件即可。