需求背景

需求背景

现存的导航栏支持分级结构，但是对每一个栏目进行颜色设置并没有很友好的暴露出来。用户在需要重点标注的导航上往往是写代码更新，得自己在界面上吸取颜色，然后编辑代码更新，不是很友好。

1. 抛出问题

怎么对现存的链接进行重点颜色标记呢？

众所周知，前端颜色设置需要对网页的css进行更新，才能够让我们看到想要的效果。那么我要想精准的控制某个导航子单元，就需要精准的知道选中的是哪一个。css选择器可以辅助我们实现这一效果。

.nav_xxx a[href="/collections/xxxx"] {
    color: red;
}

2. 如何设置

需要知道两件事

Q: 如何选择我们想要的collection链接
A: 我们在schema中，可以设置type为collection_list, 这样配置的时候可以选择多个collection
Q: 将我们选择的collection链接填充正确的颜色
A: 我们在schema中，可以设置type为color, 这样配置的时候会以选择器的形式出现

一个如何配置？

.header .list-menu a[href="/collections/add"]::before {
    content: '🔥';
}
.header .list-menu a[href="/collections/add"] {
    color: red;
}

那如何做到整体去配置呢？

知道一个怎么去配置，后面多个整体配置就不难了。

我们找到导航栏所在的位置，header.liquid
如图所示位置，加我我们配置项，注意后面的逗号

代码作用: 在后台显示我们我们的配置选项

{
  "type": "collection_list",
  "id": "important_collections",
  "label": "导航栏需要重点标记的collection"
},
{
  "type": "color",
  "id": "important_collections_color",
  "label": "导航栏需要重点标记的颜色"
}

如图所示位置加入我们的css样式

代码作用: 更新网站前端重点样式

{%- for collection in section.settings.important_collections -%}
.header .list-menu a[href="/collections/{{ collection.handle }}"]::before {
    content: '🔥';
}
.header .list-menu a[href="/collections/{{ collection.handle }}"] {
  color: {{ section.settings.important_collections_color }};
}
{%- endfor -%}