alirezasedghi / laravel-toc
Laravel 的目录表
v1.0.1
2024-09-23 17:16 UTC
Requires
- php: >=8.0.0
- ext-dom: *
- illuminate/support: ^8.0|^9.0|^10.0|^11.0
README
一个 Laravel 扩展包,用于从 HTML 标题(h1, h2, ... h6
)生成目录表(TOC)。此包允许您创建一个可定制的动态目录表,包括列表类型(ul 或 ol)、HTML 类和级别过滤。
功能
- 自动从 HTML 标题生成 TOC。
- 可配置标题级别,包括(
h1
到h6
)。 - 可定制列表类型(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 内容中每个标题(h1
、h2
等)的 CSS 类。min_level
:TOC 中包含的最小标题级别(例如,1
为h1
)。max_level
:TOC 中包含的最大标题级别(例如,6
为h6
)。
带有自定义选项的示例
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 许可协议。