Skip to content

YaoS-Code/ja-website

Repository files navigation

Johnathan Academy 前端资源说明

📁 更新后的目录结构(节选)

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 页面 Blocks

所有 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.cssja-components.cssja-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

🌐 在 Elementor 中使用

  1. Header / Footer:分别把 shared/header.htmlshared/footer.html 粘贴到 Theme Builder 对应模板。资产加载脚本会自动注入所有依赖。
  2. Home 页面:按需插入上述四个 block 文件(推荐顺序:Welcome → News → Notices → Academics)。
  3. 其它页面:复用 contact/give/ 等目录下的 block 文件,所有样式/脚本已集中在共享目录。

🧩 开发约定

  • 新建区块时优先复用 ja-blockja-block-container 等基础类;必要时在 ja-blocks.css 中新增模块化样式。
  • 若区块需要交互逻辑,请在 shared/scripts/ 创建模块并通过 JA.utils.initComponent 注册,再将文件加入 shared/header.htmlshared/footer.html 的脚本数组。
  • 不再引入新的文档文件;若需补充说明,请更新本 README。

📞 支持

如需新增页面或扩展组件,请直接告知,我们将按上述规范继续完善。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors