feat(friend_card color):友链块颜色添加

[Catwb]

PR Type

• Bugfix.
• Feature.
• Code style update (formatting, local variables).
• Refactoring (no functional changes, no api changes).
• Build & CI related changes.
• Documentation.
• Translation.
• Other... Please describe:

Description

一时兴起，想给友链块添加个颜色，于是有了此处提交，样式如下。由于有颜色，原来的字体颜色在这种情况下显得对比度不高，因此将新开了个--link-color用于定义friend_card中的字体为黑。

Others

• Issue resolved:

• Screenshots with this changes:

• Link to demo site with this changes:

[Catwb]

在friends.yml中写入color: '颜色'即可（有单引号，不然颜色带个#识别不出来）

[Tikas]

非常感谢您对 Volantis 的支持！

经过初步的代码查看，个人认为实现此功能要是能进一步改进，效果会更理想些。

以下是我的个人见解，由于对 Hexo 不了解，同时也对 js 不懂，只存在纸上谈兵阶段，有错误的地方，还请多多斧正，谢谢！

从攻能上分析

我们可以进一步分析，为每一个友链的不同图标（或者是友链的图片？）分析出不同的主要颜色，以此颜色进行配队，实现每个友链不同的块颜色。

技术要点：

通过 js 对每个友链的图片判断出主颜色，再去遍历给每个友链块。

进一步分析可读性，如果只让字体颜色默认，可能需要对友链块的颜色进行一定处理，比如加亮等操作。

技术缺点：

在页面完成后，需要进一步加载 js 进行友链图片的分析，可能对性能比较差的设备不够友好。

从统一风格分析

如果只需要为每个友链都增加色块，个人认为以下的改变会让代码更友好：

1、命名。

--link-color 会很容易让我第一时间产生困惑，想到这是一个链接的鼠标放上去的颜色，还是链接本身的字体颜色。

考虑到原 css 配置文件中已有 --color-site-bg 命名，我们可以为友链的块颜色 css 变量采用以下命名：

~~--color-link-bg ~~

2、使用。

单独只说使用，那确实就是使用了。然而，这里要考虑的是，有些人不使用它。

我相信很多人为了追求整体页面的白色风格，在友链里突然出现颜色块，这会让他们非常困惑。

从使用的角度出发，我们应该做一个开关判断，只有需要使用颜色块的人，才加载此配置。

或许可以直接使用 class 的方式加载进去。

[Tikas]

在friends.yml中写入color: '颜色'即可（有单引号，不然颜色带个#识别不出来）

解决这个问题，可以从原有的代码中找到答案，比如：$color-meta

通过查看 $color-meta 的出处，我们很容易找到此问题的解决方案。

[Tikas]

很抱歉，前面由于我的粗心，导致理解错误。

当我再次阅读原文时：

由于有颜色，原来的字体颜色在这种情况下显得对比度不高，因此将新开了个--link-color用于定义friend_card中的字体为黑。

才发现，原来合名的定义本身就是字体。

非常抱歉，理解错了本意。

[Catwb]

我们可以进一步分析，为每一个友链的不同图标（或者是友链的图片？）分析出不同的主要颜色，以此颜色进行配队，实现每个友链不同的块颜色。

技术要点：

通过 js 对每个友链的图片判断出主颜色，再去遍历给每个友链块。

进一步分析可读性，如果只让字体颜色默认，可能需要对友链块的颜色进行一定处理，比如加亮等操作。

这个我更倾向于让用户手动定义，而不是通过js判断。

我相信很多人为了追求整体页面的白色风格，在友链里突然出现颜色块，这会让他们非常困惑。

单独只说使用，那确实就是使用了。然而，这里要考虑的是，有些人不使用它。
从使用的角度出发，我们应该做一个开关判断，只有需要使用颜色块的人，才加载此配置。

对于此处，我在模板语法中添加了判断，当主题配置文件中pages --> friends --> link_block_color被设置为true并且在yml下的color条目被设置了值才会在<a ...>中添加style=...进去，并且只会给单独的被赋予了值的才会被更改字体为黑，否则保持原样（顺便补齐了一下simple样式，差点忘记还有这个了www）。现在更改就像下面一样：

或许可以直接使用 class 的方式加载进去。
解决这个问题，可以从原有的代码中找到答案，比如：$color-meta
通过查看 $color-meta 的出处，我们很容易找到此问题的解决方案。

我在设置style的时候有关注到，$xxx是可在主题配置文件中定义的量，可在这里是动态需求，使用$xxx相当于写死颜色，设置color是为了支持不同颜色

[Tikas]

哇，您的处理效率，实在令人称赞！

