给网站制作并添加 zibll 子比主题同款动态描边 logo

前言

添加一个打开网站就自动描边展示的标志，这个方法相对简单，直接照搬子比官网的代码修改即可。话不多说，直接开始。

制作方法

1️⃣使用 Ai 制作好图标及文字。不会使用 Ai 创作的可以去简单学一下，如果会 Ps 这个也是差不多的，都是平面设计软件。

2️⃣将设计好的内容保存为 SVG 格式。

3️⃣使用 Visual Studio Code 打开保存的 SVG 文件。在左侧工具栏第五个中去查找并下载 SVG 插件。

4️⃣按下 Shift+Alt+F 格式化代码。按下按键时可能会弹窗提示安装插件，如果前面安装了 SVG 插件，直接选择该插件即可。

5️⃣把 logo 代码中的每个整体用 <g class=" "> </g> 隔开，并把每个整体里的各部分分别命名。比如 <g class="c"> 是“芝士导航”四字整体，里面的 "c-1" 是“芝”字。

6️⃣把子比官网下载的 logo 打开，将 <style> 的代码复制，并替换到你的 logo <style> 代码中。

7️⃣然后修改各个部分的代码即可，下图是“芝士导航”即 <g class="c"> 的部分（这里使用的是跟 icon 一样的代码，原因请看文末问题解答），根据实时预览效果去修改。

通过右上角的两个按钮去分窗口查看或切换，一个窗口编辑代码，一个窗口查看预览。

8️⃣这里是网址浮现的修改。

修改完成之后保存即可上传到网站中去使用了，如果过程中或教程有问题请留言。

教程结束！

问题解答

Q：子比官网文字部分为什么是笔画出现，教程里换成了 icon 一样的代码？

A：这个是因为子比的 logo 文字部分使用的是一条路径再进行描边（如下图），我制作的中文已经转成跟 icon 一样的形状了。如果你也想跟子比的一样，只需要 Ai 里使用钢笔工具绘制好文字的路径，设置描边。Visual Studio Code 里给一样的代码即可。