Is the lack of code highlighting a bug?[BUG]

[baloyou]

When I use the code plugin to add a piece of code, the content page does not display code highlighting.

The version of django-cms is 4.1.1, and I am using a virtual environment with venv. The issue exists by default after installation via pip.

[fsbraun]

No, HTML's <pre> tag does not do code highlighting. There are JS libraries out there, which do this, such as highlight.js. You would need to use one of those.

Out of the box, djangocms-frontend does only support features that are HTML native or provided by the frontend framework (which by default is Bootstrap 5).

[fsbraun]

There is a bug, however, since for code blocks the markup should read <pre><code>the code goes here</code></pre>. The inner <code> seems to be missing.

[baloyou]

No, HTML's \<pre\> tag does not do code highlighting. There are JS libraries out there, which do this, such as highlight.js. You would need to use one of those.

Out of the box, djangocms-frontend does only support features that are HTML native or provided by the frontend framework (which by default is Bootstrap 5).

Yes, I modified code.html and manually added the code tag, now I can achieve syntax highlighting through Prism. However, if I insert code multiple times, it will result in duplicate inclusion of Prism's CSS and JS files. Is my approach incorrect?

thank!!!

this is code.html

{% load i18n cms_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% block base_css %}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
{% endblock base_css %}

{% block base_js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% endblock base_js %}

[fsbraun]

I just released djangocms-frontend 1.3.3 which should fix the <pre><code> part of the issue. And yes, you're not doing it right here 😉.

django CMS uses django-sekizai to avoid repeated inclusion of css or js. Do this instead:

{% load i18n cms_tags sekizai_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% addtoblock css %}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">{% endaddtoblock %}

{% addtoblock js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% addtoblock %}

See here for more.

[baloyou]

I just released djangocms-frontend 1.3.3 which should fix the \<pre\><code> part of the issue. And yes, you're not doing it right here 😉.

django CMS uses django-sekizai to avoid repeated inclusion of css or js. Do this instead:

{% load i18n cms_tags sekizai_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% addtoblock css %}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">{% endaddtoblock %}

{% addtoblock js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% addtoblock %}

See here for more.

This is so cool and very effective (I should have looked at the docs more, thanks again)

[fsbraun]

@baloyou I see you are using Chinese locales. If you wanted to have a more consistent user experience with Chinese labels etc., and would like to spend some time on it, I would appreciate it if I could add you as a translator to django CMS frontend! Every single string translated helps. Join us on discord and let me know! https://discord-main-channel.django-cms.org/

[baloyou]

My English is a bit poor (relying on translation software) and I am new to DjangoCMS, so when I am familiar with it, I am willing to participate in the work of Chinese. @fsbraun :) :)

[fsbraun]

Thank you so much, @baloyou ! You'll find it's a great community!

Translation software helps a lot and a good way to contribute! If you use it, you'll have the better understanding than I what the best Chinese translation for "Code", "Background", "Spacing", or "Visibility" is (taken from the dialogue window above).

(I'd come up with "代码", "背景", "间距", and "能见度". Is that meaningful?)

[baloyou]

You're right, translation work gives me a better understanding of the framework (but I'll have to wait until I get familiar with the basic features) If you're asking me if the translation of "Code", "Background", "Spacing", or "Visibility" is appropriate, I think: exactly @fsbraun

[fsbraun]

🙌 Sure, no pressure. I just wanted to say, why I can see you adding value. Now, those officially are the first 4 words of the djangocms-frontend package translated to Chinese!! 🎉

[baloyou]

@fsbraun I've copied the corresponding .po file and I'll come back and share it with you if there's work.

I have another small question, though. I use "heading" to generate multiple layers of titles, and when I want to generate the corresponding "table of contents", the toc must be below the heading to display (the above is not good) Is this a bug? (The toc above "Heading" is not displayed.)

[fsbraun]

That's correct. If you want to display the toc at the top, put content and toc in a row with two columns, both with width 12 (i.e. full width). Put the content into the first column, the toc into the second, and in the columns dialogue change the display order: first the toc, then the content.

[fsbraun]

Background info: The toc information is collected as the page is rendered. This is a 1 pass process (due to speed) and hence the heading information for the toc is only available after all heading plugins have been rendered.

[baloyou]

hi @fsbraun ,I have a question about "link/button", assuming I have a large amount of data (e.g. 2000 pages) will the "internal link" drop-down box be displayed all at once? Will there be performance issues?

[fsbraun]

The link plugin and all plugins that use links use Django's Select2 Box to dynamically load pages. To further optimize, you can configure if the user needs to input a certain number of characters before the search starts: DJANGOCMS_FRONTEND_MINIMUM_INPUT_LENGTH = 2 for example, if you want to start loading data only if the user has already entered two characters. Default is 0.

Long story short: No performance problem.

[baloyou]

Hi @fsbraun , I'm back again... I saw instructions in this doc https://djangocms-frontend.readthedocs.io/en/latest/how-to/internal-link-targets.html but when I added DJANGOCMS_FRONTEND_MINIMUM_INPUT_LENGTH=2 to the settings.py, I opened it again link/button option, a syntax error occurred, is this related to version compatibility issues? (I'm djangocms 4.1.1 and frontend's version is 1.3.2)

[fsbraun]

