Klickbare Social Icon-Links im Profil

[weallwegot (juicecounty.prodigy)]

Ein Theme-Komponente, die soziale Symbole als anklickbare Elemente in Benutzerprofilen und Benutzerkarten enthält, falls Sie die Benutzerkarten-Verzeichnis-Theme-Komponente verwenden.

Sie ist zu 99 % aus der Diskussion und den von @LeoMcA bereitgestellten Codebeispielen übernommen, die in dieser Unterhaltung auf Meta sowie im Namati User Card Profile Theme enthalten sind. Ich habe jedoch gedacht, es wäre hilfreich, sie aus dem Thread herauszulösen und etwas allgemeiner zu gestalten.

Hinweise

• Benutzer, die für einen Eintrag keinen Wert angeben, erhalten das entsprechende Symbol nicht auf ihrer Benutzerkarte oder in ihrem Profil angezeigt.
• Für die benutzerdefinierten Felder Instagram und Twitter werden nur die Benutzernamen erwartet (kein „@" enthalten); der Name wird an die Basis-URL angehängt.
• Ich empfehle, die benutzerdefinierten Benutzerfelder, die Symbole enthalten, nicht auf der Benutzerkarte anzuzeigen, da es sonst etwas redundant wirkt, sowohl den Text als auch die anklickbaren Symbole zu haben. Das ist nur meine Meinung; das Theme blendet sie nicht automatisch aus.

Site-Einstellungen

Jeder Eintrag für den Namen eines benutzerdefinierten Felds muss mit dem Namen übereinstimmen, unter dem Sie das angepasste Benutzerfeld in Ihrer Discourse-Instanz bezeichnet haben. Standardmäßig erwartet die Theme-Komponente die unten gezeigten Namen, Sie können diese jedoch natürlich ändern. Zeichenketten sind case-sensitive.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn-Profil'

Viel Spaß!

	Github-Repository	Discourse-Social-Links-Clickable
	Installationsanleitung	So installieren Sie ein Theme oder eine Theme-Komponente

[davidkingham]

Gute Arbeit! Das einzige Problem, das ich sehe, ist, dass das Avatar-Flair dadurch nach unten verschoben wird. Das Baum-Symbol sollte sich über meinem Avatar befinden.

[weallwegot (juicecounty.prodigy)]

Ah, danke, dass du es getestet und das gefunden hast.
Ich glaube nicht, dass ich in meinen Communities irgendwelche Flairs habe.
Ich habe in deinen nachgeschaut und denke, es ist die Größe der Icons, die die Karte größer macht. Ich bin kein CSS-Experte, aber ich denke, ich muss bedingt einen Abstand für den Avatar bei Benutzern mit Icons anwenden.

[davidkingham]

Beachte, dass sich auch der Nachrichten-Button und der Hintergrund verschieben. Ich habe damit alles korrigieren können, aber ja, es muss bedingt angewendet werden.

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}

[bartv (Bart)]

Es gibt eine Inkompatibilität mit dem Follow-Plugin: Dieser TC funktioniert, wenn ich eingeloggt bin, aber wenn ich die Seite als anonymer Benutzer aufrufe, sind die Benutzerkarten und die Benutzerprofilseite defekt.

Update: Dies steht nicht in Zusammenhang mit den Social-Icon-Links im TC. Ich werde dies im Thema des Follow-Plugins melden.

In /logs sehe ich:

NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’

cc @angus

[Solari]

Das gefällt mir! Mein einziges Problem ist, dass der Feldname und die URL zusätzlich zum Icon auf der Karte und im Profil angezeigt werden. Wie kann ich den Textteil für Feld/URL ausblenden?

Vielen Dank,
Ray

[weallwegot (juicecounty.prodigy)]

Hey, ja, danke, dass du es ausprobierst.

Ich habe einfach die Option „Auf Benutzerkarte anzeigen?

[weallwegot (juicecounty.prodigy)]

Danke, ja, ich bin zum selben Ergebnis gekommen. Die bedingte Stilanwendung habe ich aber noch nicht ganz verstanden, sorry. Ich werde versuchen, jemanden mit mehr Erfahrung in diesen Dingen zu finden.

[Solari]

Ahhh, das hat gewirkt. Das ist wirklich nett, danke, dass du das programmiert hast!

Ray

[bartv (Bart)]

Könntest du bitte auch YouTube unterstützen?

[weallwegot (juicecounty.prodigy)]

Ja, sollte jetzt aktualisiert sein. Ich habe es nur als Namen hinzugefügt. Du kannst es hier sehen:

add support for youtube profiles

[bartv (Bart)]

