包简介

Simple CraftCMS plugin for displaying Ottawa weather from Environment Canada with a front-end Twig template

README 文档

README

Simple, accessible weather display component for Ottawa, Ontario, using data from Environment and Climate Change Canada (ECCC). Built for Craft CMS 5 with PHP in Twig support.

Features

Self-Contained: Single Twig template with embedded PHP - no plugin required
Current Weather: Real-time temperature, humidity, wind, pressure, and conditions
Today's Forecast: Weather breakdown by time period (morning, afternoon, evening)
Bilingual: Full English and French support with translations
Accessible: WCAG 2.1 AA compliant with semantic HTML and ARIA labels
Customizable: SCSS file with variables for easy theming
Cached: 30-minute cache to optimize API calls
Official Data: Environment and Climate Change Canada API

Requirements

Craft CMS 5.x
PHP 8.0 or higher
PHP in Twig (Twig Perversion) enabled
cURL extension

Installation

1. Copy Files to Your Craft Project

Copy the files from this repository to your Craft installation:

# From this repository root, copy to your Craft project:
cp -r templates/_weather /path/to/your/craft/templates/
cp -r assets/scss /path/to/your/craft/assets/  # or wherever you keep SCSS
cp -r translations /path/to/your/craft/modules/yourmodule/  # or your module directory

2. Register Translations in Your Module

Add the translation category to your module's config/app.php:

return [
    'modules' => [
        'yourmodule' => \modules\yourmodule\Module::class,
    ],
    'components' => [
        'i18n' => [
            'translations' => [
                'weather' => [
                    'class' => craft\i18n\PhpMessageSource::class,
                    'sourceLanguage' => 'en',
                    'basePath' => '@modules/yourmodule/translations',
                    'allowOverrides' => true,
                ],
            ],
        ],
    ],
];

Or if you prefer, add it directly in your module's init() method:

public function init()
{
    parent::init();

    Craft::$app->i18n->translations['weather'] = [
        'class' => PhpMessageSource::class,
        'sourceLanguage' => 'en',
        'basePath' => __DIR__ . '/translations',
        'allowOverrides' => true,
    ];
}

3. Import SCSS

Add to your main stylesheet:

// In your main.scss
@import 'path/to/assets/scss/weather';

Customize Colors

Define variables before importing:

// Custom colors
$meteocraft-primary-color: #0066cc;
$meteocraft-background: #f8f9fa;
$meteocraft-border-color: #dee2e6;
$meteocraft-text-color: #212529;
$meteocraft-border-radius: 8px;

// Import styles
@import 'path/to/assets/scss/weather';

Usage

Basic Usage

Include the template anywhere in your Twig files:

{% include '_weather/display' %}

With Options

{% include '_weather/display' with {
    city: 'Ottawa',
    lang: 'fr'
} %}

Example Integrations

In a Layout

{# templates/_layout.twig #}
<!DOCTYPE html>
<html lang="{{ currentSite.language }}">
<head>
    <title>{{ siteName }}</title>
    <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
    <aside class="weather-sidebar">
        {% include '_weather/display' %}
    </aside>

    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

In a Page Template

{# templates/index.twig #}
{% extends "_layout" %}

{% block content %}
    <h1>Welcome</h1>

    <section class="weather-widget">
        <h2>Current Weather in Ottawa</h2>
        {% include '_weather/display' %}
    </section>
{% endblock %}

File Structure

/your-craft-project/
├── templates/
│   └── _weather/
│       └── display.twig          # Main weather display template
├── assets/
│   └── scss/
│       └── _weather.scss          # Styles with variables
└── modules/
    └── yourmodule/
        └── translations/
            ├── en/
            │   └── weather.php    # English translations
            └── fr/
                └── weather.php    # French translations

Configuration

Cache Duration

Edit the PHP block in templates/_weather/display.twig:

// Find this line (around line 145):
$cache->set($cacheKey, $weatherData, 1800);

// Change 1800 (30 minutes) to your desired duration in seconds:
$cache->set($cacheKey, $weatherData, 3600); // 1 hour

Customizing Display

The template is fully editable. Modify templates/_weather/display.twig to:

Change layout and styling
Add or remove weather data points
Adjust time periods (currently: morning 6am-12pm, afternoon 12pm-6pm, evening 6pm-12am)

Translations

Edit the translation files to customize any text:

translations/en/weather.php - English
translations/fr/weather.php - French

Data Source

API: Environment and Climate Change Canada (ECCC)
Endpoint: https://api.weather.gc.ca/collections/citypageweather-realtime
Documentation: ECCC Open Data
Location: Ottawa (Kanata - Orléans)

Accessibility

This component is WCAG 2.1 Level AA compliant:

✓ Proper semantic HTML5 elements
✓ ARIA labels and roles
✓ Keyboard accessible
✓ Screen reader friendly
✓ High contrast ratios (4.5:1+)
✓ Bilingual support

See ACCESSIBILITY.md for details.

Troubleshooting

Template shows "Unable to load weather data"

Verify server has internet connectivity
Check cURL is enabled: php -m | grep curl
Ensure PHP in Twig is enabled in your Craft config
Check logs: storage/logs/web.log
Clear cache: ./craft clear-caches/all

Translations not working

Verify translations are registered in config/app.php or your module
Check file paths match your module structure
Clear cache: ./craft clear-caches/all
Verify translation category is 'weather' (not 'meteocraft')

Styling not applied

Verify SCSS file is imported in your main stylesheet
Check file path is correct
Rebuild your CSS: npm run build or your build command
Clear browser cache

License

MIT License - see LICENSE file

Credits

Weather data: Environment and Climate Change Canada
Component by: csabourin

Support

For issues or questions: GitHub Repository

Alternative: Using with Your Existing Controller

If you prefer to use your existing controller's actionFetchJson() method instead of the embedded PHP, you can modify the template to make an AJAX call:

{# In templates/_weather/display.twig, replace the {% php %} block with: #}
<div class="meteocraft-weather-display" data-url="{{ url('external-api-data/data/fetch-json', {
    url: 'https://api.weather.gc.ca/collections/citypageweather-realtime/items?f=json&limit=1&q=Ottawa'|url_encode
}) }}">
    <div class="loading">Loading weather data...</div>
</div>

{# Add JavaScript to fetch and render #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.meteocraft-weather-display');
    const url = container.dataset.url;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Parse and render weather data
            // ... your rendering logic
        });
});
</script>

However, note that your current controller only allows services2.arcgis.com in the allowlist, so you'd need to add api.weather.gc.ca to use it for weather data.

csabourin/meteocraft 适用场景与选型建议

csabourin/meteocraft 是一款基于 Twig 开发的 Composer 扩展包，目前已累计 10 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 12 月 02 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「twig」「weather」「accessibility」「wcag」「craftcms」「bilingual」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 csabourin/meteocraft 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 csabourin/meteocraft 我们能提供哪些服务？

定制开发 / 二次开发

基于 csabourin/meteocraft 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 csabourin/meteocraft 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

shoot/shoot 40

Shoot aims to make providing data to your templates more manageable

erelke/twig-spreadsheet-bundle 2

This Symfony bundle integrates PhpSpreadsheet into Symfony using Twig.

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

elao/accesseo 29

Provide accessibility and SEO insights of your page in Symfony profiler

nwidart/laravel-forecast 2

Laravel-forecast provides a service provider and a facade around the Forecast-php wrapper

csabourin/meteocraft

包简介

关键字：