# Wordpress星空主题 Skystarry

**Repository Path**: skyllyf/wordpress-starry-sky-theme

## Basic Information

- **Project Name**: Wordpress星空主题 Skystarry
- **Description**: Wordpress6.9版本星空主题
- **Primary Language**: PHP
- **License**: GPL-3.0
- **Default Branch**: develop
- **Homepage**: https://skyllyf.cc
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-26
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 星空主题 (Skystarry)

基于 FSS 设计风格的 WordPress 主题，具有精美的星空渐变背景效果。

## 📌 项目信息

- **主题名称**：星空主题 (Skystarry)
- **作者**：林霖澐枫
- **网站地址**：https://www.blog.skyllyf.cc
- **版本**：4.0.0
- **许可证**：GNU General Public License v2 或更高版本

## ✨ 功能特性

### 🏠 首页
- 精美的星空背景渐变效果（Canvas 动画）
- 英雄区域大标题展示
- 图片灯箱功能（支持键盘导航）
- 最新文章列表
- 响应式设计

### 📝 文章页
- 完整的文章内容展示
- 特色图片支持
- 作者信息展示
- 相关文章推荐
- 文章内图片灯箱
- 文章导航
- 二维码生成功能

### 🖼️ 图床页面
- 网格布局展示图片
- 分类筛选功能（基于 media_category）
- 图片灯箱查看
- 图片元数据展示（标题、描述、标签）
- 支持从 WordPress 媒体库选择图片

### 👤 关于页面
- 个人头像展示
- 个人简介
- 技能标签
- 社交媒体链接（微博、微信、QQ、GitHub 等）
- 联系表单
- 动态粒子背景效果

### ⏰ 时间线页面
- 垂直时间线布局
- 滚动动画效果
- 支持自定义图标（emoji）
- 两种编辑方式：
  - 自定义主题设置（JSON 格式）
  - 自定义文章类型 "Timeline"

### 🎨 主题特性
- **响应式设计**：支持从超小屏手机（≤375px）到 4K 显示器（1920px+）
- **深色模式**：一键切换日间/夜间模式
- **无障碍支持**：符合 WCAG 2.1 标准
- **图片懒加载**：使用 IntersectionObserver API 优化性能
- **搜索功能**：全屏搜索遮罩，支持 ESC 快捷键
- **移动端优化**：移动端关于页面和文章页面的菜单栏固定显示
- **主题定制器**：丰富的自定义选项，无需代码即可调整

## 📋 系统要求

- WordPress 6.0 或更高版本
- PHP 7.4 或更高版本（推荐 PHP 8.0+）
- MySQL 5.6 或更高版本
- 推荐启用 mod_rewrite 模块

## 🚀 安装方法

### 方法一：通过 WordPress 后台安装（推荐）

1. 下载主题压缩包
2. 登录 WordPress 后台
3. 进入 `外观 -> 主题 -> 添加新主题`
4. 点击 `上传主题`，选择下载的压缩包
5. 上传完成后点击 `启用主题`
6. 首次激活主题会自动创建图床、时间线、关于页面

### 方法二：通过 FTP/SFTP 安装

1. 下载主题压缩包并解压
2. 将 `skystarry` 文件夹上传到 `wp-content/themes/` 目录
3. 登录 WordPress 后台
4. 进入 `外观 -> 主题`，找到"星空主题"
5. 点击 `启用`

### 方法三：通过 Git 克隆（开发者）

```bash
cd wp-content/themes/
git clone https://gitee.com/skyllyf/wordpress-starry-sky-theme.git skystarry
```

## 📝 页面模板

主题包含以下页面模板，创建页面时可选择：

- **图床页面** (page-gallery.php) - 用于展示图片图床
- **关于页面** (page-about.php) - 用于个人介绍页面
- **时间线页面** (page-timeline.php) - 用于时间线展示

**注意**：主题激活时会自动创建上述页面（如果不存在），slug 分别为 `gallery`、`about`、`timeline`。

## ⚙️ 主题设置

激活主题后，进入 `外观 -> 自定义` 可配置以下选项：

### 英雄区域
- **主标题** - 首页大标题文字

### 关于页面
- **头像** - 上传个人头像
- **姓名** - 显示名称
- **简介** - 个人介绍文字

### 社交媒体
- 微博链接
- 微信链接
- QQ 链接
- GitHub 链接
- 邮箱地址
- Twitter 链接
- Facebook 链接

### 首页灯箱
- **选择图片** - 从媒体库选择要在首页灯箱显示的图片（留空则自动使用媒体库最新 6 张）

### 图床设置
- **图床图片** - 从媒体库选择图床页面显示的图片（留空则自动使用媒体库所有图片）

### 时间线设置
- **时间线内容** - JSON 格式编辑时间线项目（留空则使用 Timeline 文章类型）

### 技能设置
- **技能列表** - 每行一个技能

### 页脚设置
- **ICP 备案号**
- **公安备案号**
- **自定义文字**

## 📸 图片灯箱功能

主题内置了强大的图片灯箱功能，支持首页、图床页面和文章页面的图片查看。

