docs: 完善代码规范文档
- 添加项目文件结构说明 - 添加 style.css 和 argontheme.js 的模块结构 - 添加需要保留 var 的全局变量列表 - 添加 CSS/JS/PHP 注释规范示例 - 添加规范化历史记录
This commit is contained in:
@@ -1,5 +1,58 @@
|
|||||||
# Argon 主题代码规范
|
# Argon 主题代码规范
|
||||||
|
|
||||||
|
## 项目文件结构
|
||||||
|
|
||||||
|
### 核心文件
|
||||||
|
| 文件 | 说明 | 行数 |
|
||||||
|
|------|------|------|
|
||||||
|
| `style.css` | 主题样式,包含所有 CSS | ~12000 行 |
|
||||||
|
| `argontheme.js` | 主题核心 JS | ~3700 行 |
|
||||||
|
| `functions.php` | WordPress 函数 | ~5700 行 |
|
||||||
|
| `settings.php` | 后台设置页面 | ~6000 行 |
|
||||||
|
|
||||||
|
### style.css 结构
|
||||||
|
```
|
||||||
|
1. CSS 变量定义 (:root)
|
||||||
|
- 主题色系统 (--themecolor-*)
|
||||||
|
- 颜色变量 (--color-*)
|
||||||
|
- 动画系统 (--animation-*, --ease-*)
|
||||||
|
2. 夜间模式配色 (html.darkmode)
|
||||||
|
3. AMOLED 夜间模式
|
||||||
|
4. 沉浸式主题色
|
||||||
|
5. 主题切换过渡效果
|
||||||
|
6. Argon 框架样式覆盖
|
||||||
|
7. 基础样式
|
||||||
|
8. 页面布局 (单栏/双栏/三栏)
|
||||||
|
9. 顶栏和 Banner
|
||||||
|
10. 侧边栏
|
||||||
|
11. 文章样式
|
||||||
|
12. 评论区
|
||||||
|
13. 浮动按钮
|
||||||
|
14. 响应式适配
|
||||||
|
```
|
||||||
|
|
||||||
|
### argontheme.js 结构
|
||||||
|
```
|
||||||
|
1. 兼容性修复 - 第三方库 polyfill
|
||||||
|
2. 全局配置 - argonConfig 初始化
|
||||||
|
3. 工具函数 - Cookie、翻译等
|
||||||
|
4. 顶栏功能 - 透明度、搜索
|
||||||
|
5. 侧边栏 - 浮动、滚动
|
||||||
|
6. 文章列表 - 瀑布流布局
|
||||||
|
7. 浮动按钮 - 回顶、设置
|
||||||
|
8. 评论系统 - 发送、回复、编辑
|
||||||
|
9. 代码高亮 - Prism 增强
|
||||||
|
10. PJAX - 页面无刷新加载
|
||||||
|
```
|
||||||
|
|
||||||
|
### 全局变量(需保留 var)
|
||||||
|
- `argonConfig` - 主题配置对象
|
||||||
|
- `translation` - 多语言翻译表
|
||||||
|
- `pjaxLoading` - PJAX 加载状态
|
||||||
|
- `headroom` - Headroom 实例
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## CSS 规范
|
## CSS 规范
|
||||||
|
|
||||||
### 格式化规则
|
### 格式化规则
|
||||||
@@ -33,9 +86,17 @@
|
|||||||
```
|
```
|
||||||
|
|
||||||
### 注释规范
|
### 注释规范
|
||||||
- 区块注释使用 `/* ========== 区块名称 ========== */`
|
```css
|
||||||
- 普通注释使用 `/* 注释内容 */`
|
/* ==========================================================================
|
||||||
- 多行注释每行以 ` * ` 开头
|
大区块标题
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* ---------- 小区块标题 ---------- */
|
||||||
|
|
||||||
|
/* 普通注释 */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## JavaScript 规范
|
## JavaScript 规范
|
||||||
|
|
||||||
@@ -49,16 +110,15 @@
|
|||||||
|
|
||||||
### 变量声明
|
### 变量声明
|
||||||
- 优先使用 `let` 和 `const`
|
- 优先使用 `let` 和 `const`
|
||||||
- 避免使用 `var`(除非需要函数作用域)
|
- 避免使用 `var`(除非需要函数作用域或全局变量)
|
||||||
|
|
||||||
### 注释规范
|
### 注释规范
|
||||||
- 区块注释使用 `// ========== 区块名称 ==========`
|
|
||||||
- 函数注释使用 JSDoc 格式
|
|
||||||
- 单行注释使用 `//`
|
|
||||||
|
|
||||||
### 示例
|
|
||||||
```javascript
|
```javascript
|
||||||
// ========== 功能模块名称 ==========
|
// ==========================================================================
|
||||||
|
// 大区块标题
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
// ---------- 小区块标题 ----------
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 函数说明
|
* 函数说明
|
||||||
@@ -66,6 +126,7 @@
|
|||||||
* @returns {boolean} 返回值说明
|
* @returns {boolean} 返回值说明
|
||||||
*/
|
*/
|
||||||
function functionName(param) {
|
function functionName(param) {
|
||||||
|
// 单行注释
|
||||||
if (param === 'value') {
|
if (param === 'value') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@@ -73,6 +134,8 @@ function functionName(param) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## PHP 规范
|
## PHP 规范
|
||||||
|
|
||||||
### 格式化规则
|
### 格式化规则
|
||||||
@@ -81,8 +144,29 @@ function functionName(param) {
|
|||||||
- 数组使用短语法 `[]`
|
- 数组使用短语法 `[]`
|
||||||
- 类名使用 PascalCase
|
- 类名使用 PascalCase
|
||||||
- 函数名使用 snake_case(遵循 WordPress 规范)
|
- 函数名使用 snake_case(遵循 WordPress 规范)
|
||||||
|
- 箭头操作符 `->` 前后不要有空格
|
||||||
|
|
||||||
### WordPress 特定
|
### WordPress 特定
|
||||||
- 使用 `esc_html()`, `esc_attr()` 等函数转义输出
|
- 使用 `esc_html()`, `esc_attr()` 等函数转义输出
|
||||||
- 使用 `wp_nonce_field()` 进行安全验证
|
- 使用 `wp_nonce_field()` 进行安全验证
|
||||||
- 遵循 WordPress Coding Standards
|
- 遵循 WordPress Coding Standards
|
||||||
|
|
||||||
|
### 示例
|
||||||
|
```php
|
||||||
|
// 正确
|
||||||
|
$theme->Version
|
||||||
|
get_option('argon_theme_color')
|
||||||
|
|
||||||
|
// 错误
|
||||||
|
$theme -> Version
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 规范化历史
|
||||||
|
|
||||||
|
### 2026-01-16 规范化
|
||||||
|
- CSS: 移除 4292 行多余空行,添加结构化注释
|
||||||
|
- JS: 89 个 var 改为 let,添加模块目录和 JSDoc
|
||||||
|
- PHP: 修复 200+ 处箭头操作符空格问题
|
||||||
|
- 备份位置: `tmp/` 目录
|
||||||
|
|||||||
Reference in New Issue
Block a user