Es funktioniert einwandfrei, aber ich sehe, dass du die Verwendung von YouTube-Kanälen hartcodiert hast. Manche Leute ziehen es vielleicht vor, ihren Benutzernamen einzugeben? (Einige Benutzer haben keine Kanäle.) Ich denke, es wäre besser, wenn man einfach einen YouTube-Link statt eines Kanals oder Benutzernamens eingeben könnte.

Eine weitere Überlegung zu den Instagram-/Twitter-Feldern: Trotz eines Hinweises, nur Benutzernamen in diese Profilfelder einzugeben, geben viele Leute einfach die gesamte URL ein – das ist wohl auf vielen Websites die gängigere Methode. Das hat mich zum Nachdenken gebracht: Vielleicht könntest du das Vorhandensein von „https://

[weallwegot (juicecounty.prodigy)]

@bartv

Vielleicht könntest du das Vorhandensein von ‘https://’ im Wert erkennen und, falls vorhanden, die Basis-URL nicht mehr hinzufügen? Das würde die Sache etwas fehlertoleranter/robuster machen.

Ausgezeichnet, ich habe diesen Vorschlag jetzt umgesetzt, und es sollte nun für beide Eingabearten funktionieren.

@bartv

Manche Leute ziehen es vielleicht vor, ihren Benutzernamen dort einzugeben? (Einige Nutzer haben keine Kanäle). Ich denke, es wäre besser, wenn man den Leuten erlaubt, einfach einen YouTube-Link dort einzufügen, anstatt einen Kanal/Benutzernamen.

Ich bin mir leider nicht sicher, was der Unterschied zwischen Kanälen und Benutzerprofilen bei YouTube ist. Was schlägst du als Basis-URL für YouTube vor? Einfach https://youtube.com/?

[bartv (Bart)]

Ich denke, es gibt /c/- und /u/-Links zu Kanälen bzw. Benutzern. Ehrlich gesagt, ich finde, der beste Ansatz hier ist, einfach zu erlauben, dass Leute eine URL eingeben, und sich nicht die Mühe zu machen, es zu schön zu gestalten?

[weallwegot (juicecounty.prodigy)]

Ah, stimmt, ich entferne einfach die Funktion für die Basis-URL bei YouTube-Links, damit Leute eine vollständige URL eingeben können, genau wie bei LinkedIn. Danke für den Vorschlag, ich habe es gerade aktualisiert.

[bartv (Bart)]

Brilliant, danke!

[Solari]

Neuling hier – ich habe versucht, das CSS anzupassen, um die Schriftfarbe der Symbole zu ändern, da ich ein dunkles Design verwende, aber es funktioniert nicht.

Ich glaube, die Klasse heißt iconic-user-fields. Ich habe versucht, die Farbe dieser Klasse zu ändern, auch mit !important, aber es hat nichts gebracht.

Habt ihr irgendwelche Vorschläge?

Danke!
Ray

[weallwegot (juicecounty.prodigy)]

Entschuldige bitte die extrem späte Antwort – ich hoffe, du hast in der Zwischenzeit eine Lösung gefunden.

Ich habe eine neue Einstellung hinzugefügt, mit der du in der Theme-Konfigurationsfläche eine Icon-Farbe auswählen kannst.
Du kannst sie jetzt also einfach auf Weiß oder eine andere Farbe ändern, die besser zum Dark-Theme passt. Das sollte jetzt verfügbar sein!

[renato (Renato Atilio)]

Zunächst einmal vielen Dank für diese Theme-Komponente Ich habe sie in meiner Community aktiviert und sie sieht gut aus.

Ich weiß nicht, ob jemand anderes dieses Problem hatte, aber mit der aktivierten Theme-Komponente überlagern sich auf dem Handy einige Elemente der Benutzerkarte:

Als Workaround habe ich dieses CSS für Mobilgeräte verwendet, damit die Karte so aussieht wie zuvor, wenn keine Social-Media-Links angegeben sind:

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

Das ist wahrscheinlich keine allgemeine Lösung, aber es hat in den relevanten Szenarien für unsere Community funktioniert.

[renato (Renato Atilio)]

Ich weiß nicht, ob dies mit einer kürzlichen Kernänderung zusammenhängt: Wenn ich bei meinem Konto angemeldet bin, werden die Links auf den Benutzerkarten angezeigt. Wenn ich jedoch abgemeldet bin (ich teste dies in einem anonymen Tab), wird ein Fehler in der Konsole ausgegeben, da auf dieser Zeile userFields undefiniert ist. In diesem Fall zeigt die Benutzerkarte nur den Avatar und den Benutzernamen an, sonst nichts.

Wenn ich vor der ersten Verwendung von userFields auf dessen Vorhandensein prüfe, wie ich es hier getestet habe, wird die Karte vollständig angezeigt, aber keine sozialen Icon-Links.

Hat jemand anderes dieses Problem?