JA/
├── home/
│ ├── home-welcome-block.html
│ ├── home-news-block.html
│ ├── home-notices-block.html
│ └── home-academics-block.html
├── contact/
│ ├── contact-form-block.html
│ ├── contact-info-block.html
│ ├── contact-map-block.html
│ └── contact-hero-block.html
├── shared/
│ ├── header.html
│ ├── footer.html
│ ├── calendar-popup.html
│ ├── styles/
│ │ ├── ja-core.css
│ │ ├── ja-components.css
│ │ ├── ja-blocks.css
│ │ ├── ja-header.css
│ │ ├── ja-footer.css
│ │ └── ja-modal.css
│ └── scripts/
│ ├── ja-utils.js
│ ├── ja-nav.js
│ ├── ja-redirects.js
│ ├── ja-map.js
│ ├── ja-donation.js
│ ├── ja-news.js
│ ├── ja-modal.js
│ └── ja-calendar.js
└── docs/
└── ...(设计规范文档)
所有 Home 页面区块已移除内联 <style>/<script>,统一依赖 shared/styles/ja-blocks.css 与对应的 JS 模块:
| 区块 | 文件 | 依赖 | 说明 |
|---|---|---|---|
| Welcome / About | home/home-welcome-block.html |
ja-welcome-content 样式 |
使用标准 ja-block 栅格,无额外脚本 |
| News & Updates | home/home-news-block.html |
ja-home-news-* 样式、shared/scripts/ja-news.js |
自动从 WP REST API 拉取最新文章;可通过 data-news-api, data-news-limit, data-news-fallback, data-news-image-size 自定义 |
| Important Notices | home/home-notices-block.html |
ja-home-notices-* 样式 |
使用共享按钮 ja-btn,无脚本依赖 |
| Academic Excellence | home/home-academics-block.html |
ja-home-academics-* 样式 |
渐变背景 + highlight 列表,链接使用共享样式 |
⚠️ 使用新闻区块时请保证shared/scripts/ja-news.js已加载(默认由shared/header.html注入)。
- 样式:
shared/header.html/shared/footer.html会自动向<head>动态注入ja-core.css、ja-components.css、ja-blocks.css等公共样式文件。 - 脚本:
- 头部加载:
ja-utils.js,ja-nav.js,ja-redirects.js,ja-map.js,ja-donation.js,ja-news.js - 尾部加载:
ja-modal.js,ja-calendar.js ja-utils提供utils.initComponent,其余模块均基于该方法注册 DOM Ready / Elementor 生命周期。
- 头部加载:
- 日历弹窗:将
shared/calendar-popup.html嵌入页面后,ja-modal.js + ja-calendar.js会自动完成绑定;覆盖层已支持data-ja-modal-close。
- Header / Footer:分别把
shared/header.html、shared/footer.html粘贴到 Theme Builder 对应模板。资产加载脚本会自动注入所有依赖。 - Home 页面:按需插入上述四个 block 文件(推荐顺序:Welcome → News → Notices → Academics)。
- 其它页面:复用
contact/、give/等目录下的 block 文件,所有样式/脚本已集中在共享目录。
- 新建区块时优先复用
ja-block、ja-block-container等基础类;必要时在ja-blocks.css中新增模块化样式。 - 若区块需要交互逻辑,请在
shared/scripts/创建模块并通过JA.utils.initComponent注册,再将文件加入shared/header.html或shared/footer.html的脚本数组。 - 不再引入新的文档文件;若需补充说明,请更新本 README。
如需新增页面或扩展组件,请直接告知,我们将按上述规范继续完善。