Change the appearance of a comment

[ogurec-ogurec]

Hello Danirus!

I have a question: I would like to slightly change the look of the comment, for example like this:

Name
date
Comment
like/dislike
Answer

Where can I change the html to change the comment template?

[danirus]

Hi @ogurec-ogurec , for the current version the answer depends on how you use the app. If you use the render_xtdcomment_tree tag the template to rewrite is django_comments_xtd/comment_tree.html. But if you use the ReactJS plugin, the code that renders the comment is in the comment.jsx file, in static/django_comments_xtd/js/src/.

And finally, when you don't use nested comments nor the ReactJS plugin, but the template tag render_comment_list, from the parent app django-comments. In this case the template used is comments/list.html.

Based on the image you post I can see you use nested comments, so it's either comment_tree.html or the comment.jsx file.

[danirus]

@danirus It seems that nothing worked for me, what can I do?)

Did you run npm install to get all the packages listed in the package.json file?

[ogurec-ogurec]

yes, i run command:

(newenv) I:\test django comments\new\django-comments-xtd-master>npm install

I get the following log:

npm WARN [email protected] requires a peer of popper.js@^1.16.1 but none is instal
led. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

audited 767 packages in 5.736s

20 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

[danirus]

I can't say what's the issue. In both, Linux and Mac OS I don't get that error. You are using Windows, maybe there's some limitation there with babel and JSX. Did you try to fix it following the suggestion that is displayed below the issue?

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your
Babel config to enable transformation.

[ogurec-ogurec]

I don't quite understand where to add @ babel / preset-response

I run command:
npm install --save-dev @babel/preset-react

being in the directory: (newenv) I:\test django comments\new\django-comments-xtd-master>

but the result is the same(

[ogurec-ogurec]

As is usually the case, the error was in the most obvious place. After 4 days, I found it - just had to use the command:npx webpack and it worked.

In my case, the command: webpack --watch did not work.

Thank you for your help! @danirus

[ogurec-ogurec]

Can you please tell me how you can check that this is a child comment, and for example set the avatar class - "avatar-children". In other words, separate the rendering of the child comment and the normal comment? @danirus

[danirus]

In the comment_tree.html template, there is a {% for item in comments %}. Each item.comment is an instance of the XtdComment. So you can access the attributes of the XtdComment model directly from there. i.e.: you can do {{ item.comment.level }} to get the level. Level 0 is the root level of the tree. Nested comments always have a level > 0.

[ogurec-ogurec]

Thanks, as I understand it, comment_tree.html is if you use the render_xtdcomment_tree tag to render.

Is it possible to somehow add a class to nested comments in a ReactJS plugin?