অল-ইন-ওয়ান সরলীকৃত স্ক্রিপ্ট
একটি একক স্ক্রিপ্ট ব্যবহার করে:
<script src="https://aqicn.org/jswgtx/?station=A373120&size=xxl"></script>
30 |
অথবা একটি iframe ব্যবহার করে:
<iframe src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&iframe"></iframe>
স্ক্রিপ্ট ব্যবহার করার সময় আপনি একটি ধারক শনাক্তকারী ('div' id) নির্দিষ্ট করতে পারেন:
<div id='widget1' style='text-align: center'></div>
<script async src="https://aqicn.org/jswgtx/?station=A373120&size=xxl&container=widget1"></script>
30 |
শেষ, তবে অন্তত নয়, আপনি প্রদর্শন শৈলীও পরিবর্তন করতে পারেন তবে
size
প্যারামিটার পরিবর্তন করতে পারেন এর মধ্যে একটিতে: xxl
, xlarge
, large
, medium
, small
, xsmall
. (ভিজ্যুয়াল ফলাফলের জন্য নীচে দেখুন) উন্নত স্ক্রিপ্টিং সেটআপ
মৌলিক ইন্টিগ্রেশন সহজ এবং সোজা এগিয়ে. আপনাকে প্রথমে নিম্নলিখিত কোডটি যোগ করতে হবে:
<script src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>
তারপর, উইজেটটি অন্তর্ভুক্ত করতে এই অন্য কোডটি যোগ করুন:
<script>_waqiFeed({ size: "xxl", station:"A373120"});</script>
'_waqiFeed' ফাংশনটি উইজেটের কনফিগারেশনের যুক্তি হিসেবে নেয়। আপনি শুধু স্টেশন সংজ্ঞায়িত করতে হবে, এবং উইজেট প্রদর্শন শৈলী ( size
)। এটি যা উত্পাদন করে:
30 |
আপনি কন্টেইনার আইডেন্টিফায়ার ('div' id) উল্লেখ করতে পারেন যেখানে উইজেটটি দেখানো প্রয়োজন:
<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>
<script>_waqiFeed({ size: "xxl", station:"A373120", container:"widget2" });</script>
30 |
প্রদর্শন বিন্যাস উল্লেখ করা
size
প্যারামিটার পরিবর্তন করে ডিসপ্লে ফরম্যাট পরিবর্তন করা যেতে পারে এর মধ্যে একটিতে:
-
Not Available
Updated on Friday, Feb 2nd 2024
| |||||||
_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
), - অশোভিত (কাঁচা লেখা) AQI মানের জন্য `%aqiv` (যেমন
58
), - সজ্জিত AQI বিবরণের CSS ঘোষণার জন্য `% স্টাইল` (যেমন
background-color: #ffde33;color:#000000;
), - `% তারিখ` যে সময়ে AQI আপডেট করা হয়েছিল (যেমন
Wed 20:00
), - সম্পর্কিত স্বাস্থ্য প্রভাবের জন্য `% প্রভাব` (যেমন
Good
,Moderate
...) - AQI ডেটা অ্যাট্রিবিউশনের জন্য `% অ্যাট্রিবিউশন` (যেমন
Beijing Environmental Protection Monitoring Center
) - সম্পূর্ণ AQI বিবরণের জন্য `% বিবরণ` (AQI মানের উপর মাউস সরানোর সময় প্রদর্শিত পপআপের বিষয়বস্তু)।
এখানে কিছু উদাহরণ আছে:
%cityname Air Quality is <b>%impact</b>. | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is Not Available. | |||
%aqi <small>(%impact)</small> | - (Not Available) | |||
<span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia AQI: Not Available | |||
%cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is Not Available
( - on Friday 1:00) | |||
%cityname Air Quality is provided by %attribution | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia Air Quality is provided by Ciencia ciudadana por la Calidad del Aire | |||
<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> | Abago BogPAranda TIB 2 18b77c, Bogota, Colombia AQI:
- | |||
<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 | -
Not Available
Updated on Friday, Feb 2nd 2024
|
ভাষা নির্দিষ্ট করা
আপনি lang
অপশন সেট করে ব্যবহার করা ভাষাও উল্লেখ করতে পারেন। উদাহরণস্বরূপ, উইজেটটি চীনা ভাষায় অন্তর্ভুক্ত করতে (যেমন ডানদিকে দেখানো হয়েছে), নিম্নলিখিত কোডটি ব্যবহার করুন:
<script>_waqiFeed({ size: "xxl", station:"A373120", lang:"cn"});</script>
বর্তমানে সমর্থিত ভাষাগুলি হল:
"en"
: English"cn"
: Chinese"jp"
: Japanese"es"
: Spanish"kr"
: Korean"ru"
: Russian"hk"
: Traditional Chinese"fr"
: French"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
সেট করা হয় তবে ইংরেজি ব্যবহার করা হয়।
আবারও কোন প্রশ্ন করা
উদাহরণ
সংশ্লিষ্ট কোড দেখতে নিচের যেকোনো উইজেটে ক্লিক করুন: