Auf dieser Seite
hilf mit beim Übersetzen

Dieses Dokument wurde von der Community übersetzt. Dokumentation hier übersetzen: Crowdin Vielen Dank für die Mitarbeit🙏

Einbetten von Inhalten

Du kannst Notizen und Zeitleisten vom Misskey-Server in deine Website einbinden, sowie flexibel an das Design deiner Website anpassen.

In diesem Abschnitt wird erläutert welche Inhalte eingebettet werden kann und wie das funktioniert.

Achtung

Diese Funktion ist ab Misskey v2024.9.0 verfügbar.

Hinweis

Es unterstützt auch MFM und benutzerdefinierte Emojis, aber das Layout kann je nach Darstellung, die Einbettungsseite im Design verändern.

Codes Generieren

Alle im Folgenden beschriebenen Einbettungscodes und ihre Anpassung können leicht mit dem integrierten Einbettungscode-Generator von Misskey Web erstellt werden. Wir empfehlen grundsätzlich, diesen zu verwenden.

Generator für eingebetteten Code

Einbetten einer einzelnen Notiz

Eine einzelne Notiz kann auf dem Heimserver eingebettet werden (Notizen auf einem förderierten Server können nicht über einen anderen Server eingebettet werden). Dein Code sollte jetzt so aussehen:

<iframe
    src="https://<HOST>/embed/notes/<NOTE_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

Jede dieser Angaben wird durch folgende ersetzt:

  • <HOST>: Hostname des Misskey Servers
  • <NOTE_ID>: ID der Notiz
  • <RANDOM>: Zufällige Zeichenfolge (erforderlich, wenn embed.js verwendet wird. Bitte stelle sicher, dass sich die Einbettungscodes auf derselben Seite nicht überschneiden, wenn es mehrere gibt

Einfügen einer Liste an User-Notizen

Eine Liste der öffentlichen Notizen der Benutzer (öffentliches Zuhause) kann eingebettet werden. Dein Code sollte jetzt so aussehen:

<iframe
    src="https://<HOST>/embed/user-timeline/<USER_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

Jede dieser Angaben wird durch folgende ersetzt:

  • <HOST>: Hostname des Misskey Servers
  • <USER_ID>: ID des einzubettenden Benutzers (nicht der mit „@“ beginnende Benutzername)
  • <RANDOM>: Zufällige Zeichenfolge (erforderlich, wenn embed.js verwendet wird. Bitte stelle sicher, dass sich die Einbettungscodes auf derselben Seite nicht überschneiden, wenn es mehrere gibt)

Liste der Notizen in einen Clip einbetten

Du kannst eine Liste von Notizen für Clips einbinden, deren Veröffentlichungsbereich öffentlich istDein Code sollte jetzt so aussehen:

<iframe
    src="https://<HOST>/embed/clips/<CLIP_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

Jede dieser Angaben wird durch folgende ersetzt:

  • <HOST>: Hostname des Misskey Servers
  • <CLIP_ID>: ID des Clips, der eingebettet werden soll
  • <RANDOM>: Zufällige Zeichenfolge (erforderlich, wenn embed.js verwendet wird. Bitte stelle sicher, dass sich die Einbettungscodes auf derselben Seite nicht überschneiden, wenn es mehrere gibt)

Einbettung von Hashtags in die Notizliste

Du kannst eine Liste von Notizen mit einem bestimmten Hashtag einbindenDein Code sollte jetzt so aussehen:

<iframe
    src="https://<HOST>/embed/tags/<TAG>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

Jede dieser Angaben wird durch folgende ersetzt:

  • <HOST>: Hostname des Misskey Servers
  • <TAG>: Hashtag-Name (ohne #)
  • <RANDOM>: Zufällige Zeichenfolge (erforderlich, wenn embed.js verwendet wird. Bitte stelle sicher, dass sich die Einbettungscodes auf derselben Seite nicht überschneiden, wenn es mehrere gibt)

Parameter für die individuelle Anpassung

Das Aussehen der Einbettung kann durch die Angabe bestimmter Werte für den URL-Parameter angepasst werden.

Name des Parameters Werte, die festgelegt werden können Beschreibung
maxHeight Wert ≥ 0 Gibt die maximale Höhe (px) der Einbettung an.Falls sie länger wird, kannst du innerhalb des Bereichs scrollen.
Wenn 0 angegeben wird, wird die Höhe des eingebetteten Elements automatisch erweitert, um der internen Höhe zu entsprechen (nicht empfohlen) .
Wenn nicht anders angegeben, beträgt der Wert 700.
Funktioniert nicht bei der Einbettung einer einzelnen Notiz.
colorMode
  • light
  • dark
 Den Farbmodus auf Hell oder Dunkel erzwingen.
Synchronisiert sich mit dem Dunkelmodus des Geräts, wenn nicht anders angegeben.
border
  • true
  • false
 Fragt, ob ein Rahmen um den äußeren Rand hinzugefügt wird.Standardmäßig auf true
rounded
  • true
  • false
 Fragt, ob die Ecken abgerundet werden sollen.Standardmäßig auf true
showHeader
  • true
  • false
 Fragt, ob der obere Header angezeigt wird.Standardmäßig true.
Funktioniert nicht bei der Einbettung einer einzelnen Notiz.
maxHeight=0 の使い道

Es wird grundsätzlich nicht empfohlen, maxHeight auf 0 zu setzen. Für spezielle Anwendungen, wie z. B. wenn der Scroll-Container nicht im iframe, sondern auf der eingebetteten Website bereitgestellt werden soll, kann dies jedoch nützlich sein. Nachfolgend sind Beispiele aufgeführt:

<div class="misskey-embed">
    <div class="custom-header">
        Misskeyやってます！
    </div>
    <div class="iframe-container">
        <iframe
            src="https://<HOST>/embed/user-timeline/<USER_ID>?maxHeight=0&showHeader=false&border=false&rounded=false"
            data-misskey-embed-id="v1_<RANDOM>"
            loading="lazy"
            referrerpolicy="strict-origin-when-cross-origin"
            style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
        ></iframe>
    </div>
</div>

<style>
    .misskey-embed {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }

    .custom-header {
        background-color: #f0f0f0;
        padding: 10px;
    }

    .iframe-container {
        max-height: 500px;
        overflow-y: auto;
    }
</style>
zurück
Drive
weiter
Favoriten