Ein Lovable-Projekt verbindet sich mit Universally mit einem Skript-Tag im gemeinsamen <head>, das jede Seite rendert. Sie können Lovable bitten, es mit einer Eingabeaufforderung hinzuzufügen, oder es selbst im Code-Modus einfügen. Das Tag rendert den Sprachumschalter und übersetzt jede Seite im Browser des Besuchers, sodass Ihre URLs in jeder Sprache gleich bleiben, ohne dass DNS geändert werden muss. JavaScript Serving Mode erklärt, wie die Übersetzung funktioniert und was sie weglässt.
Bevor Sie beginnen
- Ein serverseitiges Projekt. Ihre veröffentlichten Seiten müssen ihren Text in der vom Server gesendeten HTML-Datei enthalten. Inhalte, die nur im Browser gerendert werden, wie in einer clientseitig gerenderten Vite-App, werden noch nicht unterstützt.
- Die Rolle "Owner" oder "Admin" in Ihrem Universally-Arbeitsbereich, um das Projekt zu erstellen und dessen Snippet anzuzeigen. Editoren sehen "Bitten Sie einen Projektadministrator um das Installations-Snippet für dieses Projekt." anstelle der Zeile.
- Ein veröffentlichtes Projekt auf Ihrer eigenen Domain. Die Verbindungsprüfung sieht nur, was veröffentlicht wurde.
Projekt erstellen
- Starten Sie ein neues Projekt. Wählen Sie unter Wählen Sie Ihre Technologie Lovable.
- Geben Sie Domain ein, die vollqualifizierte Domain, auf der Ihr Projekt veröffentlicht ist, z. B.
example.com. Wenn die Domain noch nicht auflösbar ist, sehen Sie eine Warnung, und Sie können trotzdem fortfahren. - Geben Sie Projektname ein, überprüfen Sie Quellsprache (standardmäßig Englisch (US)) und klicken Sie auf Weiter.
Lovable-Projekte haben keinen Serving Mode zur Auswahl, daher ist der nächste Bildschirm Snippet hinzufügen. Sprach-Subdomains sind für Lovable-Websites noch nicht verfügbar: Ihre Website wird vom Snippet auf ihren eigenen Adressen übersetzt.
Fügen Sie den Snippet hinzu
Der Schritt Snippet hinzufügen zeichnet Ihre Zeile in einer Beispielseite ein. Das Dashboard füllt den Projektschlüssel aus:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>
Lassen Sie Lovable es hinzufügen. Klicken Sie auf Eingabeaufforderung kopieren, öffnen Sie Ihr Projekt in Lovable und fügen Sie die Eingabeaufforderung in den Chat ein. Dies verbraucht ein Lovable-Guthaben. Die Eingabeaufforderung endet mit Ihrer Zeile:
Add this script tag to the shared document <head> of this server-rendered project so it loads on every page. Use the root layout or document for this project's framework, preserve server rendering, and keep everything else as it is:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>
Oder fügen Sie es selbst im Code-Modus ein. Auf einem kostenpflichtigen Lovable-Plan klicken Sie auf Zeile kopieren, wechseln Sie zu Code und fügen Sie die Zeile in den <head> Ihrer App im gemeinsamen Stamm-Layout oder Dokument ein, das zum Rendern jeder Seite verwendet wird. Es wird kein Guthaben verbraucht.
Die Schaltflächen Als abgeschlossen markieren auf dem Bildschirm werden in Ihrem Browser gespeichert und sperren nichts.
Veröffentlichen und Verbindung prüfen
- Veröffentlichen Sie Ihr Projekt in Lovable. Die Vorschau ist nicht die veröffentlichte Website, und die Prüfung sieht nur, was veröffentlicht wurde.
- Zurück in Universally, klicken Sie auf Verbindung prüfen.
Die Prüfung lädt Ihre Homepage und sucht nach der Zeile. Gefunden bedeutet, dass die Zeile auf Ihrer Domain vorhanden ist, zu diesem Projekt gehört und nichts weiter installiert werden muss. Verbindung prüfen bestätigt, dass das Skript installiert ist. Es prüft nicht, ob Ihr Inhalt übersetzt werden kann.
Für Ihre Besucher ändert sich noch nichts. Die Zeile lädt nur die Universally-Datei, und Ihre Website beginnt mit der Bereitstellung von Übersetzungen, sobald Sie im nächsten Schritt Sprachen hinzufügen.
Fortfahren und Ich mache das später führen beide zu Sprachen hinzufügen, und nichts wartet auf die Prüfung. Die Zeile bleibt auf der Seite Einrichtung des Projekts unter Die Zeile, die Ihre Website benötigt.
Sprachen hinzufügen
- Klicken Sie auf Sprachen hinzufügen und beantworten Sie die Frage „In welche Sprachen möchten Sie übersetzen?“ mit mindestens einer Zielsprache.
- Klicken Sie auf Fertig stellen. Diese Schaltfläche bleibt deaktiviert, bis das Projekt eine Sprache hat.
Der Sprachdialog zeigt immer noch URL-Format an, aber der Wert wird bei Lovable nicht verwendet, da sich Ihre URLs nie ändern. Jede Sprachzeile unter Alle Sprachen hat einen Live-Schalter. Siehe Sprachen hinzufügen und entfernen.
Überprüfen Sie, ob es funktioniert hat
- Öffnen Sie Ihre veröffentlichte Website in einem privaten Fenster. Ein erstmaliger Besucher wird automatisch seiner Browsersprache zugeordnet. Ein Browser, der auf eine Ihrer Zielsprachen eingestellt ist, sieht die übersetzte Seite.
- Finden Sie den Sprachumschalter in der oberen rechten Ecke mit Flaggen und Sprachnamen.
- Wählen Sie eine Sprache aus. Die Seite wird in dieser Sprache unter derselben Adresse neu geladen.
Um zu sehen, wie viel einer Seite übersetzt wurde, fügen Sie ?uni_debug=1 zur URL hinzu und öffnen Sie die Browserkonsole.
Wenn es nicht funktioniert
- Wir haben Ihre Domain geladen, aber die Zeile war nicht auf der Seite: Die Änderung wurde nicht veröffentlicht, oder die Zeile wurde an einen anderen Ort als den gemeinsamen
<head>eingefügt. Veröffentlichen Sie und prüfen Sie erneut. Die Prüfung betrachtet nur Ihre Homepage. - Gefunden, aber die Seite bleibt in der Quellsprache: Der Text wird nur im Browser gerendert, also nicht im HTML, das der Server sendet. Das wird noch nicht unterstützt.
- Diese Zeile gehört zu einem anderen Projekt: Die Zeile eines anderen Projekts befindet sich auf der Website. Ersetzen Sie sie durch die Zeile auf der Seite Einrichtung dieses Projekts und überprüfen Sie sie dann erneut.
- Es erscheint kein Umschalter: Das Projekt hat noch keine live Zielsprache. Fügen Sie eine hinzu oder aktivieren Sie deren Live-Schalter.
Weitere Fälle finden Sie unter Übersetzungen werden nicht angezeigt und Der Umschalter ist nicht sichtbar.