diff --git a/doc/argon-theme-training.md b/doc/argon-theme-training.md index 2ae1d50..1b14623 100644 --- a/doc/argon-theme-training.md +++ b/doc/argon-theme-training.md @@ -2,7 +2,7 @@ ## 项目概述 -Argon 是一款基于 WordPress 的现代化博客主题,采用 Material Design 设计语言,提供丰富的功能和高度的可定制性。主题版本 1.5.0,由 solstice23 开发维护。 +Argon 是一款基于 WordPress 的现代化博客主题,采用 Material Design 设计语言,提供丰富的功能和高度的可定制性。 ### 核心特性 @@ -26,7 +26,7 @@ Argon 是一款基于 WordPress 的现代化博客主题,采用 Material Desig - WordPress 4.4+ - jQuery 3.x - Bootstrap 4 (Argon Design System) -- Prism.js (代码高亮) +- Highlight.js (代码高亮) - MathJax/KaTeX (数学公式) - Headroom.js (顶栏自动隐藏) @@ -36,21 +36,22 @@ Argon 是一款基于 WordPress 的现代化博客主题,采用 Material Desig ``` argon/ -├── style.css # 主题样式表 (~12000 行) -├── argontheme.js # 主题核心 JavaScript (~3700 行) -├── functions.php # WordPress 主题函数 (~5700 行) -├── settings.php # 后台设置页面 (~6000 行) -├── header.php # 页面头部模板 -├── footer.php # 页面底部模板 -├── index.php # 首页模板 -├── single.php # 文章页模板 -├── page.php # 页面模板 -├── archive.php # 归档页模板 +├── style.css # 主题样式表 (核心样式定义,包含配色、排版、组件样式) +├── argontheme.js # 主题核心 JavaScript (负责 PJAX、界面交互、功能初始化) +├── functions.php # WordPress 主题函数 (功能入口、Hook 挂载、核心逻辑实现) +├── settings.php # 后台设置页面 (提供外观、功能开关等配置选项) +├── header.php # 页面头部模板 (HTML Head、顶部导航栏、全局变量输出) +├── footer.php # 页面底部模板 (页脚区域、JavaScript 脚本引入) +├── index.php # 首页模板 (文章列表展示) +├── single.php # 文章页模板 (单篇文章内容展示) +├── page.php # 页面模板 (独立页面展示) +├── archive.php # 归档页模板 (分类、标签、日期归档) ├── search.php # 搜索结果页模板 -├── 404.php # 404 页面模板 -├── comments.php # 评论区模板 -├── sidebar.php # 侧边栏模板 -└── info.json # 主题信息配置 +├── 404.php # 404 错误页面模板 +├── comments.php # 评论区模板 (评论列表与发表评论表单) +├── sidebar.php # 侧边栏模板 (个人信息卡片、小工具挂载点) +├── admin.css # 后台设置页面样式 +└── languages/ # 多语言包目录 (.po/.mo 文件) ``` ### 功能模块文件 @@ -280,7 +281,24 @@ $GLOBALS['theme_version'] = $argon_version; $GLOBALS['assets_path'] = get_bloginfo('template_url'); ``` -2. **header.php 渲染**(输出 HTML 头部) +2. **导航菜单注册** + + 主题通过 `init` 挂钩注册了四个核心菜单位置,用于定义页面的不同导航区域: + + ```php + // functions.php + function init_nav_menus(){ + register_nav_menus( array( + 'toolbar_menu' => __('顶部导航', 'argon'), // 顶部工具栏菜单 + 'leftbar_menu' => __('左侧栏菜单', 'argon'), // 左侧主要导航菜单 + 'leftbar_author_links' => __('左侧栏作者个人链接', 'argon'), // 左侧作者信息下方的图标链接 + 'leftbar_friend_links' => __('左侧栏友情链接', 'argon') // 左侧底部的友情链接区域 + )); + } + add_action('init', 'init_nav_menus'); + ``` + + 3. **header.php 渲染**(输出 HTML 头部) ```php // header.php @@ -498,10 +516,11 @@ wp_enqueue_script("resource_loader", ".../resource-loader.js"); wp_enqueue_script("argon_js_merged", ".../argon_js_merged.js", array(), $assets_version, false); // 3. Argon 修复补丁(必须在 wp_head() 之后) - + // 4. 主题核心脚本(在 footer.php 中加载) -wp_enqueue_script("argontheme", ".../argontheme.js", array('argon_js_merged')); + + ``` 3. **按需加载** @@ -513,10 +532,8 @@ if (typeof ArgonResourceLoader !== "undefined") { ArgonResourceLoader.smartLoad("//fonts.googleapis.com/css?family=...", "css"); } -// 数学公式渲染库按需加载(在 footer.php 中) - - - +// 数学公式渲染库在 footer.php 中按设置输出(get_option('argon_math_render')) +// 可选:mathjax3 / mathjax2 / katex / disabled ``` #### 强制刷新机制 @@ -746,6 +763,128 @@ html.darkmode.amoled-dark body { ``` + +### 后台设置框架 + +Argon 主题不依赖第三方设置框架(如 Redux 或 Codestar),而是使用原生 PHP + HTML 实现了一个轻量级的设置页面。 + +#### 1. 设置页面结构 + +设置页面位于 `settings.php`,通过 `functions.php` 中的 `add_theme_page` 挂载: + +```php +// functions.php +function themeoptions_admin_menu() { + add_theme_page("Argon 主题设置", "Argon 主题选项", 'edit_themes', basename(__FILE__), 'themeoptions_page'); +} +add_action('admin_menu', 'themeoptions_admin_menu'); +``` + +页面内容主要由 `themeoptions_page()` 函数输出,采用 HTML Table 布局,包含多个选项卡(如“全局设置”、“侧栏设置”等)。 + +#### 2. 选项存储与更新 + +设置数据的保存逻辑集成在 `settings.php` 顶部: + +```php +// settings.php +if (isset($_POST['update_themeoptions']) && $_POST['update_themeoptions'] == 'true') { + // 1. 验证 Nonce 安全令牌 + check_admin_referer('argon_update_themeoptions', 'argon_update_themeoptions_nonce'); + + // 2. 处理复选框(未选中的 checkbox 不会提交,需要手动设为 false) + if (!isset($_POST['argon_enable_lazyload'])) $_POST['argon_enable_lazyload'] = 'false'; + + // 3. 循环更新所有选项 + foreach ($_POST as $key => $value) { + if (isset($value) && $value != '') { + update_option($key, $value); + } else { + delete_option($key); // 空值则删除选项 + } + } + + // 4. 提示保存成功 + echo '

