❌

阅读视图

发现新文章，点击刷新页面。

THYUU/星度主题精心设定第一期：自适应标识颜色特性

✇风记星辰
宇

前言

在 THYUU/星度主题里，仅仅对于顶栏的设定就有多种排版，具体可至主题品牌介绍站查看 https://theme.thyuu.com/ 查看顶栏的排版设定。而在顶栏标识区域里，除了引入常见的 IMG 图片外，主题还支持 SVG 格式并引入了变色特性，让标识根据不同的页面展示不同的颜色方案。这是一项很新颖的设计，也是星度主题为大家用心设计的表现之一。

若您不了解 SVG 格式图片，请继续往下看。若您了解，请直接查看本文第四节：点此跳转

什么是 SVG 及其特点

SVG 是一种基于 XML 的矢量图形格式。作为网页设计与前端开发的核心技术之一，SVG 凭借其矢量特性与灵活性，成为构建高清、动态图形的首选方案。SVG 是一种基于 XML 的矢量图形格式，其核心特点包括：

  • 无损缩放：无论放大多少倍，图形边缘始终清晰，解决了传统位图（如 PNG、JPG）的像素失真问题。
  • 文本可编辑：SVG 代码可直接通过文本编辑器修改，支持 CSS 与 JavaScript 动态控制，便于实现交互效果（如点击事件、动画）。
  • 轻量高效：文件体积小，适合网页加载优化，尤其在地图、图标等场景中表现突出。

SVG 核心语法与元素

SVG 本质是 XML 格式的文档，基本语法和结构规则相同，需包裹在标签内。但又有一些专属于 SVG 格式的标签，定义元素及其与属性。

基础结构

这有一个标准的 SVG 格式图：

<svg viewBox="0 0 500 500">
    <circle cx="100" cy="100" r="50" fill="#000" stroke="#000"></circle>
</svg>
  • viewBox 属性：控制可视区域，语法为 viewBox=”x y width height”，实现矢量自适应缩放
  • 所有元素存在 SVG 标签内

常用标签

属性名称作用描述
<defs>定义可复用的渐变、模糊等效果
<g>组合元素
<use>引用已定义图形

元素标签

属性名称作用描述
矩形 <rect>x 定位横坐标，y 纵坐标，width height 定义尺寸，rx/ry 设置圆角
圆形 <circle>cx 圆心横坐标，cy 圆心纵坐标，r 为半径
路径 <path> 最强大的元素，通过 d 属性定义贝塞尔曲线、多边形等复杂图形

CSS 属性

定义图形轮廓

属性名称作用描述常见值
stroke设置图形边框的颜色颜色名称（如 blue）、十六进制颜色代码（如 #0000FF）、rgb() 或 rgba() 等
stroke-width定义边框的宽度任何长度单位，如像素（px）、点（pt）、厘米（cm）等
stroke-opacity定义边框颜色的不透明度范围从 0（完全透明）到 1（完全不透明）
stroke-linecap定义线条末端的形状butt（平直末端，默认值）、round（圆形末端）、square（正方形末端）
stroke-linejoin定义线条相交处的形状miter（尖角连接，默认值）、round（圆角连接）、bevel（斜角连接）
stroke-dasharray定义边框的虚线模式由逗号或空格分隔的数字序列，表示线段和间隙的长度
stroke-dashoffset定义虚线模式的起始偏移量数值，表示偏移量
stroke-miterlimit当 stroke-linejoin 为 miter 时，限制斜接角的长度数值，表示斜接角的最大长度

定义图形填充

属性名称作用描述常见值
fill设置图形内部的填充颜色颜色名称（如 red）、十六进制颜色代码（如 #FF0000）、rgb() 或 rgba() 等
fill-opacity定义填充颜色的不透明度范围从 0（完全透明）到 1（完全不透明）
fill-rule定义填充区域的算法nonzero（非零规则，默认值）和 evenodd（奇偶规则）

如何适配星度主题变色标识

现在，你已经了解基本 SVG 的知识，当我们看到 SVG 图片的代码时，你可以轻松找到框架中包含颜色的属性 stroke 和 fill，我们就是针对这两个属性进行适配。

