🇬🇧
一體化簡化腳本
使用單一腳本:
<script src="https://aqicn.org/jswgtx/?station=A504499&size=xxl"></script>
38
Good
Updated on Sunday 8:00
38 | ||
13 |
或使用 iframe:
<iframe src="https://aqicn.org/jswgtx/?station=A504499&size=xxl&iframe"></iframe>
您也可以在使用腳本時指定容器識別碼('div' id):
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A504499&size=xxl&container=widget1"></script>
38
Good
Updated on Sunday 8:00
38 | ||
13 |
最後但並非最不重要的一點是,您也可以變更顯示樣式,但將
size
參數變更為以下其中之一: xxl
, xlarge
, large
, medium
, small
, xsmall
. (請參閱下面的視覺結果) 進階腳本設定
基本整合簡單而直接。首先需要加入以下程式碼:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>
然後,只需添加其他程式碼即可包含該小部件:
<script>_waqiFeed({ size: "xxl", station:"A504499"});</script>
函數“_waqiFeed”將小部件的配置作為參數。您只需要定義電台和小工具顯示樣式( size
)。這是產生的:
38
Good
Updated on Sunday 8:00
38 | ||
13 |
您也可以指定需要顯示小部件的容器識別碼(“div”id):
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A504499", container:"widget2" });</script>
38
Good
Updated on Sunday 8:00
38 | ||
13 |
指定顯示格式
可以透過將size
參數變更為以下之一來變更顯示格式:
38
Good
Updated on Sunday 8:00
| ||||||||||
_waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ | _waqiFeed({ |
先進的模板引擎
可以透過指定display
選項來自訂要在小部件中顯示的文字。例如,要顯示文字「AQI」名稱以及更新時間(如左側小工具所示),您可以使用以下程式碼:
_waqiFeed({ display:"%cityname AQI is <span style='%style'>%impact (%aqiv)</span> <small>on %date</small>", station:"A373120" });
參數display
是一個基於HTML的字串,可以包含以下任意關鍵字:
- `%cityname` 為城市名稱(例如
Beijing
), - `%aqi` 表示修飾後的 AQI 值(例如
58
), - `%aqiv` 表示未修飾的(原始文字)AQI 值(例如
58
), - `%style` 用於裝飾 AQI 詳細資訊的 css 宣告(例如
background-color: #ffde33;color:#000000;
), - `%date` 表示 AQI 更新的時間(例如
Wed 20:00
), - `%impact` 表示相關的健康影響(例如
Good
、Moderate
...) - 「%attribution」為AQI資料歸屬(如
Beijing Environmental Protection Monitoring Center
) - `%details` 取得完整的 AQI 詳細資訊(將滑鼠移到 AQI 值上時顯示的彈出視窗內容)。
這裡有一些例子:
%cityname Air Quality is <b>%impact</b>. | Mühlhausen Wanfrieder Str, Felchta, Germany Air Quality is Good. | ||||||
%aqi <small>(%impact)</small> | 38 (Good) | ||||||
<span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Mühlhausen Wanfrieder Str, Felchta, Germany AQI: Good | ||||||
%cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Mühlhausen Wanfrieder Str, Felchta, Germany Air Quality is Good
( 38 on Sunday 8:00) | ||||||
%cityname Air Quality is provided by %attribution | Mühlhausen Wanfrieder Str, Felchta, Germany Air Quality is provided by Thüringer Landesamt für Umwelt, Bergbau und Naturschutz | ||||||
<div style='%style;max-width:180px;text-align:center;line-height:1.2;'><div style='height:30px'><small>%cityname AQI:</small></div> <div style='font-size:88px;height:110px;'>%aqiv</div> %impact</div> | Mühlhausen Wanfrieder Str, Felchta, Germany AQI:
38 | ||||||
<table style='width:100%;line-height:1.2'><tr><td style='width:38%;%style;text-align:center;font-size:88px;'>%aqiv</div><td style='width:62%;'>%cityname AQ<div style='font-size:32px;'>%impact</div><small>updated on %date</small></table> |
| ||||||
%details | 38
Good
Updated on Sunday 8:00
|
指定語言
...
您也可以透過設定lang
選項來指定要使用的語言。例如,要包含中文小工具(如右圖所示),請使用下列程式碼:
<script>_waqiFeed({ size: "xxl", station:"A504499", lang:"cn"});</script>
目前支援的語言有:
"en"
: 英語"cn"
: 簡體中文"jp"
: 日本"es"
: 西班牙人"kr"
: 韓國"ru"
: 俄"hk"
: 繁體中文"fr"
: 法國人"pl"
: Polish"de"
: German"pt"
: Portuguese"vn"
: Vietnamese"it"
: Italian"id"
: Indonesian"nl"
: Dutch"fa"
: Persian"th"
: Thai"hu"
: Hungarian"el"
: Greek"ro"
: Romanian"bg"
: Bulgarian"ur"
: Urdu"hi"
: Hindi"ar"
: Arabic"sr"
: Serbian"bn"
: Bangla"hu"
: Hungarian"bs"
: Bosnian"hr"
: Croatian"tr"
: Turkish"uk"
: Ukrainian"cs"
: Czech"be"
: Belarusian"km"
: Khmer"lo"
: Lao 如果未指定或設定為null
,則使用英文。
進一步的問題
例子
點擊下面的任何小部件即可查看相關程式碼:
38
優
更新时间 星期天8:00
|