إضافة فئات إلى الروابط في محتوى المنشور للتنسيق

[alank (Andrew Lank)]

هل توجد طريقة لتجاوز إعادة تنسيق Discourse للروابط كما نرغب في عرضها كزر، وبالتالي نحتاج إلى نمط محدد؟

تم نشر الموضوع باستخدام خاصية .raw (لقد حاولت استخدام .cooked لكن يبدو أنها غير مدعومة رغم ما تشير إليه واجهة برمجة التطبيقات).

عند نشر <a aria-label="homepage-link" href="http://blablabla...">View Homepage</a>

يتم عرضه في منشور Discourse أو وصف الفئة كالتالي:

<div class="cooked"><a>View Homepage</a></div>

لقد جربت أيضًا

[View this page][http://blablabla]

وقد تم تحويله إلى:

<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">http://blablabla</a></div>

ومع ذلك، إذا أمكنني الحصول ببساطة على:

<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">View this page</a></div>

فربما أتمكن من استهدافه عبر CSS من عنصر الجسم لتطبيق نمط زر CSS الذي نحتاجه.

[alank (Andrew Lank)]

Resolved I think…

[view this page](http://blablabla)

Target CSS using:

body.<insert name of top category here>-* div.cooked a

However

If someone has a solution for the above it would be a little cleaner and easier to add our own classes to the <a> link and avoid top Category.

Thanks in advance.

[Johani (Joe)]

The way to do that is to use something like

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

For example

[wrap=link-button][Link Text](http://meta.discourse.org)[/wrap]

renders as

Link Text

and the markup is

<div class="d-wrap" data-wrap="link-button">
  <p>
    <a href="http://meta.discourse.org">Link Text</a>
  </p>
</div>

and you can then style it in CSS using

[data-wrap="link-button"] {
  a {
    // styles for the link
  }
}

You can change [wrap=link-button] to any value you want like

[wrap=custom-button]
or
[wrap=home-link]
or
[wrap=foobar]

and then use that to target the link like the example above.

[alank (Andrew Lank)]

@Johani Very interesting!!! Thanks for your work on this, we will look into this option, it would be great to have in the API docs on Post raw property settings in the future. Or a central doc that groups/defines all possibilities with Post’s UPDATE:/POST: property