单色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill是直接删除 fill 属性，即可适配
2仅 stroke是stroke: var(--logo-color, var(--main-color))
3仅 fill 或仅 stroke否fill 或 stroke: var(--logo-color, #000)
4fill + stroke/可按上述酌情适配
#000 的位置具体颜色，请输入原 fill 颜色

双色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill 或仅 stroke是主色区域 fill 或 stroke: var(--logo-color, var(--main-color))
辅色区域 fill 或 stroke: var(--logo-color, var(--subs-color))
2仅 fill 或仅 stroke否主色区域 fill 或 stroke: var(--logo-color, #000)
辅色区域 fill 或 stroke: var(--logo-color, #000)
3fill + stroke/可按上述酌情适配
#000 的位置具体颜色，请输入原 fill 颜色

多色标识

序号风格是否与主题色相同fill 或 stroke 属性适配示例
1仅 fill 或仅 stroke/对应区域 fill：var(--logo-color, #000)
3fill + stroke/可按上述酌情适配
由于多色标识存在复杂的颜色设计，适配时可能存在颜色重叠等问题影响标识整体，请酌情适配。
#000 输入原 fill 渐变色对应命名 ID

至此，你已经了解 SVG 各种情况下的标识，适配主题特性的属性示例。注意：必须是原生制作的 SVG 格式文件才可以进行适配，位图转制的格式实际上仍然是位图，无法适配。

接下来为大家介绍几种 SVG 编辑工具。

SVG 编辑工具推荐

以下是一些推荐的 SVG 编辑工具，根据不同的需求和使用场景，您可以选择适合自己的工具：

专业设计类

  • Adobe Illustrator：功能强大的矢量图形编辑软件，支持创建和编辑 SVG 文件。绘图功能丰富，对文本处理能力强，可创建和编辑文字，调整字符间距、行间距等，还能将文本沿路径呈现。与 Adobe After Effects 配合方便，可实现众多动态效果。https://www.adobe.com/cn/creativecloud/roc/business.html
  • CorelDRAW：平面设计领域的知名软件，配备了强大的 SVG 编辑工具，可以帮助用户创建专业的矢量插图。支持多种文件格式，如 Adobe Illustrator、PDF、HTML、JPG、PNG、SVG 和 EPS 等。https://www.coreldraw.com/cn/product/coreldraw/

在线编辑类

  • 即时设计：具有强大的 SVG 编辑功能，支持矢量网格、自动布局、组件、智能选择等精细的 SVG 设计功能。https://js.design/
  • 易点编辑器：具有简单的 SVG 编辑功能，可简单编辑图形。https://svg.wxeditor.com

结语

本期介绍了自适应标识颜色特性的设定，当在复杂封面图颜色的页面时，就可以轻松调用标识的白色版本，当处于限定主题时又会调用限定主题色。THYUU/星度主题精心地带来丰富的浏览体验，无论是主题拥有者还是站点访问者，都会有着不同角度的解读。

下一期将为大家介绍，THYUU/星度主题中主辅双色的特性设定，如何搭配双色增强体验，以及在面对不同搭配时的效果会是如何。

THYUU/星度主题：2025 方向、Shows 计划

✇风记星辰
宇
加载中

THYUU/星度 2025 方向

未来，星度主题定位依然是围绕个人 IP 打造及扶持内容价值输出，针对星度定位更新方向如下：

围绕个人 IP 打造

  • 打造个人 IP 输出的更现代首页
  • 增强个人 IP 输出的作者页互动及人物封面图效果

扶持内容价值输出

  • 增加内容输出更丰富的页面类型
  • 增加内容输出更丰富的文章字段
  • 增强全站动效细节及界面标准
  • 增加全站智能栏 1

详细内容未来将会更新在 THYUU/星度主题品牌站

星度依然是做一个有温度的个人 IP 价值及输出的展示型主题。

THYUU/星度 Shows 计划

实际上真正玩个博的朋友们都是冲着对 web 的热爱和对个人独立站的骄傲而活下来的，如果哪天这股子劲没了，也就消失了，而且消失的无影无踪，正如没有记忆的网络一样。

所以星度希望通过不断的创新，让大家保持这股子劲。让大海里形单影只的孤船有所依靠，又让宇宙星辰洪荒中的孤星相互吸引。因此，我未来打算开展的“星度 Shows 计划”2时，也是让这个计划成为星系中心，吸引着更多繁星的加入。互相扶持，互相热爱。

  1. 全站智能栏处于概念设计中 ↩︎
  2. 星度 Shows 计划并非主题中的一环，而是面向所有朋友们推出的有温度计划。敬请期待 ~ ↩︎
❌