Виджетийн баримт бичиг
Currency.Wiki валютын хөрвүүлэгч виджетийг вэбсайтдаа суулгах, тохируулах бүрэн гарын авлага.
Агуулгын жагсаалт
1 Эхлэх
Валютын хөрвүүлэгч виджетийг вэбсайтдаа нэмэхэд хялбар. Эдгээр энгийн алхмуудыг дагаарай:
- Виджет бүтээх хуудсанд очиж виджетийнхээ гадаад төрхийг тохируулна уу
- Хүссэн загвар, валют, сэдвээ сонгоно уу
- Үүссэн суулгах кодыг (Скрипт эсвэл Iframe) хуулна уу
- Кодыг вэбсайтынхаа HTML-д виджет гарч ирэх хэсэгт байрлуулна уу
Зөвлөгөө: Виджет бүтээх хэсгийн Түргэн эхлэх загваруудыг ашиглан хурдан эхэлж болно.
2 Суулгах аргууд
Скрипт суулгалт (Зөвлөмжтэй)
Скрипт суулгах арга нь виджетийг шууд хуудсанд оруулна. Валютын унах цэс нь эргэн тойрны контентын дээр гарч ирнэ.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Унах цэс нь виджетийн савнаас гадуур гарна
- Валютыг интерактив сонгоход хамгийн тохиромжтой
- Хуудсанд төгс уусна
Iframe суулгалт
Iframe суулгах арга нь виджетэд тусгаарлагдсан сав үүсгэнэ. Энэ арга аюулгүй бөгөөд хатуу контентын бодлоготой орчинд ажиллана.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Хуудсын загвараас бүрэн тусгаарлагдана
- Хатуу Content Security Policy-тэй ажиллана
- Энгийн, аюулгүй хэрэгжүүлэлт
Тэмдэглэл: Бүрэн интерактив байдалд Скрипт суулгалтыг ашиглана уу (унах цэс контентын дээр гарна). Тусгаарлалт эсвэл CSP шаардлагатай бол Iframe суулгалтыг ашиглана уу.
3 Виджетийн загварууд
Вэбсайтынхаа дизайнд тохируулах 11 өөр виджетийн загвараас сонгоорой. Бүр загвар нь өөр өөр хэрэгцээнд тохирсон.
mini
250x140px
Нэг мөрт компакт хөрвүүлэгч. Толгой хэсэг эсвэл багтаамж багатай хэсэгт тохиромжтой.
square
250x250px
1:1 харьцаатай виджет, солих товчтой. Хажуугийн самбарт тохиромжтой.
compact
300x180px
Бүх шаардлагатай боломжтой жижиг хөрвүүлэгч.
inline
480x56px
Хэвтээ байрлалтай. Контент эсвэл навигац дотор суулгахад тохиромжтой.
tall
200x280px
Босоо хажуугийн самбарын байрлал, классик шошготой.
mini-chart
250x260px
Өнгөрсөн ханшийн графиктай компакт хөрвүүлэгч.
multi-expandable
300x320px
Олон валютын хөрвүүлэгч. Хэрэглэгчид валют нэмэх/хасах боломжтой.
multi-fixed
300x300px
Тогтмол ханшийн жагсаалт. Тодорхой ханш харуулахад тохиромжтой.
rates-compact
250x320px
Шинэчлэгдсэн цагтай богино ханшийн жагсаалт.
rates-viewer
300x500px
Дэлгэрэнгүй ханшийн мэдээлэл бүхий бүрэн график харагдац.
rates-viewer-compact
300x400px
Графиктай богино ханшийн харагдац.
4 URL параметрүүд
Виджетээ URL параметрээр тохируулна уу. Эдгээр параметрүүд нь Скрипт болон Iframe суулгалтын аль алинд ажиллана.
| Параметр | Үндсэн утга | Тайлбар |
|---|---|---|
| style | compact | Виджетийн загвар (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Өнгөний сэдэв (light, dark, эсвэл auto) |
| from | USD | Эх валютын код (жишээ нь USD, EUR, GBP) |
| to | EUR | Зорилтот валютын код (жишээ нь EUR, USD, JPY) |
| amount | 1000 | Хөрвүүлэх үндсэн дүн |
| accent | #2563eb | Онцлох өнгө (hex, #гүйгээр) |
| lang | en | Виджетийн хэлний код (жишээ нь en, es, fr, de) |
| flags | 1 | Улсын далбаа харуулах (1=харуулах, 0=нуух) |
| display | iso | Валютын харуулах формат (iso=USD, symbol=$) |
| lock | 0 | Валютыг түгжих (1=түгжих, 0=түгжихгүй) |
| currencies | EUR,GBP,JPY | Олон валютын виджетэд зориулсан валютын жагсаалт (таслалаар тусгаарласан) |
| dropdown | all | Унах цэсний валютууд (all, top10, top20, эсвэл жагсаалт) |
| branding | 1 | Брэнд харуулах (1=харуулах, 0=нуух) |
| brandinglink | 1 | Брэндийг товшиж болох эсэх (1=холбоос, 0=зөвхөн текст) |
| format | auto | Тоо формат (auto, us, eu, french, indian) |
| decimals | 2 | Аравтын оронгийн тоо (0-6) |
| chart | 0 | График идэвхжүүлэх (1=идэвхтэй, 0=идэвхгүй) |
| chartperiod | 7d | Графикийн хугацаа (7d, 14d, 30d, 90d) |
Жишээнүүд
Харанхуй сэдэвтэй компакт хөрвүүлэгч:
?style=compact&theme=dark&from=USD&to=EUR
Олон валютын ханш:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
30 хоногийн графиктай мини хөрвүүлэгч:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Кодын оронд валютын тэмдэг харуулах:
?style=compact&display=symbol&from=USD&to=EUR
Гаалийн дүнтэй түгжсэн валютууд:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Тохируулгын сонголтууд
Сэдвийн сонголтууд
- light - Цайвар дэвсгэр, хараар бичигдсэн
- dark - Харанхуй дэвсгэр, цайвар бичигдсэн
- auto - Хэрэглэгчийн системийн тохиргоотой автоматаар таарна
Валютын харуулах формат
- iso - USD, EUR, GBP гэх мэт ISO кодыг харуулна
- symbol - $, €, £ гэх мэт валютын тэмдэг харуулна
Тоо формат
- auto - Зочны хөтчийн тохиргоог автоматаар илрүүлнэ
- us - АНУ формат: 1,234.56
- eu - Европ формат: 1.234,56
- french - Франц формат: 1 234,56
- indian - Энэтхэг формат: 1,23,456.78
Унах цэсний валютын сонголтууд
- all - Бүх 170+ дэмжигдсэн валют
- top10 - Хамгийн түгээмэл 10 валют
- top20 - Арилжааны хэмжээгээр топ 20 валют
- USD,EUR,GBP,... - Тодорхой валютын гаалийн жагсаалт
Зөвлөгөө: Виджет бүтээх хэсгийг ашиглан эдгээр бүх сонголтыг харагдах байдлаар тохируулж, суулгах кодыг автоматаар үүсгээрэй.
6 Гэмтэл олж засварлах
Виджет харагдахгүй байна
Суулгах кодыг HTML-д зөв байрлуулсан эсэхээ шалгаарай. Скрипт суулгалтын үед контейнер div зөв ID-тай байх ёстой. Хөтчийн консол дээр JavaScript алдаа байгаа эсэхийг шалгаарай.
Унах цэс ажиллахгүй байна
Iframe суулгалтын үед унах цэс виджетийн дотор гүйлгэнэ. Бүрэн боломжтой унах цэстэй байхыг хүсвэл скрипт суулгалтыг ашиглана уу.
Загварын зөрчил
Вэбсайтын CSS виджетийн гадаад төрхийг өөрчилж байвал, виджетийн загварыг тусгаарлах Iframe суулгалтыг ашиглана уу.
Content Security Policy асуудал
Хэрэв хатуу CSP байгаа бол currency.wiki-г script-src болон frame-src-д зөвшөөрөх шаардлагатай. Жишээ: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Тусламж хэрэгтэй юу?
Хайсан зүйлээ олж чадахгүй байна уу? Манай дэмжлэгийн баг туслахад бэлэн.
