Название категории после изображения категории

Поддержка
1

Привет, ребята!

Прежде чем обратиться за помощью, я перепробовал всё, но пока безрезультатно :sweat_smile:

Я пытаюсь разместить название категории после изображения категории, как на форуме FiveM (https://forum.fivem.net).

shit
shit1202×423 48.5 KB

Что уже пробовал:

  • Редактирование category-title-link.hbs через образ Docker (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:

2

Согласно моим первичным исследованиям, имя шаблона, по-видимому, categories-only.hbs
Попробуйте изменить его. Я не пробовал, но думаю, что это именно тот шаблон, который вы собираетесь изменить.

Во-вторых, я бы не рекомендовал менять его в Discourse. Лучший способ — переопределить шаблон.

3

В файле 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>
4

Если вы редактируете код Ember, вам не нужно перезапускать всё приложение, но убедитесь, что вы выполнили полную перезагрузку окна браузера, чтобы не видеть устаревшие данные из кэша браузера.

5

После изменений я перезапустил контейнер Docker и перезагрузил веб-сервер, ха-ха :sweat_smile:

Я перезагружал страницу тысячи раз и пробовал также в режиме инкогнито.

Никаких изменений :rofl:

6

Пожалуйста, подтвердите для меня: я редактирую в правильном каталоге?

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

Папка “templates” звучит так, будто это просто шаблоны, а не то, что работает в реальном времени, но я не разбираюсь в таком программировании, поэтому это лишь предположение.

7

Попробуйте удалить папку tmp в корневом каталоге Discourse, а затем перезапустите сервер.

8

Anotação%202019-07-28%20071003
Anotação%202019-07-28%20071003906×289 22 KB

̶T̶h̶a̶t̶’̶s̶ ̶w̶h̶a̶t̶ ̶i̶m̶ ̶d̶o̶i̶n̶g̶

9

Зачем вы так делаете? Это изменение CSS через админку, в разделе «Настроить».

11

Можешь помочь мне с этим? Как я уже говорил, я перепробовал всё :rofl:

Некоторые CSS-трюки (flex, order, table) :x

12

См. Developing Discourse Themes & Theme Components.

13

Спасибо, Джей, но я не разработчик. Я кое-что знаю, но, как видно, этого недостаточно, чтобы решить проблему. Я действительно перепробовал всё, включая поиск похожих тем здесь, но без успеха :sleepy:

14

Привет, Джей, большое спасибо, я сделал :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:

15

Так что ты всё-таки был разработчиком!