alirezasedghi/laravel-toc

v1.0.1 2024-09-23 17:16 UTC

This package is auto-updated.

Last update: 2024-09-23 17:17:24 UTC


README

Required PHP Version Total Downloads Latest Stable Version Latest Stable Version License GitHub issues

一个 Laravel 扩展包,用于从 HTML 标题(h1, h2, ... h6)生成目录表(TOC)。此包允许您创建一个可定制的动态目录表,包括列表类型(ul 或 ol)、HTML 类和级别过滤。

功能

  • 自动从 HTML 标题生成 TOC
  • 可配置标题级别,包括(h1h6)。
  • 可定制列表类型(ul, ol)和 TOC 结构的 HTML 类
  • 可定制 TOC 列表和项的 HTML 类
  • 为标题添加唯一的 id 属性 以实现内部链接。

安装

使用 Composer 安装此包

composer require alirezasedghi/laravel-toc

用法

基本用法

以下是如何使用此包生成目录表并返回目录表和处理的 HTML 内容的示例。

use Alirezasedghi\LaravelTOC\TOCGenerator;

class PageController extends Controller
{
    public function show(Request $request)
    {
        // Example HTML content
        $html = "<h1>Main Title</h1><h2>Section 1</h2><p>Content...</p>";

        // Initialize TOC generator
        $tocGenerator = new TOCGenerator($html);

        // Generate the TOC and get processed HTML
        $toc = $tocGenerator->generateTOC();
        $processedHtml = $tocGenerator->getProcessedHtml();

        // Return to view
        return view('page', [
            'toc' => $toc,
            'content' => $processedHtml
        ]);
    }
}

在您的 Blade 模板(resources/views/page.blade.php)中

<div class="toc-container">
    {!! $toc !!}
</div>

<div class="content">
    {!! $content !!}
</div>

自定义选项

您可以通过传递一个选项数组来自定义 TOC 生成。以下选项是可用的

  • list_type:用于 TOC 的列表类型(无序列表为 ul,有序列表为 ol)。
  • toc_class:主要 TOC 列表的 CSS 类(<ul><ol>)。
  • internal_list_class:内部嵌套列表的 CSS 类。
  • toc_item_class:TOC 中每个项(<li>)的 CSS 类。
  • toc_link_class:TOC 中每个链接(<a>)的 CSS 类。
  • heading_class:要添加到 HTML 内容中每个标题(h1h2 等)的 CSS 类。
  • min_level:TOC 中包含的最小标题级别(例如,1h1)。
  • max_level:TOC 中包含的最大标题级别(例如,6h6)。

带有自定义选项的示例

use Alirezasedghi\LaravelTOC\TOCGenerator;

class PageController extends Controller
{
    public function show(Request $request)
    {
        // Example HTML content
        $html = "<h1>Main Title</h1><h2>Section 1</h2><h3>Subsection</h3><p>Content...</p>";

        // Define custom options
        $options = [
            'list_type' => 'ol',             // Use an ordered list for the TOC
            'toc_class' => 'custom-toc',     // Class for TOC <ul>/<ol>
            'internal_list_class' => 'nested-toc', // Class for nested <ul>/<ol>
            'toc_item_class' => 'toc-item',  // Class for each <li>
            'toc_link_class' => 'toc-link',  // Class for each <a>
            'heading_class' => 'heading',    // Class for headings
            'min_level' => 2,                // Include only h2-h6
            'max_level' => 3                 // Include up to h3
        ];

        // Initialize TOC generator with custom options
        $tocGenerator = new TOCGenerator($html, $options);

        // Generate the TOC and get processed HTML
        $toc = $tocGenerator->generateTOC();
        $processedHtml = $tocGenerator->getProcessedHtml();

        // Return to view
        return view('page', [
            'toc' => $toc,
            'content' => $processedHtml
        ]);
    }
}

可用选项

Blade 模板示例

以下是如何在 Blade 视图中渲染 TOC 和处理的 HTML 内容的示例

<div class="toc-container">
    {!! $toc !!}
</div>

<div class="content">
    {!! $content !!}
</div>

输出示例

给定以下 HTML

<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>

生成的 TOC

<ul class="toc">
    <li><a href="#toc-1">Main Title</a>
        <ul>
            <li><a href="#toc-2">Section 1</a>
                <ul>
                    <li><a href="#toc-3">Subsection 1.1</a></li>
                </ul>
            </li>
            <li><a href="#toc-4">Section 2</a>
                <ul>
                    <li><a href="#toc-5">Subsection 2.1</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

许可证

此软件包是开源软件,许可协议为 MIT 许可协议