非常感谢，为此，我再次查看了修改代码，以下评论只存在我的脑海里构思，现实中并没有进行代码运行（主要是我忘记 hexo 的配置怎么配了，之前有尝试过，发现加载不了第三方主题，很抱歉，我真的对 hexo 不了解，请原谅）

原本我是想建议直接使用 class 方式加入，以下是一个 未证实 的参考方案：

<a class="friend-card
  <% theme.pages.friends.link_block_color ? ' friend-link-color' : '' %>
"></a>

然后在友链的样式文件里定义 friend-link-color 的 css 样式。

如果没有局部的友链样式定义，全局改写，可能会影响缓存。

当然，保持原有的写法，也是可以的。

其实我目前会的是 Astro 构架，它可以很简单在前面进行判断，然后 class 里引入判断结果：

<a class={['friend-card', LINK-COLOR]}>

前面参考部分，为了方便在样式文件定义声明，在 class 前面加了 friend 以方便识别。

后面的是 Astro 构架，为了方便识别，全部大写处理，实际使用，更建议全大写是全局变量，这点要注意，此处只为方便识别。

[Catwb]

哇，您的处理效率，实在令人称赞！

不必夸赞，实际上我对Hexo的了解也处于初级阶段，现在都是通过现有的代码来对Hexo整个框架进行学习(相当于是边写边学，我发现我没法去阅读长篇大论的文档)，所以我在修改的时候用了下人工智能辅助，再手动修改一些，才这么快。

<a class="friend-card
  <% theme.pages.friends.link_block_color ? ' friend-link-color' : '' %>
"></a>

我通过了解后，知道这个可以在设置true的时候添加class，相当于<a class="friend-card friend-link-color">，但是还是同样的问题，那样似乎就把块颜色写死了，可实际上的操作是不同块可以设置不同的颜色，而非单一颜色

[Tikas]

哇，您的处理效率，实在令人称赞！

不必夸赞，实际上我对Hexo的了解也处于初级阶段，现在都是通过现有的代码来对Hexo整个框架进行学习(相当于是边写边学，我发现我没法去阅读长篇大论的文档)，所以我在修改的时候用了下人工智能辅助，再手动修改一些，才这么快。

<a class="friend-card
  <% theme.pages.friends.link_block_color ? ' friend-link-color' : '' %>
"></a>

我通过了解后，知道这个可以在设置true的时候添加class，相当于<a class="friend-card friend-link-color">，但是还是同样的问题，那样似乎就把块颜色写死了，可实际上的操作是不同块可以设置不同的颜色，而非单一颜色

确实，我对友链的配置文件不了解，按这理解，应该是每个友链都有不同的颜色定义？我先看看友链的配置文件。

哇，很抱歉，我之前一直理解错误，非常抱歉，给您带来困扰。

查看了这行代码，发现是遍历了一个 data 配置文件：

<% getList(site.data.friends).forEach((group, i) => { %>

很可惜，我并没有找到此文件，或许，我需要查看文档，才能进一步得知相关信息。

如果每个友链的配置颜色都不同，确实是您的代码最为理想。

为此，我们又要引发下一个分析：

如果提高阅读的可读性？

我们是否需要为每个友链样式的字都统一一下颜色，以提高整体的统一性？

同时，对于深色的颜色，是否需要做减淡处理（这个是 CSS 去处理，或许更好些？），还是说把字体的颜色反转？

加油，或许这一点突破了，很多人都想要体验您新加的功能。

[Catwb]

好的，我对暗黑模式做了处理，把--link-color也同步进来了，考虑对比度，我将其设置为偏一点点灰的白色。

对于新更改，将同时满足条件后会在class处添加一个color-bk-dark，然后在暗黑模式下会在满足条件的class处添加个filter: brightness(0.8);以弱化颜色效果，不过我能力有限，filter: brightness(0.8);实际上会弱化整个块的效果（不过暗黑模式下设置成0.8可能看不出来？）

我们是否需要为每个友链样式的字都统一一下颜色，以提高整体的统一性？

我新增加了一个unified_font用于交给用户是否统一黑色字体

查看了这行代码，发现是遍历了一个 data 配置文件：

<% getList(site.data.friends).forEach((group, i) => { %>

很可惜，我并没有找到此文件，或许，我需要查看文档，才能进一步得知相关信息。

此处文件由用户自行创建，并在里面编写

[Catwb]

发现点小错误（）

[Tikas]

非常感谢您的努力，我会在工作之余，尝试去测试它。

我是在 Mac OS 上测试，也会在 Win OS 里测试（工作的电脑）。

考虑到自己并非很熟练 Hexo，近期内会给您结果。

如果 7 天内没有其他维护人员参与，我会在 5 月 12 日（下个星期一）直接合并此 PR，以作为最后的合并期限。

感谢您的付出，为所有 Volantis 使用者和开发者同您说声：谢谢！

[Catwb]

好的owo