Přidání About boxu na web v HTML a JavaScriptu

Živá ukázka

Toto je About box samotné aplikace AboutTheApp. Přepnutím varianty uvidíte další podoby. Kód níže zobrazí přesně tento box. Pro svou aplikaci v něm změňte alias.

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Přidání About boxu na stránku ve 3 krocích

About box je Web Component, tedy vlastní HTML prvek, který podporují všechny současné prohlížeče. Funguje na statické stránce, v šabloně generované na serveru i uvnitř libovolné JavaScriptové aplikace.

1. 1

   Vytvořte si produkt

   Vytvořte ho v AboutTheApp a poznamenejte si jeho alias. V panelu Integrovat na kartě produktu najdete stejný kód jako v živé ukázce, už s vaším aliasem.

2. 2

   Načtěte skript

   Vložte skript do stránky jednou, například před uzavírací značku body. Kód v živé ukázce odkazuje na přesnou verzi skriptu a obsahuje atribut integrity.

3. 3

   Umístěte prvek

   Vložte <about-the-app alias="aboutthe.app"></about-the-app> tam, kde se má box zobrazit, například do patičky nebo na stránku O aplikaci.

<footer>
  <about-the-app alias="aboutthe.app" variant="footer"></about-the-app>
</footer>

<script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script>

Výběr podoby a vzhledu

Podobu About boxu určuje atribut variant: card (výchozí), footer, compact, dialog, support, version, maker, credits nebo link. V živé ukázce výše je můžete přepínat a vidět každou s reálnými daty.

Vzhled nastavují atributy visual-style, palette a appearance. Pokud nastavíte visual-style="host" a palette="host", box převezme písmo, zaoblení a barvy z vaší stránky, což se hodí do patičky a menu. Jednotlivé barvy můžete přepsat proměnnými CSS --ata-*.

Verze, která na webu opravdu běží

Bez atributu version ukazuje box verzi zapsanou v AboutTheApp. Pokud vaše sestavení zná vlastní verzi, předejte ji v atributu version a box ukáže přesně tuto hodnotu. Poznámky k vydání se zobrazí, pokud stejná verze existuje v katalogu verzí produktu a je veřejná nebo je neveřejná a box je odemčený odemykacím kódem.

Prvek reaguje na změny atributů, takže verzi může nastavit i skript po načtení stránky. Pokud nevíte, jak dostat verzi do sestavení, přečtěte si článek Zobrazení verze aplikace.

<about-the-app alias="aboutthe.app" variant="version" version="1.4.2"></about-the-app>

<script>
  // Nebo ji nastavte později, například z hodnoty, kterou vloží sestavení:
  document.querySelector("about-the-app").setAttribute("version", "1.4.2");
</script>

Časté otázky