nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Argon WordPress主题完整版本

Browse Source 
- 基于Argon主题的WordPress博客主题
- 支持响应式设计和暗色模式
- 包含完整的文章管理和评论系统
- 集成友情链接管理功能
- 支持多种自定义设置选项
- 优化的用户界面和交互体验
This commit is contained in:
nanhaoluo
2026-01-11 19:48:02 +08:00
commit 31d8fde308
547 changed files with 147669 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

438
.kiro/specs/global-ui-optimization/design.md Normal file
View File

@@ -0,0 +1,438 @@
# Design Document: Global UI Optimization
## Overview
本设计文档描述 Argon WordPress 主题的全局 UI 优化方案，参考 Apple Human Interface Guidelines 和 Material Design 3 设计规范。优化重点包括：按钮样式现代化、设置面板重构、分享按钮动画增强、评论展开动画优化，以及新增多种设计风格选项。
## Architecture
### 设计系统架构
```
┌─────────────────────────────────────────────────────────────┐
│ CSS Variables Layer │
│ (动画时长、缓动函数、颜色、圆角、阴影等设计令牌) │
├─────────────────────────────────────────────────────────────┤
│ Base Components Layer │
│ (按钮、卡片、输入框等基础组件样式) │
├─────────────────────────────────────────────────────────────┤
│ Feature Components Layer │
│ (设置面板、分享按钮、评论切换等功能组件) │
├─────────────────────────────────────────────────────────────┤
│ Theme Variants Layer │
│ (玻璃拟态、新拟态、Material 3 等主题变体) │
└─────────────────────────────────────────────────────────────┘
```
### 文件结构
```
style.css # 主样式文件（修改）
argontheme.js # 主脚本文件（修改）
template-parts/
└── post-actions.php # 文章操作按钮模板（修改）
```
## Components and Interfaces
### 1. 动画系统 CSS 变量
```css
:root {
/* 动画时长 */
--animation-fast: 150ms;
--animation-normal: 250ms;
--animation-slow: 400ms;
--animation-slower: 600ms;
/* 缓动函数 - Material 3 标准 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
/* 弹性缓动 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* 状态层透明度 - Material 3 */
--state-hover-opacity: 0.08;
--state-focus-opacity: 0.12;
--state-pressed-opacity: 0.12;
--state-dragged-opacity: 0.16;
}
```
### 2. 按钮组件设计
#### 主要按钮 (Filled Button)
```css
.btn-primary {
background-color: var(--themecolor);
border: none;
border-radius: var(--card-radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition:
background-color var(--animation-fast) var(--ease-standard),
box-shadow var(--animation-fast) var(--ease-standard),
transform var(--animation-fast) var(--ease-standard);
position: relative;
overflow: hidden;
}
.btn-primary:hover {
background-color: var(--themecolor-dark);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn-primary:active {
background-color: var(--themecolor-dark2);
transform: scale(0.98);
}
```
#### 涟漪效果 (Ripple Effect)
```css
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform var(--animation-slow), opacity var(--animation-normal);
}
.btn-ripple:active::after {
transform: scale(0, 0);
opacity: 1;
transition: 0s;
}
```
### 3. 设置面板设计
#### 面板容器
```css
#fabtn_blog_settings_popup {
background: var(--color-foreground);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08);
padding: 16px 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
```
#### 分段控件 (Segmented Control)
```css
.segmented-control {
display: inline-flex;
background: var(--color-widgets-disabled);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.segmented-control-item {
padding: 6px 14px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--color-text-deeper);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--animation-fast) var(--ease-standard);
}
.segmented-control-item.active {
background: var(--themecolor);
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
```
### 4. 分享按钮动画设计
#### 容器样式
```css
#share_container {
position: relative;
display: inline-flex;
align-items: center;
}
#share {
display: flex;
gap: 6px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
#share > a {
opacity: 0;
transform: scale(0.8) translateX(10px);
}
```
#### 展开动画
```css
#share_container.opened #share {
opacity: 1;
pointer-events: auto;
}
#share_container.opened #share > a {
opacity: 1;
transform: scale(1) translateX(0);
transition:
opacity var(--animation-normal) var(--ease-emphasized-decelerate),
transform var(--animation-normal) var(--ease-spring);
}
/* 错落动画延迟 */
#share_container.opened #share > a:nth-child(1) { transition-delay: 0ms; }
#share_container.opened #share > a:nth-child(2) { transition-delay: 30ms; }
#share_container.opened #share > a:nth-child(3) { transition-delay: 60ms; }
#share_container.opened #share > a:nth-child(4) { transition-delay: 90ms; }
#share_container.opened #share > a:nth-child(5) { transition-delay: 120ms; }
#share_container.opened #share > a:nth-child(6) { transition-delay: 150ms; }
#share_container.opened #share > a:nth-child(7) { transition-delay: 180ms; }
#share_container.opened #share > a:nth-child(8) { transition-delay: 210ms; }
```
#### 主按钮变换
```css
#share_show {
transition:
transform var(--animation-normal) var(--ease-standard),
opacity var(--animation-normal) var(--ease-standard);
}
#share_container.opened #share_show {
transform: rotate(45deg) scale(0.9);
opacity: 0.7;
}
```
### 5. 评论展开动画设计
#### 评论区容器
```css
#comments, #post_comment {
transition:
max-height var(--animation-slow) var(--ease-emphasized),
opacity var(--animation-normal) var(--ease-standard),
margin var(--animation-slow) var(--ease-standard),
padding var(--animation-slow) var(--ease-standard);
overflow: hidden;
will-change: max-height, opacity;
}
#comments.comments-collapsed,
#post_comment.comments-collapsed {
max-height: 0 !important;
opacity: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: none !important;
}
#comments:not(.comments-collapsed),
#post_comment:not(.comments-collapsed) {
max-height: 9999px;
opacity: 1;
}
```
#### 切换按钮图标动画
```css
#comments_toggle .btn-inner--icon i {
transition: transform var(--animation-normal) var(--ease-spring);
}
#comments_toggle.expanded .btn-inner--icon i {
transform: rotate(180deg);
}
```
### 6. 主题变体设计
#### 玻璃拟态 (Glassmorphism)
```css
html.style-glass .card,
html.style-glass #fabtn_blog_settings_popup {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
}
html.darkmode.style-glass .card,
html.darkmode.style-glass #fabtn_blog_settings_popup {
background: rgba(66, 66, 66, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
}
```
#### 新拟态 (Neumorphism)
```css
html.style-neumorphism .card {
background: var(--color-background);
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.1),
-8px -8px 16px rgba(255, 255, 255, 0.8);
border: none;
}
html.darkmode.style-neumorphism .card {
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.3),
-8px -8px 16px rgba(255, 255, 255, 0.05);
}
```
## Data Models
### 设置存储结构
```javascript
// localStorage 存储的设置项
{
'Argon_UI_Style': 'default' | 'glass' | 'neumorphism',
'Argon_Animation_Reduced': 'true' | 'false',
'Argon_Use_Serif': 'true' | 'false',
'Argon_Use_Big_Shadow': 'true' | 'false',
'Argon_Filter': 'off' | 'sunset' | 'darkness' | 'grayscale'
}
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: 按钮使用纯色背景
*For any* 主要按钮元素（.btn-primary, #share .btn, #comments_toggle），其 background 属性应该使用纯色（var(--themecolor) 或具体颜色值），而不包含 gradient 关键字。
**Validates: Requirements 1.1, 3.6**
### Property 2: 组件使用主题色 CSS 变量
*For any* 使用主题色的组件（按钮、选中状态、链接等），其颜色相关属性应该使用 var(--themecolor) 或其派生变量（--themecolor-dark, --themecolor-light 等），而非硬编码的颜色值。
**Validates: Requirements 1.4, 2.3**
### Property 3: 动画系统 CSS 变量定义
*For any* 动画相关的 CSS 变量，:root 选择器中应该定义 --animation-fast, --animation-normal, --animation-slow 时长变量，以及 --ease-standard, --ease-emphasized, --ease-spring 等缓动函数变量。
**Validates: Requirements 5.1, 5.2**
### Property 4: 分享按钮错落动画延迟
*For any* 分享按钮容器中的子元素（#share > a），每个元素应该有递增的 transition-delay 值，形成错落有致的动画效果。
**Validates: Requirements 3.2**
### Property 5: 评论区过渡动画属性
*For any* 评论区容器（#comments, #post_comment），其 transition 属性应该包含 max-height 和 opacity，并使用 CSS 变量定义的动画时长。
**Validates: Requirements 4.1, 4.2, 4.4**
### Property 6: GPU 加速动画属性
*For any* 交互动画（悬停、点击、展开/收起），应该主要使用 transform 和 opacity 属性进行动画，而非 width, height, top, left 等触发重排的属性。
**Validates: Requirements 5.3**
### Property 7: 样式切换过渡动画
*For any* 主要容器元素（.card, #fabtn_blog_settings_popup），应该定义 transition 属性覆盖 background-color 和 box-shadow 的变化，以支持样式切换时的平滑过渡。
**Validates: Requirements 6.4**
## Error Handling
### CSS 兼容性处理
1. **backdrop-filter 不支持时的降级**
- 使用 @supports 查询检测支持情况
- 降级为纯色背景加透明度
2. **CSS 变量不支持时的降级**
- 在变量值前提供硬编码的回退值
- 示例：`transition: all 250ms ease; transition: all var(--animation-normal) var(--ease-standard);`
3. **prefers-reduced-motion 处理**
- 检测用户偏好减少动画
- 将所有动画时长设为 0 或极短值
### JavaScript 错误处理
1. **localStorage 不可用**
- 使用 try-catch 包装存储操作
- 降级为内存存储或 cookie
2. **动画 API 不支持**
- 检测 Web Animations API 支持
- 降级为 CSS transition
## Testing Strategy
### 单元测试
1. **CSS 变量定义测试**
- 验证所有必需的 CSS 变量已定义
- 验证变量值格式正确
2. **样式类存在性测试**
- 验证 .style-glass, .style-neumorphism 等类已定义
- 验证 .segmented-control 组件样式已定义
3. **JavaScript 功能测试**
- 验证样式切换函数正确更新 localStorage
- 验证分享按钮展开/收起逻辑
### 属性测试
由于本功能主要涉及 CSS 样式和视觉效果，属性测试将通过以下方式进行：
1. **CSS 解析验证**
- 解析 style.css 文件
- 验证按钮背景不包含 gradient
- 验证动画属性使用 CSS 变量
2. **DOM 结构验证**
- 验证分享按钮子元素具有递增的 transition-delay
- 验证评论区容器具有正确的 transition 属性
### 视觉回归测试（可选）
1. 使用截图对比工具验证样式变更
2. 在不同浏览器中验证兼容性

91
.kiro/specs/global-ui-optimization/requirements.md Normal file
View File

@@ -0,0 +1,91 @@
# Requirements Document
## Introduction
本文档定义了 Argon WordPress 主题全局页面显示优化的需求，参考 Apple 设计语言和 Material Design 3 设计规范，优化设置页面外观、按钮样式、转发按钮动画效果以及评论展开动画效果。
## Glossary
- **Theme_System**: Argon 主题的核心样式系统，包含 CSS 变量和基础组件
- **Settings_Panel**: 浮动按钮栏中的博客设置弹窗组件
- **Share_Button**: 文章分享按钮组件，包含展开/收起动画
- **Comments_Toggle**: 评论区展开/折叠切换按钮和动画系统
- **Button_Component**: 主题中的通用按钮组件
- **Animation_System**: 主题的动画效果系统
## Requirements
### Requirement 1: 按钮样式优化
**User Story:** As a 用户, I want 按钮使用纯色主题色而非渐变背景, so that 界面更加简洁现代，符合 Apple/Material 3 设计语言。
#### Acceptance Criteria
1. THE Button_Component SHALL 使用纯色主题色作为主要按钮背景，移除渐变效果
2. WHEN 按钮处于悬停状态, THE Button_Component SHALL 显示轻微的颜色加深效果和微妙的阴影提升
3. WHEN 按钮处于按下状态, THE Button_Component SHALL 显示颜色进一步加深和轻微的缩放效果
4. THE Button_Component SHALL 使用圆角设计，圆角值与卡片圆角保持一致性
5. THE Button_Component SHALL 支持涟漪效果（ripple effect）作为点击反馈
### Requirement 2: 设置页面外观优化
**User Story:** As a 用户, I want 设置弹窗具有更现代的外观设计, so that 使用体验更加愉悦。
#### Acceptance Criteria
1. THE Settings_Panel SHALL 使用更大的圆角和柔和的阴影效果
2. THE Settings_Panel SHALL 使用分组卡片布局组织设置项
3. WHEN 设置项被选中, THE Settings_Panel SHALL 使用主题色填充而非渐变背景
4. THE Settings_Panel SHALL 使用更清晰的视觉层次和间距
5. THE Settings_Panel SHALL 支持平滑的展开/收起动画
6. THE Settings_Panel SHALL 使用 Material 3 风格的分段控件（Segmented Control）替代现有按钮组
### Requirement 3: 分享按钮动画优化
**User Story:** As a 用户, I want 分享按钮具有流畅自然的展开动画, so that 交互体验更加精致。
#### Acceptance Criteria
1. WHEN 用户点击分享按钮, THE Share_Button SHALL 使用弹性缓动函数展开分享选项
2. THE Share_Button SHALL 分享选项依次出现，具有错落有致的动画效果
3. WHEN 分享面板展开时, THE Share_Button SHALL 主按钮平滑过渡为关闭状态
4. THE Share_Button SHALL 使用 Material 3 风格的容器样式
5. WHEN 用户点击分享面板外部, THE Share_Button SHALL 平滑收起分享选项
6. THE Share_Button SHALL 各分享图标按钮使用纯色背景而非渐变
### Requirement 4: 评论展开动画优化
**User Story:** As a 用户, I want 评论区展开/折叠具有流畅的动画效果, so that 页面交互更加自然。
#### Acceptance Criteria
1. WHEN 用户点击展开评论按钮, THE Comments_Toggle SHALL 使用平滑的高度过渡动画展开评论区
2. THE Comments_Toggle SHALL 评论区内容使用淡入效果配合高度动画
3. WHEN 评论区展开时, THE Comments_Toggle SHALL 按钮图标平滑旋转或变换
4. THE Comments_Toggle SHALL 使用 CSS 变量控制动画时长，便于统一调整
5. WHEN 评论区折叠时, THE Comments_Toggle SHALL 使用反向动画平滑收起
6. THE Comments_Toggle SHALL 动画过程中保持页面滚动位置稳定
### Requirement 5: 全局动画系统优化
**User Story:** As a 用户, I want 全局动画效果统一且流畅, so that 整体体验一致性更好。
#### Acceptance Criteria
1. THE Animation_System SHALL 定义统一的缓动函数变量（ease-out, ease-in-out, spring）
2. THE Animation_System SHALL 定义统一的动画时长变量（fast: 150ms, normal: 250ms, slow: 400ms）
3. THE Animation_System SHALL 所有交互动画使用 GPU 加速属性（transform, opacity）
4. THE Animation_System SHALL 支持 prefers-reduced-motion 媒体查询，为需要的用户减少动画
5. THE Animation_System SHALL 悬停效果使用微妙的缩放和阴影变化
### Requirement 6: 新增设计样式
**User Story:** As a 用户, I want 主题提供更多现代化的设计样式选项, so that 可以根据喜好自定义博客外观。
#### Acceptance Criteria
1. THE Theme_System SHALL 提供玻璃拟态（Glassmorphism）样式选项
2. THE Theme_System SHALL 提供新拟态（Neumorphism）样式选项
3. THE Theme_System SHALL 提供 Material 3 动态色彩系统支持
4. WHEN 用户切换样式时, THE Theme_System SHALL 使用平滑过渡动画
5. THE Theme_System SHALL 样式选项在设置面板中可预览

111
.kiro/specs/global-ui-optimization/tasks.md Normal file
View File

@@ -0,0 +1,111 @@
# Implementation Plan: Global UI Optimization
## Overview
本实现计划将 Argon 主题的 UI 优化分为 6 个主要任务，按照依赖关系顺序执行。首先建立动画系统基础，然后逐步优化各个组件，最后添加新的主题变体。
## Tasks
- [x] 1. 建立动画系统 CSS 变量基础
- 在 style.css 的 :root 中添加动画时长变量（--animation-fast, --animation-normal, --animation-slow, --animation-slower）
- 添加 Material 3 标准缓动函数变量（--ease-standard, --ease-emphasized, --ease-spring 等）
- 添加状态层透明度变量（--state-hover-opacity, --state-pressed-opacity 等）
- 添加 prefers-reduced-motion 媒体查询支持
- _Requirements: 5.1, 5.2, 5.4_
- [x] 2. 优化按钮组件样式
- [x] 2.1 修改 .btn-primary 样式，移除渐变背景，使用纯色主题色
- 更新 background 属性使用 var(--themecolor)
- 添加悬停状态颜色加深和阴影提升效果
- 添加按下状态颜色加深和缩放效果
- 使用 var(--card-radius) 统一圆角
- _Requirements: 1.1, 1.2, 1.3, 1.4_
- [x] 2.2 添加涟漪效果（ripple effect）
- 创建 .btn-ripple 类实现 CSS 涟漪动画
- 使用 ::after 伪元素和 radial-gradient 实现
- _Requirements: 1.5_
- [x] 3. 优化分享按钮动画效果
- [x] 3.1 更新分享按钮容器样式
- 修改 #share_container 和 #share 的布局样式
- 使用 flexbox 和 gap 属性优化间距
- _Requirements: 3.4_
- [x] 3.2 实现错落有致的展开动画
- 为 #share > a 添加初始状态（opacity: 0, transform: scale(0.8) translateX(10px)）
- 为每个子元素添加递增的 transition-delay（30ms 间隔）
- 使用 --ease-spring 缓动函数
- _Requirements: 3.1, 3.2_
- [x] 3.3 优化主按钮变换动画
- 修改 #share_show 的 .opened 状态样式
- 添加旋转和缩放变换（rotate(45deg) scale(0.9)）
- _Requirements: 3.3_
- [x] 3.4 更新分享图标按钮为纯色背景
- 移除 template-parts/post-actions.php 中按钮的 style 属性中的渐变
- 使用纯色背景色
- _Requirements: 3.6_
- [x] 4. 优化评论展开动画效果
- [x] 4.1 更新评论区容器过渡动画
- 修改 #comments 和 #post_comment 的 transition 属性
- 使用 CSS 变量定义动画时长（var(--animation-slow)）
- 使用 --ease-emphasized 缓动函数
- 确保使用 max-height 和 opacity 进行动画
- _Requirements: 4.1, 4.2, 4.4_
- [x] 4.2 添加切换按钮图标动画
- 为 #comments_toggle .btn-inner--icon i 添加 transition
- 在展开状态添加旋转变换
- 更新 template-parts/post-actions.php 中的 JavaScript 逻辑
- _Requirements: 4.3_
- [x] 4.3 优化滚动位置稳定性
- 在 argontheme.js 中优化评论展开时的滚动处理
- 使用 requestAnimationFrame 确保动画流畅
- _Requirements: 4.6_
- [x] 5. 优化设置面板外观
- [x] 5.1 更新设置面板容器样式
- 修改 #fabtn_blog_settings_popup 的圆角（16px）和阴影
- 添加 backdrop-filter 玻璃效果
- 优化内边距和间距
- _Requirements: 2.1, 2.5_
- [x] 5.2 实现 Material 3 风格分段控件
- 创建 .segmented-control 和 .segmented-control-item 样式
- 更新字体和阴影选择器使用新的分段控件样式
- 选中状态使用纯色主题色背景
- _Requirements: 2.3, 2.6_
- [x] 6. 添加新主题变体样式
- [x] 6.1 实现玻璃拟态（Glassmorphism）样式
- 创建 html.style-glass 选择器下的卡片和面板样式
- 使用 backdrop-filter: blur(20px) saturate(180%)
- 添加半透明背景和边框
- 支持暗色模式变体
- _Requirements: 6.1_
- [x] 6.2 实现新拟态（Neumorphism）样式
- 创建 html.style-neumorphism 选择器下的卡片样式
- 使用双向阴影（凸起效果）
- 支持暗色模式变体
- _Requirements: 6.2_
- [x] 6.3 添加样式切换功能
- 在 argontheme.js 中添加样式切换函数
- 更新 localStorage 存储逻辑
- 为主要元素添加 transition 支持样式切换动画
- _Requirements: 6.4_
- [x] 6.4 在设置面板中添加样式选择器
- 添加样式预览按钮
- 绑定点击事件切换样式
- _Requirements: 6.5_
- [ ] 7. Checkpoint - 验证所有功能
- 确保所有样式修改正确应用
- 测试各种浏览器兼容性
- 验证暗色模式下的显示效果
- 确保动画流畅无卡顿
- 如有问题请询问用户
## Notes
- 所有 CSS 修改应在 style.css 文件中进行
- JavaScript 修改应在 argontheme.js 文件中进行
- PHP 模板修改应在 template-parts/post-actions.php 中进行
- 优先使用 CSS 变量以保持一致性和可维护性
- 动画应使用 GPU 加速属性（transform, opacity）以确保性能