كيف تنقل avatar_template داخل نص الموضوع

[katruki]

مرحباً، أنا أقوم حاليًا بإنشاء سمة مخصصة لمجتمع خاص بي. أحاول نقل صورة المستخدم داخل نص الموضوع (سأقوم بنشر لقطات شاشة لما يبدو عليه حاليًا مقابل ما أبحث عنه). أنا أستخدم المكون الإضافي لعرض منافذ Discourse على الرغم من أنني لا أرى منفذًا للقيام بذلك. بعض الدعم لهذا سيكون مفيدًا للغاية!

الحالي:

أرغب في:

[Heliosurge (Dan DeMontmorency)]

هل موقعك الثاني على موقع ديسكورس آخر؟

إذا كان الأمر كذلك، فقد تتمكن من رؤية كيفية قيامهم بذلك باستخدام عنصر الفحص في متصفحك.

[katruki]

نعم، إنه كذلك، https://forums.unrealengine.com/ حاولت فعل ذلك، لكن لم أتمكن من معرفة كيفية القيام بذلك.

[Don]

مرحباً
هذا مثال صنعته الآن، ربما ليس مثالياً ولكن يمكنك تخصيصه…

سطح المكتب / CSS

.topic-post {
  margin-bottom: 1em;
  > article > .row {
    background-color: var(--secondary);
    box-shadow: 0 0 0 1px var(--primary-low);
    border-radius: 1em;
    padding: 1em;

    .topic-avatar {
      border: none;
    }
    .topic-body {
      background: none;
      border: none;
      box-sizing: border-box;
      width: 100%;
      padding: 1em;
    }
  }

  .post-menu-area {
    margin: 1em 0 0;
  }
}

// رسالة خاصة
.archetype-private_message {
  .regular.contents {
    border: none;
  }

  .topic-map {
    padding-left: 1em;
    padding-bottom: 0.25em;
  }

  .topic-post {
    margin-bottom: 1em;
  }

  // استخدام تمييز مشاركة المستخدم الحالي على الصف بأكمله
  .topic-post {
    &.current-user-post {
      > article > .row {
        background: var(--tertiary-very-low);
        box-shadow: 0 0 0 1px var(--tertiary-very-low);
      }
    }
    .regular.contents {
      background: none;
      border-color: none;
    }
  }
}

// الخط الزمني
.topic-navigation.with-timeline {
  width: 150px;
}
.container.posts {
  // التأكد من الحفاظ على عرض المشاركة بالكامل
  grid-template-columns: 1fr auto;

  .topic-navigation {
    margin-right: -2em;
    padding-left: 2em;
  }
}

// خريطة الموضوع
.topic-map {
  &.--op,
  &.--bottom {
    padding: 1em 1em 0;
    max-width: 100%;
    border-top: none;
    border-bottom: none;
  }
}

// إجراء صغير
.small-action {
  .topic-avatar,
  .small-action-desc {
    border-top: none;
    padding-top: 0;
  }
  .topic-avatar:empty {
    display: none;
  }
  .small-action-desc {
    width: calc(100% - 1em);
  }
}

// أسفل الموضوع
.topic-area {
  > .loading-container {
    width: 100%;
  }
}
.topic-status-info,
.topic-timer-info {
  max-width: 100%;
}

[katruki]

مرحباً دون! شكراً جزيلاً على المثال. سيساعد كثيراً، سأضيف هذا إلى السمة الخاصة بي.