如何给文章添加 table of content ?

| Visit:190

添加以下代码 保存为 /module/_table-of-content.cshtml

 

 

@model Param<List<ContentNavModel>>
@if (Model.Param1.Count > 0)
{
    <nav class="widget-nav-container" id="widget-nav-container">
        <header class="widget-nav-header">
            <h3 class="header-title">Table of Content</h3>
            <button class="drop" type="button" aria-label="toggle" data-bs-toggle="collapse" data-bs-target="#nav-scrollspy"></button>
        </header>
        <div id="nav-scrollspy" class="collapse show " data-bs-parent="#widget-nav-container">
            <ol class="widget-nav-list">
                @for (var i = 0; i < Model.Param1.Count; i++)
                {
                    if (Model.Param1[i].RootId == 0)
                    {
                        if (Model.Param1[i].HasChild)
                        {
                            <li class="widget-nav-item">
                                <button type="button" class="drop" data-bs-toggle="collapse" data-bs-target="#collapse-@i" aria-label="toggle"></button>
                                <a class="anchor" href="@Model.Param1[i].AnchorId">
                                    <span class="nav-text">@Model.Param1[i].Name</span>
                                </a>
                                <ol class="widget-nav-list sub-list collapse show " id="collapse-@i" data-bs-parent="#nav-scrollspy">
                                    @foreach (var item in Model.Param1.FindAll(p => p.RootId == i + 1))
                                    {
                                        <li class="widget-nav-item">
                                            <a class="anchor" href="@item.AnchorId">
                                                <span class="nav-text">@item.Name</span>
                                            </a>
                                        </li>
                                    }
                                </ol>
                            </li>
                        }
                        else
                        {
                            <li class="widget-nav-item">
                                <a class="anchor" href="@Model.Param1[i].AnchorId">
                                    <span class="nav-text">@Model.Param1[i].Name</span>
                                </a>
                            </li>
                        }
                    }
                }
            </ol>
        </div>
    </nav>
}

 

 

在页面中调用 :

 

@Cms.Load("module/_widget-content-nav", Model.ContentNavList)