分类图片后的分类名称

大家好,

在来这里求助之前,我已经尝试了所有方法,但至今仍未成功 :sweat_smile:

我试图在分类图片后显示分类名称,就像 FiveM 论坛那样(https://forum.fivem.net)。

已尝试的方法:

  • 通过 Docker 镜像编辑 category-title-link.hbs 文件(docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs)::x:

  • 在主题编辑器中使用 jQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ),但我发现这不起作用::x:

  • 一些 CSS 技巧(flex、order、table)::x:

我在 FiveM 论坛上看到,他们调整了 div 的顺序,但似乎没有在 CSS 中修改,或者如果有,我还没找到。

我是做 WordPress 的,希望有更经验丰富的朋友能帮忙,提前感谢::heart:

根据我的初步研究,模板名称似乎是 categories-only.hbs。请尝试更改该名称。我尚未亲自测试,但认为这应该就是你想要修改的模板。

其次,我不建议在 Discourse 中直接修改它。更好的方法是覆盖该模板。

category-title-link.hbs 包含了我正试图修改的内容,但当我编辑后,没有任何变化。请问编辑 .hbs 文件后是否需要重新构建应用或其他类似操作?

{{category-title-before category=category}}

<a class="category-title-link" href={{category.url}}>
  **<div class="category-text-title">**
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
  {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      **class="category-logo"**
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
</a>

如果您修改了 Ember 代码,无需重启整个应用,但请确保硬刷新浏览器窗口,以避免看到浏览器缓存的内容。

修改后,我重启了 Docker 容器并重新启动了 Web 服务器,哈哈 :sweat_smile:

我刷新了页面成千上万次,还尝试过使用无痕模式

没有任何变化 :rofl:

请帮我确认一下,我是否在正确的目录中编辑?

\var\www\discourse\app\assets\javascripts\discourse\templates\components

“templates”文件夹听起来像是仅存放模板,而非实际运行的代码,但我不太懂这类编程,所以只是猜测。

尝试删除 discourse 根目录中的 tmp 文件夹,然后重启服务器。

̶那̶就̶是̶我̶在̶做̶的̶

你为什么要这么做?这是通过后台自定义进行的 CSS 更改。

你能帮我一下吗?正如我说的,我已经尝试了一切:rofl

一些 CSS 技巧(flex、order、table):x

请参阅 https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648。

谢谢 Jay,但我不是开发者。我懂一些东西,但正如大家所见,还不足以解决这个问题。我真的尝试了所有方法,包括在这里搜索类似的话题,但没有成功 :sleepy:

嘿 Jay,非常感谢你,我做到了 :heart_eyes:

如果有人正在寻找这个解决方案,只需这样做:

前往 设置 > 管理 > 自定义 > 选择当前主题 > 编辑 CSS/HTML

</body> 字段中,放入以下代码:

<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
    {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      class="category-logo"
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
  <div class="category-text-title">
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
</a>
</script>

搞定,大功告成 :partying_face::tada::tada:

所以你果然是一名开发者!