站点和设计41篇

这里见证了历史，它告诉我，昔时此刻的路都是认真的。

2周前 3 条评论
THYUU/星度主题 25.12.0 更新内容

本次更新为 2025 年最后一次更新，接下来 THYUU/星度主题将发挥年度首页的特性 —— 每年度都会设计出本年度的新款首页。这点特性正是因为其整体...

THYUU/星度主题 25.12.0 更新内容
查看完整文章评论
预计更新时间：2025 年 12 月 26 日

本次更新为 2025 年最后一次重磅更新，虽然间隔几个月尚无内容，但这次内容十分丰富。

接下来 THYUU/星度主题将发挥年度首页的特性 —— 每年度都会设计出本年度的新款首页。这点特性正是因为其整体的有效自适应风格以及高度统一的设计标准，给予未来的无限可能，一次购买享繁星温度。这就是 THYUU/星度主题，让主题跟随时代，让审美不再疲劳。

2026 年度首页的设计和创新即将开始。新首页的设计理念将是更加突出个人品牌 IP 的设定，敬请期待。

全局

  • 【新增】增加全局动态面板欢迎信息的登录按钮及提示、前置图标、优化交互背景和字体颜色
  • 【优化】升级内置的高亮代码 JS 文件至 11.11.1 版
  • 【修复】在手机浏览时定位滚动距离与站点标识重叠的问题

顶栏

  • 【新增】顶栏在分类页、作者页、标签页增加编辑其内容的按钮，增加建站易用性
  • 【优化】顶栏新建站点未存在主菜单时，修改提示为需新增主菜单
  • 【修复】顶栏弹出窗口通用遮罩动效异常问题

首页

  • 【优化】首页十年之约板块重新设计，同时解决元素超出一定区域时，导致页面底部增加空白的问题

单页

  • 【优化】走心评论页面列表重新设计并修复字体模糊问题
  • 【优化】使留言板背景在切换时的动效更自然

分类页

  • 【新增】文章卡片的背景遮罩支持封面图主色调效果，使其整体颜色美观一致
  • 【新增】文章卡片的标题和摘要增加交互动效设计
  • 【新增】文章卡片的日期按文章类型增加前置图标并重新排版速读图标，以快速定位文章类型
  • 【新增】文章卡片增加作者头像及名称显示
  • 【新增】文章卡片封面图支持点击进入文章

文章页

阅读区域

  • 【新增】文章页的主色调支持引入封面图主色调效果，使其整体颜色美观一致
  • 【新增】在点击文章目录的标题时，增加相应文章内标题的定位强调提示
  • 【优化】在切换文章目录的窗口时，使其动效更自然
  • 【优化】调整文章内标题的前置序号字体及背景颜色，以适应方块字美观
  • 【优化】文章页封面区域的主标题背景取消背景虚化，改用封面图主色调渐变，使页面渲染更流畅
  • 【优化】文章页封面区域的文章信息按钮优化，避免自定义圆角时不协调问题
  • 【优化】调整无序和有序列表前置符号的缩进距离，使其阅读更舒适
  • 【优化】暗模式的文章阅读区域背景增加透明效果，使其阅读更美观

文章类型

  • 【优化】删除视频类型文章和音频类型文章固定暗模式的设定，现已支持切换并将其合并至主题亮暗模式的设定
  • 【优化】删除图文类型文章首个轮播图与文字区域下滑时宽度变动的设定，由于前期效果较差且动画卡顿严重，因此删除此前设定。同时略微调整轮播图与文字内容比例，优化收缩布局下的排版设计。建议该文章类型用作简单的图文设定，当存在多个图库及复杂媒体内容时，建议使用通用文章类型、双栏文章类型及相册文章类型
  • 【修复】图文类型文章首屏首次图库一直加载中的错误
  • 【修复】视频类型文章嵌入地图与视频结构冲突的问题

后台设置

  • 【新增】增加文章列表封面图的比例选项，分别为自动、4/3、16/9、自定义比例，让精心制作的封面也可完整展示
  • 【新增】增加全局卡片大小设置，可自定义卡片宽度，该设置适用于顶部菜单、列表卡片、弹出窗口、部分区块等的宽度
  • 【新增】删除图标库链接、全局字体链接的设置，新增统一引入链接选项，使其引入多个字体更方便
  • 【新增】增加编辑文章可选择固定亮或暗模式的选项，默认自适应即支持前端切换
  • 【新增】增加编辑文章可输入封面图主色调的选项，默认保存文章后自动获取
  • 【新增】增加主题图标库页面，点击即可复制 Class 类名，以便应用在站点内各处设置

适用于 WordPress 版的更新内容

前置提示

  • 本次更新中新增调用 PHP 图像处理库 GD Library 和 Imagick 获取文章封面主色，由于 PHP 扩展默认未内置 Imagick，虽然 THYUU/星度主题做了降级处理，但考虑图像处理性能，建议安装 PHP 扩展 Imagick，这同时也是 WordPress 的建议。至于他们的区别及其详情请查看：https://www.thyuu.com/81265/
  • 本次更新中优化了部分文件 PHP 代码及文件结构，因此必须安装 PHP 扩展 ionCube 才能进行读取，否则无法正常使用主题，请联系主机商或自行安装 PHP 扩展，若存在进一步问题可联系 theme@thyuu.com 或在沟通群内咨询。

更新内容

  • 【新增】适配 WP 6.9 新增的手风琴、数学公式等区块
  • 【新增】顶栏增加切换按钮，解决前端管理员工具栏与页面顶栏冲突的问题。由于开启后会附带多个样式文件及 WP 自带图标库，建议无特殊需求可关闭前端管理员工具栏。
  • 【优化】当文章不存在封面图时，分享界面中的缩略图自动获取站点标识
  • 【优化】优化部分文件 PHP 代码及文件结构
  • 【优化】优化文章编辑页面右侧面板区域样式及信息提示
  • 【修复】在未设置伪静态时，脚印页面 API 数据链接失败的问题
  • 【修复】使用古腾堡编辑器新建原生视频时，视频区块在视频文章类型不置顶的问题
  • 【修复】使用古腾堡编辑器定义字体大小时，导致与主题默认字体大小不兼容的问题
  • 【修复】使用古腾堡编辑器创建等宽表格时，导致表格内容重叠的问题
  • 【修复】作者页面因缺失数据导致的 PHP 报错
  • 【修复】邮件模块中 SMTP 名称错误
  • 【修复】友链动态 RSS 获取异常，特殊情况下无法限制获取数量的问题

2025-03-28 14 条评论
THYUU/星度主题精心设定第一期：自适应标识颜色特性

在THYUU/星度主题里的顶栏，标识除了引入常见的 IMG 图片外，主题还支持 SVG 格式并引入了变色特性，让标识根据不同的页面展示不同的颜色方案。...

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/星度主题中主辅双色的特性设定，如何搭配双色增强体验，以及在面对不同搭配时的效果会是如何。