### 功能特性
- 点击图片打开全屏灯箱
- 键盘导航支持（← → 上下页，ESC 关闭）
- 显示图片标题
- 响应式设计，移动端优化

### 首页灯箱
- 在主题设置中选择的图片会显示在首页
- 点击图片打开灯箱查看
- 支持键盘导航

### 图床灯箱
- 图床页面所有图片都支持灯箱查看
- 分类筛选不影响灯箱功能
- 左右切换浏览所有图片

### 文章灯箱
- 文章内的图片自动支持灯箱
- 插入的图片无需额外配置

## ⏰ 时间线配置方法

### 方法一：JSON 格式（推荐简单使用）

进入 `外观 -> 自定义 -> 时间线设置`，使用以下 JSON 格式：

```json
[
  {
    "date": "2026-02-26",
    "title": "主题发布",
    "description": "Skystarry 主题正式发布",
    "icon": "★"
  },
  {
    "date": "2026-01-15",
    "title": "网站上线",
    "description": "个人网站正式上线",
    "icon": "🚀"
  }
]
```

### 方法二：自定义文章类型（推荐复杂场景）

1. 在 WordPress 后台创建 "Timeline" 类型文章
2. 编辑自定义字段：
   - **日期** - 显示的日期（YYYY-MM-DD 格式）
   - **图标** - 自定义图标（emoji 或符号）
3. 文章标题和内容会自动显示在时间线上

## 🖼️ 图床图片管理

### 从媒体库选择
1. 进入 `外观 -> 自定义 -> 图床设置`
2. 点击"图床图片"字段
3. 从媒体库中选择要显示的图片（可多选）

### 为图片添加分类和描述
1. 进入 `媒体 -> 媒体库`
2. 编辑图片
3. 添加"媒体分类"（需要创建分类法）
4. 填写标题、描述等信息
5. 保存后图片会显示分类标签

## 🎨 自定义样式

### CSS 变量

主题使用 CSS 变量，可在子主题中轻松覆盖：

```css
:root {
  --primary-blue: #009FFD;
  --gradient-start: #64b3f4;
  --gradient-end: #c2e59c;
  --nav-bg-desktop: rgba(1, 10, 30, 0.8);
}
```

### 子主题

建议创建子主题进行自定义，避免主题更新丢失修改：

```php
/*
Theme Name: Skystarry Child
Template: skystarry
*/

add_action('wp_enqueue_scripts', 'skystarry_child_enqueue_styles');
function skystarry_child_enqueue_styles() {
    wp_enqueue_style('skystarry-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('skystarry-style')
    );
}
```

## 📱 响应式支持

主题完全响应式，支持以下设备：

- 4K 显示器（1920px+）
- 大显示器（1601-1919px）
- 标准桌面（1441-1600px）
- 笔记本电脑（1201-1366px）
- 平板横屏（1025-1200px）
- 平板竖屏（769-1024px）
- 大屏手机（577-768px）
- 标准手机（426-576px）
- 小屏手机（376-425px）
- 超小屏手机（≤375px）

## 🌐 浏览器兼容性

- Chrome（最新 2 个版本）
- Firefox（最新 2 个版本）
- Safari（最新 2 个版本）
- Edge（最新 2 个版本）
- 360 浏览器
- QQ 浏览器

## ⚡ 性能优化

- CSS 动画使用 GPU 加速
- 图片懒加载（IntersectionObserver API）
- 最小化 JavaScript 依赖
- 优化字体加载
- 避免重排和重绘

## 🔒 安全性

- 所有输出经过转义（`esc_html()`, `esc_url()`, `esc_attr()`）
- 表单包含 nonce 验证
- AJAX 请求验证
- SQL 注入防护
- XSS 防护

## 🔄 更新日志

### 4.0.0 (2026-03-04)
- 修复移动端关于页面底部空白问题
- 修复移动端 QR Code Modal 溢出问题
- 合并和删除多余断点内容
- 优化移动端导航栏布局
- 删除开发/部署相关的临时文件

### 3.0.0 (2026-02-26)
- 添加星空背景 Canvas 动画
- 优化移动端菜单栏显示
- 添加关于页面粒子背景效果
- 优化图床页面布局
- 深色模式优化

### 2.0.0 (2026-02-20)
- 完整的首页、文章页、图床、关于页、时间线功能
- 图片灯箱功能
- 响应式设计
- 自定义主题设置

### 1.0.0 (2026-01-15)
- 初始版本发布

## 📄 许可证

GNU General Public License v2 或更高版本

详见：http://www.gnu.org/licenses/gpl-2.0.html

## 💬 技术支持

如有问题或建议，请联系：

- **作者**：林霖澐枫
- **网站**：https://www.blog.skyllyf.cc
- **Gitee**：https://gitee.com/skyllyf/wordpress-starry-sky-theme

## 🙏 致谢

基于 FSS 静态网站风格设计，感谢原作者的灵感。

感谢所有为开源社区做出贡献的开发者。

---

**星空主题 - 让您的博客如星空般璀璨** ✨