Intégration hors Ghost

Le widget fonctionne sur n'importe quelle page HTML. Voir demo.html pour des exemples concrets.

Intégration en 2 étapes

1. Ajouter le CSS et le JS

Copier le bloc <style> et le bloc <script> depuis ghost-inject.html dans votre page. Adapter API_URL :

<style id="ti-styles">
  /* ... contenu de ghost-inject.html ... */
</style>

<script>
  /* ... contenu de ghost-inject.html ... */
  var API_URL = 'https://torrent-api.monsite.com';
</script>

Le script se place de préférence juste avant </body>.

2. Placer les widgets dans le HTML

<!-- Compact -->
<div class="torrent-indicator"
     data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
     data-label="Ubuntu 24.04 LTS"></div>

<!-- Large -->
<div class="torrent-indicator"
     data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
     data-label="Ubuntu 24.04 LTS"
     data-layout="wide"></div>

Cas d'usage

Page de téléchargement

<h2>Télécharger</h2>
<div class="torrent-indicator"
     data-magnet="magnet:?xt=urn:btih:3b245504..."
     data-label="Ubuntu 24.04 LTS"
     data-layout="wide"></div>
<a href="magnet:?xt=urn:btih:3b245504...">Ouvrir le magnet</a>

Tableau comparatif de plusieurs torrents

<div style="display:flex; gap:16px; flex-wrap:wrap;">
  <div class="torrent-indicator"
       data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
       data-label="Ubuntu 24.04"></div>

  <div class="torrent-indicator"
       data-hash="9bb80f655e2a0490b1ed7b19b63a7b2acacffe0e"
       data-label="Debian 12"></div>
</div>

Création dynamique via JavaScript

<button onclick="addWidget()">Vérifier le torrent</button>
<div id="result"></div>

<script>
function addWidget() {
  var el = document.createElement('div');
  el.className = 'torrent-indicator';
  el.setAttribute('data-hash', '3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0');
  el.setAttribute('data-layout', 'wide');
  document.getElementById('result').appendChild(el);
  TorrentIndicator.init(el);
}
</script>

Rafraîchissement manuel

// Rafraîchir tous les widgets de la page
TorrentIndicator.refreshAll();

Compatibilité

Navigateurs modernes (Chrome, Firefox, Safari, Edge)
Aucune dépendance externe
Fonctionne avec : sites statiques, WordPress, Joomla, Drupal, forums, etc.

2.3 KiB Raw Blame History