기본 통합은 간단하고 간단합니다. 먼저 다음 코드 부분을 추가해야 합니다.

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

그런 다음 위젯을 포함하려면 다음 코드를 추가하세요.

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

`_aqiFeed` 함수는 위젯의 구성 블록을 인수로 사용합니다. `container: "city-aqi-container"` 매개변수는 위젯을 삽입하려는 태그의 ID를 나타냅니다(예: `<span id='city-aqi-container'></span>`). 매개변수 city 현재 대기 질 측정값을 표시하려는 도시 이름입니다(예: `city: "london"`).

lang 옵션을 설정하여 사용할 언어를 지정할 수도 있습니다. 예를 들어, 중국어로 위젯을 포함하려면(오른쪽에 표시된 대로) 다음 코드를 사용하세요.

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

현재 지원되는 언어는 다음과 같습니다.

display 옵션을 지정하여 위젯 내에 표시될 텍스트를 사용자 정의할 수 있습니다. 예를 들어 텍스트 "AQI" 이름과 업데이트 시간(왼쪽 위젯에 표시됨)을 모두 표시하려면 다음 코드를 사용할 수 있습니다.

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

매개변수 display 는 HTML 기반 문자열이며 다음 키워드 중 하나를 포함할 수 있습니다.

• 도시 이름은 `%cityname`(예: Beijing ),
• 장식된 AQI 값에 대한 `%aqi`(예: 58 ),
• 장식되지 않은(원시 텍스트) AQI 값(예: 58 )에 대한 `%aqiv`,
• 장식된 AQI 세부정보의 CSS 선언을 위한 `%style`(예: background-color: #ffde33;color:#000000; ),
• AQI가 업데이트된 시간에 대한 `%date`(예: Wed 20:00 ),
• 관련된 건강 영향에 대한 `%impact`(예: Good , Moderate ...)
• AQI 데이터 속성에 대한 `%attribution`(예: Beijing Environmental Protection Monitoring Center )
• 전체 AQI 세부정보에 대한 `%details`(AQI 값 위로 마우스를 이동할 때 표시되는 팝업 내용)

다음은 몇 가지 예입니다.

DIY 통합을 선호하는 경우 데이터가 로드될 때 자바스크립트 함수 콜백을 지정할 수도 있습니다. 예를 들어 매개변수 블록에 옵션 callback 추가하기만 하면 됩니다.

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

예를 들어 jquery도 사용한다고 가정하면 다음 코드는 다음과 같습니다.

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

다음 콘텐츠를 생성합니다.

aqi 개체에는 섹션 C(표시 형식)에 언급된 모든 키워드가 포함되어 있습니다.

단일 페이지에 여러 위젯을 포함할 수 있습니다. 필요한 것은 포함해야 하는 모든 위젯이 포함된 배열을 `_aqiFeed` 함수에 전달하는 것뿐입니다. 예를 들어 런던, 파리, 뉴욕을 삽입하려면 다음 코드를 사용할 수 있습니다.

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

이 위젯 피드는 무료로 제공되며, 피드를 다른 웹사이트에 통합하기 위한 목적으로만(예: 앱 제외) 합리적이고 허용 가능한 사용 조건 하에 제공됩니다. 당사는 언제든지 사전 통지 없이 피드 구조(데이터 형식)를 변경할 권리를 보유하므로 맞춤 통합을 계획하는 경우 당사에 문의하는 것이 좋습니다.

통합을 수행할 때 데이터 피드를 사용할 때 적용해야 하는 몇 가지 의무론적 규칙이 있습니다.

• 첫째, 원래 EPA에 대한 속성이 존재하는지 항상 확인하십시오. 세계 대기 질 지수(World Air Quality Index) 프로젝트에서 찾을 수 있는 모든 대기 질 데이터는 전 세계 EPA의 노력 덕분입니다. 따라서 해당 작업에 대한 귀속도 꼭 제공하시기 바랍니다. 프로그래밍 방식 API를 사용하는 경우 attribution 필드에서 속성을 사용할 수 있습니다.
• 기관 출신이고 데이터를 사용하는 경우 존경심을 표하고 우리 작업에 대한 크레딧을 갚으십시오. 데이터 피드를 스크랩하려는 경우 이 프로젝트는 후원 및 협력 프로젝트에 의존한다는 점을 명심하시기 바랍니다. 특히 대규모 기관이나 대학인 경우 폐기보다는 지원을 고려하시기 바랍니다.
• 사실, WRI ( 세계 자원 연구소 )처럼 행동하지 마십시오. 전체 세계 대기 질 지수 (World Air Quality Index) 프로젝트 데이터 피드를 폐기하고 너무 저렴해서 우리 작업에 대한 어떤 귀속도 제공하지 않을 것입니다. 수백만 달러의 연간 자금 지원. 우리를 믿지 못하시나요? 이 스냅샷을 확인하세요.

이는 새로운 위젯 피드 API의 첫 번째 버전입니다. 조정 가능한 그래픽 너비 및 높이, 선택 가능한 AQI 척도 등 파이프라인에는 이미 몇 가지 개선 사항이 있습니다. 다른 구체적인 개선 사항을 제안하고 싶으시면 언제든지 메시지를 보내주세요.