Well done! You found a regression! Will fix that in the next few hours! Thanks!

The fix will only be released with version 2 of djangocms-frontend, expected within the next two weeks. If you need a working solution immediately, go back to version djangocms-frontend==1.3.1. (Not tested, though).

[baloyou]

hi @fsbraun , I'm back again again...

I'd like to add a right-hand menu to the navigation, I defined a class like this:

class UserMenu(Menu):
    def get_nodes(self, request):
            return [
                NavigationNode("profile", reverse('account_profile'), 101, attr={'visible_for_anonymous': False}),
                NavigationNode("logout", reverse('account_logout'), 102, attr={'visible_for_anonymous': False}),
                NavigationNode("sign in", reverse('account_login'), 103, attr={'visible_for_authenticated': False}),
                NavigationNode("sign up", reverse('account_signup'), 104, attr={'visible_for_authenticated': False}),
            ]
menu_pool.register_menu(UserMenu)

Can I use {%show_menu%} or any other tag to display my menu above?

Here's my wrong usage (this will show all the menus)

  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
      {% block menubar2 %}
      {% show_menu 0 100 100 100 'bootstrap5/menu.html' %}
      {% endblock %}
  </ul>

[fsbraun]

Yes, you can. But that will just add the entries to the menu (and not create a separate right-hand menu).

Alternatively, you can hardcode this into your base.html template. If you are using djangocms-frontend's default tempalte, then this contains something like:

{% block navbar %}
    <nav class="navbar {% block navbar_options %}navbar-expand-lg navbar-dark bg-dark{% endblock %}">
        <div class="container">
            <a class="navbar-brand" href="/">{% block brand %}{% endblock %}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">{% block menubar %}{% show_menu 0 100 100 100 'bootstrap5/menu.html' %}{% endblock %}</ul>
                {% block searchbar %}{% endblock %}
            </div>
        </div>
    </nav>
{% endblock %}

You'd just have to add a bloc searchbar with your right-hand menu:

{% block searchbar %}
    {% here goes your (hard-coded) markup for the right-hand menu %}
{% endblock %}

[baloyou]

hi @fsbraun I'm back again again again!!!

When I create a new page, I occasionally get a situation where the slug field is not editable (there is an extra readonly attribute) and I log in with a superuser. This happened once in the morning, it was automatically restored later, and now the problem is recurring (I'm sure I didn't make any changes, and I've tried logging back in and clearing my cache)

<input type="text" name="slug" maxlength="255" readonly="" language="zh-hans" data-decoder="zh" required="" aria-describedby="id_slug_helptext" id="id_slug">

[baloyou]

@fsbraun .. I'm looking for the source of the problem, but after 20 minutes the readonly attribute is gone again, but I'm sure there's something wrong.

<input type="text" name="slug" maxlength="255" language="zh-hans" data-decoder="zh" required="" aria-describedby="id_slug_helptext" id="id_slug" data-enpassusermodified="yes">

[fsbraun]

It's a known and fixed issue. The fix is scheduled for the next release. https://github.com/django-cms/django-cms/issues/7866

Thank you for your rigorous reporting! This really helps. I appreciate it!

[baloyou]

It's a known and fixed issue. The fix is scheduled for the next release. django-cms/django-cms#7866

Thank you for your rigorous reporting! This really helps. I appreciate it!

You are awesome!!! is there any way I can avoid this problem before updating the version?

[fsbraun]

At your own risk you can install from the release branch: pip install git+https://github.com/django-cms/django-cms@release/4.1.x.

[baloyou]

您可以自行承担风险从发布分支进行安装：pip install git+ https://github.com/django-cms/django-cms@release/4.1.x。

Well, thank you, I don't want to update just yet. This problem occasionally arises, and if you can know the cause, you can avoid it.

[fsbraun]

@baloyou django CMS 4.1.2 is just out...

[fsbraun]

Hey Baloyou!

That sounds like a caching issue, indeed. Can you raise a separate issue on https://github.com/django-cms/django-cms/issues?

My hypothesis:

The cache is flushed once you safe the advanced settings. But it is not flushed if you change group membership.

Thanks, Fabian

Am 20.07.2024 um 10:02 schrieb baloyou @.***>:

hi @fsbraun https://github.com/fsbraun I'm back again x 4

I have a question about "page permissions".

I want certain pages to be accessible only to a specified group of users.

I added a user group In the "Advanced Settings" of the page, add a user group in the "View restrictions". Add the user to the specified user group At this point, the page is accessible. I remove the user from the user group At this point, the page is still accessible???!!! Re-enter the "Advanced Settings" on the page, modify any of the options, and save At this time, the user cannot access the page. After repeated tests, it seems that after users join and leave the group, they must save it again in the "Advanced Settings" of the page for the permissions to take effect.

However, it doesn't matter what options are saved (it seems that the cache is flushed?). ）

— Reply to this email directly, view it on GitHub https://github.com/django-cms/djangocms-frontend/issues/226#issuecomment-2241025586, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEA7CHP3B3VJZF7WQGTBWETZNIKQPAVCNFSM6AAAAABKWJIXZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBRGAZDKNJYGY. You are receiving this because you were mentioned.

[baloyou]

hi @fsbraun i added issue: https://github.com/django-cms/django-cms/issues/7962

I think you're right.