制作右边侧边栏并高亮显示

1.正则+js(推荐)

根据标题级别缩进

注意:目录是\\d.\\d.\\d格式的才生效 

C:\Users\yys53\OneDrive\python\blog\home\views.py

catalog_list = re.compile('name="(\\d+.*?)"', re.S).findall(article.content)
        lis = []
        for k in catalog_list:
            four = re.compile('(\\d+.\\d+.\\d+.\\d+.*?)', re.S).findall(k)
            three = re.compile('(\\d+.\\d+.\\d+.*?)', re.S).findall(k)
            two = re.compile('(\\d+.\\d+.*?)', re.S).findall(k)
            if four:
                lis.append((4, k))
            elif three:
                lis.append((3, k))
            elif two:
                lis.append((2, k))
            else:
                lis.append((1, k))

context = {
           
            'catalog_list': lis
        }

C:\Users\yys53\OneDrive\python\blog\templates\detail.html

    {# 不是手机目录放右边,是的话放上面#}

    <style>
        /*目录位置*/
        {% if not is_mobile %}
            #nav {
                will-change: min-height;

                position: fixed;
                margin-left: 1111px;
                top: 6%;

            }
        {% endif %}


    </style>

<div id="nav"></div>

    <!--引入粘性侧边栏 -->
 <script type="text/javascript">

        {% if catalog_list %} <!-- 正则表达式判断,如果有目录才进行生成目录 -->
            var html = ['<ul style="margin-top: 1px;border:1px solid; padding:1em; overflow: hidden">'];
            html.push('<h5 style="display: inline;"><strong>目录</strong></h5> <span style="display: inline;" id="time"></span>');

            html.push('<hr>');

            {% for value, catalog in catalog_list %}
                {#alert("#"+'{{ catalog }}');#}
                var id = 'a' + {{ forloop.counter0 }};
                {#根据name修改id#}
                var nm = document.getElementsByName('{{ catalog }}')[0];
                nm.id = id;

                {#根据目录级别缩进#}
                var space = '';
                {% if value == 1 %}
                    space = '';
                {% elif value == 2 %}
                    space = '&nbsp&nbsp&nbsp&nbsp';
                {% elif value == 3 %}
                    space = '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
                {% else %}
                    space = '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
                {% endif %}
                html.push('<li class="li-catalog"><a href="#' + '{{ catalog }}' + '" id = "b' + '{{ forloop.counter0 }}' + '">' + space + '{{ catalog }}' + '</a>');
            {% endfor %}

            html.push('</ul>');
            var nav = document.getElementById('nav');

            nav.innerHTML = html.join('\n');

            $(function () {
                $(window).scroll(function () {
                    var wst = $(window).scrollTop();
                    {% for catalog in catalog_list %}
                        var tag_id = $("#a" + '{{ forloop.counter0 }}');
                        tag_id.addClass("myc");   //给文章中目录加属性
                        if (tag_id.offset().top <= wst + 10) {
                            $('#nav a').removeClass("myc");  //c是标签激活的class
                            {#alert('#a' + '{{ forloop.counter0 }}' + '{{ forloop.counter0 }}');#}
                            $('#b' + '{{ forloop.counter0 }}').addClass("myc");

                        }
                    {% endfor %}
                });

            });

        {% endif %}


    </script>

电脑的话,添加时间和滚动右侧菜单 

 {% if not is_mobile %}
        <script type="text/javascript">
            {#  在目录添加时间#}

            function time() {
                var date = new Date();
                hours = date.getHours();
                minutes = date.getMinutes();
                document.getElementById("time").innerHTML = hours + ":" + minutes;
            }

            setInterval("time()", 1000);

            {#  根据距离让目录滚动#}
            window.onscroll = function () {
                var total_height = $(document.body).height();
                var topScroll = $(document).scrollTop();
                //滚动的距离,距离顶部的距离

                var bignav = document.getElementById("nav");//获取到导航栏id

                if (topScroll / total_height >= 0.5) {
                    //当滚动距离大于一半时,滚动右侧，
                    bignav.scrollTop = 100;
                } else {
                    //小于一半时恢复原状
                    bignav.scrollTop = 0;
                }
            }
        </script>
    {% endif %}

2.纯js

C:\Users\yys53\OneDrive\python\blog\templates\detail.html

  <!-- 引入粘性侧边栏 -->
    <script type="text/javascript">


        var html = ['<ul>'];
        
 var headings = document.querySelectorAll('#article_content p a');

        for (var i = 0; i < headings.length; i++) {
            var id = 'a' + i;
            var el = headings[i];

            el.id = id;


            {#alert(el.firstChild.nodeValue);#}
            {#.childNodes[1].textContent #}
            if (el.textContent)
            {
                var num = el.textContent[0];
            }


            if(!isNaN(num)){
                {#alert(num);#}
                {#判断第一位是不是数字#}
                html.push('<li><a href="#' + el.textContent+ '" id = "' + id + i + '">' + el.textContent + '</a>');
            }

        }

        html.push('</ul>');
        var nav = document.getElementById('nav');

        nav.innerHTML = html.join('\n');

      $(function(){
                $(window).scroll(function(){
                    var wst = $(window).scrollTop();


                    var title = document.querySelectorAll('#article_content p a');
                    for(i=0; i<title.length; i++) {
                        var el = title[i];
                        if (el.textContent) {
                            var num = el.textContent[0];
                        }

                        if (!isNaN(num)) {
                            {#判断第一位是不是数字#}
                            var tag_id = $("#a" + i);
                            if (tag_id.offset().top <= wst) {

                                $('#nav a').removeClass("c");  //c是标签激活的class
                                $('#a' + i + i).addClass("c");

                                tag_id.addClass("c");
                            }
                        }
                    }

                });

            });
    </script>