设置已保存

'; +} +``` + +#### 3. 添加新选项指南 + +要在主题中添加一个新的设置项,需遵循以下步骤: + +1. 在 `settings.php` 的对应表格行中添加 HTML 输入控件。 +2. `name` 属性必须以 `argon_` 开头(这是约定,方便管理)。 +3. 使用 `get_option('option_name')` 获取当前值回显。 + +示例:添加一个“显示版权信息”的开关 + +```php + + + + + + +``` + +### 前端交互架构 (PJAX & SPA) + +Argon 主题采用 PJAX (PushState + AJAX) 技术实现单页应用 (SPA) 体验,核心逻辑位于 `assets/js/argontheme.js`。 + +#### 1. PJAX 工作原理 + +1. **拦截点击**:监听所有 `a` 标签点击事件。 +2. **获取内容**:通过 AJAX 请求目标页面 URL。 +3. **解析响应**:从响应 HTML 中提取 `#content` 容器内容。 +4. **替换容器**:将当前页面的 `#content` 替换为新内容。 +5. **更新状态**:使用 `history.pushState` 更新浏览器 URL。 +6. **重载资源**:重新执行内联脚本,重置事件监听器。 + +#### 2. 初始化与重载机制 + +由于 PJAX 会替换页面的部分 DOM,依赖旧 DOM 的事件绑定与第三方实例需要在 PJAX 完成后重新初始化。Argon 的实现采用“首屏最小初始化 + PJAX 完整重初始化”的策略。 + +首屏加载完成后的初始化入口位于 `argontheme.js` 的 `$(document).ready(...)`,主要执行性能优化模块初始化(如已加载)以及基础渲染: + +```javascript +$(document).ready(function(){ + if (typeof initArgonPerformance === 'function') { + initArgonPerformance(); + } + highlightJsRender(); + waterflowInit(); +}); +``` + +PJAX 主流程通过 `$(document).pjax(...)` 建立,并在 `pjax:beforeReplace` 统一清理旧页面资源,在 `pjax:complete` 完整初始化新页面模块(包含数学公式渲染、脚本执行与各功能模块的错误隔离初始化)。 + +#### 3. 脚本执行器 (Inline Script Executor) + +PJAX 替换的 DOM 片段中可能包含内联 `